使用RequireJS优化JavaScript引用代码的方法


Posted in Javascript onJuly 01, 2015

 RequireJS是一个提高你的javascript代码速度和质量的有效方法,同时它还让你的代码更容易阅读和维护。

在本文中,我会为你介绍RequireJS和应该如何使用它。我们讨论引入文件和定义模块,甚至还会接触优化方面的知识。

简单的说,require.js是一个脚本载入程序,允许你把你的javascript代码独立成文件和模块,同时管理每个模块间的依赖关系。

引入文件

在开始使用RequireJS前,我们需要先下载它的库和Asynchronous Module Definition(AMD)文件。然后在文档头部链接到require.js文件,就如:

<script src="require.js" data-main="main"></script>

你可能会问data-main属性是什么,使用RequireJS意味着当你在文档的头部调用require的时候,你同时也会链接到你的javascript应用的主文件,在这个例子里面就是main.js(请注意,RequireJS自动添加.js后缀到文件名的后面)

在main.js文件里面,需要为RequireJS做配置,载入模块和定义一个base路径,以便在引入文件时使用。

Require函数

RequireJS使用一个简单的require函数去导入脚本,在这个例子里面,RequireJS导入的是JQuery:
 

require(["jquery"], function($) {
 $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

RequireJS的一个优点就是,它非常容易阅读。在上面的代码中,我们可以看到,首先require函数抓取名字为jquery.js的文件,然后给一个匿名函数传入$作为参数,当这个动作完成后,你就可以任意使用JQuery的代码了。

现在,你的代码中一般不会包含jquery.js文件的jQuery库,就如大多数的插件和框架,我们通常选择从他们的GitHub或者Google CDN中导入进来,这样我们就需要配置他们的真正路径:
 

require.config({
 paths: {
  "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

这就是说你可以通过Google导入jquery(请注意我在这个例子里面使用的是"jquery"名称,你可以使用任何你喜欢的名称)

定义模块

使用AMD模式,意味着我们的代码可以结构化成为模块;这些模块实现应用中的某些功能。你可以在一个模块中只放两行代码或者100行代码,这完全决定于你想通过模块实现什么功能。

定义模块,我们可以这样写:
 

define(function () {
 function add (x,y) {
  return x + y;
 }
});

这个里面里面,我定义了一个add函数,并且没有任何依赖,但是如果这个函数需要jquery才能正常工作,定义代码可能就是这样:
 

define([‘jquery'], function () {
 function place(mydiv) {
$(mydiv).html(‘My Sample Text');
 }
});

使用这种语法,我们告诉JavaScript首先导入jquery,然后运行代码,这样任何时候都能使用jquery。我们也可以使用在Javascript文件中定义的模块,不仅限于框架或者插件。

优化

就像你看到的一样,RequireJS是一个强大的工具,去把你的文件组织成模块,并且在你需要的时候才导入。其中的缺点就是大量的javascript文件的时候,也需要大量的导入时间,所以RequireJS包含了一个optimizer优化器去收集所有文件的数据并把它放到一个压缩文件里面。

总的来说,RequireJS是一个很好的工具去组织和优化你web应用中的Javascript。

Javascript 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
javascript第一课
Feb 27 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
js 自动播放的实例代码
Nov 19 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
node.js实现上传文件功能
Jul 15 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 #Javascript
JavaScript的RequireJS库入门指南
Jul 01 #Javascript
Backbone.js的一些使用技巧
Jul 01 #Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 #Javascript
javascript常用的方法分享
Jul 01 #Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 #Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 #Javascript
You might like
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
vue组件与复用详解
2018/04/08 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
小学母亲节活动方案
2014/03/14 职场文书
年终晚会活动方案
2014/08/21 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
教师节老师寄语
2015/05/28 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android