使用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 相关文章推荐
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
ES6中的类(Class)示例详解
Dec 09 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向浏览器输出内容的4个函数总结
2014/11/17 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
javascript常用函数(2)
2015/11/05 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
Python中下划线的使用方法
2015/03/27 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python从零开始创建区块链
2018/03/06 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
新农村建设汇报材料
2014/08/15 职场文书
公司开会通知
2015/04/20 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
导游词之杭州西湖
2019/09/19 职场文书
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang