网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高.
而且长长的JS代码,没有很好的将他们 模块化,对以后的维护造成极大的困难.
为此特地去了解下 require.js 的用途以及使用方法,为以后 代码重构 和 模块化 提供帮助.让后来者能更好的去管理代码.
1 为什么我要用require.js?
最近在制作个网站.引入了
<script src="static/script/jquery.js"></script>
<script src="static/script/jquery.lazyload.min.js"></script>
<script src="static/script/swiper.js"></script>
<script src="static/script/laydate/laydate.js"></script>
.
.
.
<script scr="static/script/common.js"></script>
<!--业务代码-->
HTML里依次引入了 js 代码,在加载这些 js 的时候,页面将停止渲染,直到 js 文件加载完毕.
不同的 js 之间存在依赖关系,必须保证 js 文件按顺序执行,当依赖关系变得复杂的时候, 编写和维护将会变得极其困难.
为此我们引入 require.js, 正是为了解决这两个问题.
2 在页面中加载require
先去官网下载 最新的 require.js.
在 html 头部 引用该 JS
<script data-main="static/script/main" src="static/script/require.js"></script>
data-main 是必要的属性, 指定 require.js 的入口文件.浏览器将会在 require.js加载完时 自动加载 该 入口文件
3 加载 JavaScript
使用 require.config 来管理我们的 js
require.config({
baseUrl: "static/script",
paths:{
jquery:'jquery',
lazy:'jquery.lazyload'
common:'common',
swiper:'swiper',
laydate:'laydate/laydate',
// 测试
test:'test',
}
});
利用 require.config, 使用baseUrl及"paths" config去设置module ID.
4 定义模块
在test.js 里 定义模块
一个 js 文件里 应该只定义一个模块,模块里 云溪加载多个模块,顺序不定,但是 依赖的顺序 最终会是正确的.
define(['jquery'],function($){
var width = 1000;
return {
//some function()
setWidth():{
width = $(window).width()
},
getWidth():{
return width;
}
};
});
5 加载模块.
require(['test'],function(test){
test.setWidth();
// 输出宽度
alert(test.getWidth());
});
6 加载非规范的模块
当模块没有才用 规范的 define() 定义的时候,我们就需要 shim
require.config({
paths:{
jquery:'jquery-2.1.4.min',
},
shim:{
'test':{
// 该不规范的模块所需要的依赖
deps:['jquery'],
exports:'test',
}
},
});
7 利用 r.js 压缩打包
将 js 分成了很多个文件和模块后，确实是方便维护了，但是还不够。
更多的 js 会造成 更多的 HTTP 响应，这将很严重的拖慢系统的速度。
为此我们 压缩这些 js 到一个或者几个文件，来减少 http 请求；