使用RequireJS优化JavaScript引用代码的方法
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。
- 苹果就“降速门”致歉;央行批扫码支付不正当竞争;王健林旗下公司遭集体裁员
- 姚期智教授:量子计算是千亿万亿级别的产业,或成为科技创新的引擎
- Powershell中禁止执行脚本解决办法
- 使用AsyncTask异步更新UI界面及原理分析
- 商家为何要做小程序?
- Android中关于dip和px以及转换的总结
- Python介绍
- python案例-用户登录
- 推荐个找代码示例的VS 插件 All-In-One Code Framework Sample Browser
- 明星推出定制AI形象,虚拟形象有何优势
- apache工作模式梳理
- Mysql的二进制日志binlog的模式说明
- Git版本控制器使用总结性梳理
- “黑科技”人脸识别 TA和你的距离不是一般的近
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- C++ 模板沉思录(上)
- Python 为什么会有个奇怪的“...”对象?
- 老板让我从几百个Excel中查找数据,我用Python一分钟搞定!
- 爬取B站20万+条弹幕,我学会了如何成为B站老司机
- Pytorch实现卷积神经网络训练量化(QAT)
- VBA解压缩ZIP文件11——存在问题
- 算法集锦(14)|图像识别| 图像识别算法的罗夏测试
- CenterNet骨干网络之hourglass
- 语音识别中的声学特征提取:梅尔频率倒谱系数MFCC | 老炮儿改名PPLOVELL | 5th
- 基于Apriori的数据关联分析 | 工业数据分析 | 冰水数据智能专题 | 4th
- 基于FP树的频繁项挖掘 | 工业数据分析 | 冰水数据智能 | 5th
- ICCV2019 高通Data-Free Quantization论文解读
- VBA解压缩ZIP文件10——解压-动态Huffman
- 海思NNIE之PFPLD训练与量化
- [译] 用 Truffle 插件自动在Etherscan上验证合约代码