使用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 相关文章推荐
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php cookie 详解使用实例
2016/11/03 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python高斯消除矩阵
2019/01/02 Python
详解如何减少python内存的消耗
2019/08/09 Python
python根据多个文件名批量查找文件
2019/08/13 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
Internet体系结构
2014/12/21 面试题
九年级科学教学反思
2014/01/29 职场文书
财务总监管理职责范文
2014/03/09 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
因身体原因离职的辞职信范文
2015/05/12 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书