使用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对象与JSON格式数据相互转换
Feb 20 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
优化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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
使用adodb lite解决问题
2006/12/31 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
在新窗口打开超链接的方法小结
2013/04/14 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
留学推荐信中文范文三篇
2014/01/25 职场文书
房地产财务管理制度
2014/02/02 职场文书
学习十八大标语
2014/10/09 职场文书
2015年公务员工作总结
2015/04/24 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
老人与海读书笔记
2015/06/26 职场文书
婚宴新娘致辞
2015/07/28 职场文书
ant design vue的form表单取值方法
2022/06/01 Vue.js