使用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 相关文章推荐
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
判断ie的两种简单方法
Aug 12 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jQuery自定义事件的简单实现代码
Jan 27 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
vue中render函数的使用详解
Oct 12 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
优化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中的超全局变量
2006/10/09 PHP
PHP中实现进程间通讯
2006/10/09 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
div模拟选择框示例代码
2013/11/03 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python实现数通设备端口监控示例
2014/04/02 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
浅析Python 多行匹配模式
2020/07/24 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
C语言笔试题
2014/09/04 面试题
考博自荐信
2013/10/25 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
校园文明标语
2014/06/13 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
2015年招生工作总结
2015/05/04 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python