使用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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
优化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动态创建Flash动画
2006/10/09 PHP
一个PHP日历程序
2006/12/06 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
详解python中的json的基本使用方法
2016/12/21 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
大学生物业管理求职信
2013/10/24 职场文书
运动会广播稿200米
2014/01/27 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
教师辞职信范文
2015/02/28 职场文书
污水处理保证书
2015/05/09 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书