使用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判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 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面向对象法则
2012/02/23 PHP
php中explode函数用法分析
2014/11/15 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
django缓存配置的几种方法详解
2018/07/16 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
python解析多层json操作示例
2019/12/30 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
python中if嵌套命令实例讲解
2021/02/25 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
Delphi工程师笔试题
2013/09/21 面试题
中文系学生自荐信范文
2013/11/13 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
小学毕业感言50字
2014/02/16 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
2014年组织部工作总结
2014/11/14 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
python库sklearn常用操作
2021/08/23 Python