之前用一个模板,仿bootstrap ace写的一个管理系统的模板,需要一定的requirejs知识储备,因为当时就简单的看了一下以便看懂代码,并没有系统的学习,所以最近就有点忘了,特拉出来总结一下下~顺便推荐一下阮老师讲requirejs的博客:Javascript模块化编程(三):require.js的用法。个人很喜欢阮老师的博客,推荐~
RequireJS的目标是鼓励代码的模块化,它使用了不同于传统scirpt标签的脚本加载步骤。可以用它来加速、优化代码,但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。(摘自官网)
<script src="js/require.js"></script>
之后,我们要新建一个js页面用来编写主模块,因为主模块含各种配置,则我起名为config.js。
主模块是整个网页的入口代码。它有点像C语言的main()函数,所有代码都从这儿开始运行。引用方法是将其路径写入data-main,如下:
<script data-main ="lib/requirejs/config.js" src="lib/requirejs/require.js"></script>
主模块若不依赖任何模块,则可以直接写js代码,单这样就没必要用requirejs了,所以,主模块一般是依赖其他模块的,这时就要使用AMD规范定义的的require()函数。require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。如下代码,主模块依赖于jquery,且jquery为和config.js在同一目录下的名为jquery.js的文件
require(['jquery'], function (){
//回调函数
})
require.config({
baseUrl: 'lib',
paths: {
text: "requirejs/text",
css: "requirejs/css",
jquery: "jQuery/jquery-1.11.3.min",
bootstrap: "bootstrap/js/bootstrap.min",
datePicker: 'datepicker/js/datepicker',
colorBox: 'colorbox/js/jquery.colorbox-min',
fileUpload: 'imgUpload/js/fileinput.min',
editor: 'LineControl/js/editor',
file_zh: 'imgUpload/js/fileinput_locale_zh',
validator:'bootstrapValidator/js/bootstrap3-validation',
validator_zh: 'bootstrapValidator/js/language/zh_CN',
tree: 'jquery-ztree/js/jquery.ztree.core-3.5.min',
eya: 'eyas/base',
page :'eyas/jquery-page',
treeTable :'jquery-treeTable/js/jquery.treeTable'
}});
当然,路径页可以直接指定网址,但是如果加载多个模块,就会发出多次HTTP请求,会影响网页的加载速度。require.js提供了一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。(摘自阮老师博客,这个优化工具我没用过)
//mall.js
define(['bootstrap'], function(res){
//代码块
});
require(['mall'], function (goods){
//代码块
});
require.config({
baseUrl: 'lib',
paths: {
text: "requirejs/text",
css: "requirejs/css",
jquery: "jQuery/jquery-1.11.3.min",
bootstrap: "bootstrap/js/bootstrap.min",
datePicker: 'datepicker/js/datepicker',
colorBox: 'colorbox/js/jquery.colorbox-min',
fileUpload: 'imgUpload/js/fileinput.min',
editor: 'LineControl/js/editor',
file_zh: 'imgUpload/js/fileinput_locale_zh',
validator:'bootstrapValidator/js/bootstrap3-validation',
validator_zh: 'bootstrapValidator/js/language/zh_CN',
tree: 'jquery-ztree/js/jquery.ztree.core-3.5.min',
eya: 'eyas/base',
page :'eyas/jquery-page',
treeTable :'jquery-treeTable/js/jquery.treeTable'
},
shim: {
eya: {
deps: ['']
},
bootstrap: {
deps: ["css!../lib/bootstrap/css/bootstrap.min.css",'css!../css/base.css']
},
colorBox: {
deps: ["css!../lib/colorbox/css/colorbox.css"]
},
fileUpload: {
deps: ['css!../lib/imgUpload/css/fileinput.min.css']
},
datePicker: {
deps: ["css!../lib/datepicker/css/datepicker.css"]
},
file_zh: {
deps: ['fileUpload']
},
editor: {
deps: ["css!../lib/LineControl/css/editor.css",'css!../lib/LineControl/css/font-awesome.min.css']
},
validator_zh:{
deps: ['validator']
},
tree:{
deps: ["css!../lib/jquery-ztree/css/zTreeStyle.css"]
},
treeTable:{
deps: ["css!../lib/jquery-treeTable/themes/default/treeTable.css","css!../lib/jquery-treeTable/themes/vsStyle/treeTable.css"]
}
}
});
requirejs的插件机制
requireJ核心只是个加载器,通过动态创建script标签来加载模块化的JS文件。但只有js是无法满足我们的需求的,于是就有了requirejs的插件机制,插件和要加载的模块之间使用!分割。如上述的css插件,常用的还有text插件。
text插件可以用来加载一个非JS文件的内容,如:HTML片段,CSS片段。 可以从 http://requirejs.org/docs/download.html#text 下载text插件,可以放到RequireJS的plugins目录下。
- require.js文件在module/require/2.1.8/require.js
- text.js文件在module/requirejs/2.1.8/plugins/text.js
那么就可以通过下面的方式来使用:require(["module/require/2.1.8/plugins/text.js!html/a.html"], function(content){ console.log(content) })
其中module和html是平行的目录,并且是配置baseUrl的目录下。 这样通过text插件就可以拿到 html/a.html 的内容了,实际上text插件是通过ajax取获取内容的。 (摘自推酷)