使用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中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
微信小程序录音与播放录音功能
Dec 25 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python ubplot使用方法解析
2020/01/10 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
应届大专毕业生自我鉴定
2014/04/08 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
市级三好生竞选稿
2015/11/21 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers