使用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 相关文章推荐
热点新闻滚动特效的js代码
Aug 17 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
canvas绘制的直线动画
Jan 23 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 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 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
YUI模块开发原理详解
2013/11/18 Javascript
js读写json文件实例代码
2014/10/21 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
分享几道你可能遇到的python面试题
2017/07/24 Python
Python文件和流(实例讲解)
2017/09/12 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python 互换字典的键值对实例
2019/02/12 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
keras得到每层的系数方式
2020/06/15 Python
python文件及目录操作代码汇总
2020/07/08 Python
python list的index()和find()的实现
2020/11/16 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
日化店促销方案
2014/03/26 职场文书
村道德模范事迹材料
2014/08/28 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL