使用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 相关文章推荐
javascript Base类 包含基本的方法
Jul 22 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
vuex的使用步骤
Jan 06 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 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
深入了解PHP类Class的概念
2012/06/14 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python深入学习之上下文管理器
2014/08/31 Python
python遍历类中所有成员的方法
2015/03/18 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
Django框架 信号调度原理解析
2019/09/04 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
大学生未来职业生涯规划书
2014/02/15 职场文书
小学生倡议书范文
2014/05/13 职场文书
团队口号大全
2014/06/06 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
2016年教师新年寄语
2015/08/18 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
python区块链持久化和命令行接口实现简版
2022/05/25 Python