使用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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 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判断访问IP的方法
2015/06/19 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
js的写法基础分析
2011/01/17 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python短信轰炸的代码
2020/03/25 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
运动会开幕式邀请函
2014/02/03 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
幼儿园教师求职信
2015/03/20 职场文书
python删除csv文件的行列
2021/04/06 Python
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python
关于Vue中的options选项
2022/03/22 Vue.js