最近忙于学校的一个新网站建设,对于以前的前端程序编写方式的不正规特意上网学习了require.js 的用法,使此次的工程更加有条理同时符合当前前端的开发模式——前端模块化。
网上有不少很好的学习文章这里推荐阮一峰老师的:http://www.ruanyifeng.com/blog/2012/11/require_js.html
下面是本人归纳的一些要点:
1、使用require.js 必须从官网下载 require.js 文件 http://www.requirejs.cn/ 打开官网便可以下载,下载完之后就好像导入jquery 文件一样用script 标签导入
<script type="text/javascript" src="js/require.js" defer async="true" data-main="js/loginMain"></script>
这里的script 标签不再像以前导入js 文件那样简单,这里有几个重要属性:
①:defer 和 async="true":这两个属性是规定浏览器异步加载requier.js 这个文件的,防止在网络环境较差的时候 网页处于假死状态
②:data-main: 这个属性是指定此页面js 脚本的main 文件,就像java 以及 c 语言中的main 函数一样,所有通过require.js 整理的模块都将在这个文件里面执行
而src 自然就是导入我们的 require.js 文件了
2、main 函数的实现:
导入完 require.js 文件,指定好了页面的main 文件了我们就要编写我们的main 文件了
require(["jquery.min","math"],function($,math){
var body = $("body");
console.log(body);
var result = math.add(1,2);
console.log(result);
})
main 文件里面的不是main 函数而是由 require.js 提供的require 函数,这个函数接收两个参数:
第一个参数:数组,保存着需要加载的模块文件名字,例如jquery.min.js 这个模块文件它的名字当然就是 “jquery.min” 啦,而那个math 就是我自己定义的js 文件 math.js
第二个参数:回调函数。这个函数同样接收参数,第一个参数保存着多少个模块的名字,这个函数可写的参数就有多少个,而函数的参数只是这一个模块的一个代名词,主要使用参数的名字去调用模块的某一个方法或值,例如,jquery的参数可以写成这样:
require(["jquery.min","math"],function(q,math){
var body = q("body");
console.log(body);
var result = math.add(1,2);
console.log(result);
})
那么,调用jquery 模块的的方法时就只能通过 “q” 这个参数名去引用了
*注意每一个模块都必须有一个出口(返回值)
在回调函数之内我们就可以使用加载了的模块中的方法了!
3、require.js 接受模块的形式是 AMD 形式
当我们使用 require.js 加载我们的模块时我们不可以用以前编写javascript 的方式写了 必须按照AMD 规范,即像如下这样写:
define(function(){
function add(num1,num2){
return num1 + num2;
} return {
add: add
};
})
如果某一模块需要依赖其他一些模块,则define 方法中的第一个参数可以传进一个数组,数组里面保存的是要调用的模块名字,函数的参数依然是调用前面依赖模块的代名词而已
例:
define(["M1"],function(m1){
function add(num1,num2){
return num1 + num2;
} return {
add: add
m1.foo();
};
})
所有模块的代码都要写在 define 这个方法的回调函数中
但是这种形式在我们编写自己的模块的时候显然是没什么大问题的,反正都是要自己写。但是在导入一些流行的前端库例如:jquery这些的时候就有问题了,jquery的某些旧版本(这里我没有详细研究反正我用的 1.9.1 版本是不符合 AMD 规范的)就不符合AMD 规范了
那怎么办?没关系 require.js 又提供了一些方法可以兼容这些不符合 AMD形式的模块
只要我们在页面的main 文件中 require方法的前面加上这个方法就好:
require.config({
shim:{
'jquery.min':{
exports: '$'
}
} })
这个方法是require.config 方法,它接收一个对象作为参数,对象的内部有一个 shim属性,用来规定加载文件的依赖性以及输出的对象
上面的例子我将jquery 自定义规范,语法是首先在 shim属性里面 定义一个不符合AMD 规范模块的属性名(这里就是jquery啦),然后这个属性的值是一个对象,对象里面又有两个属性:
第一个是:exports 属性:值为此模块的输出值 也就是return的值,jquery的主函数就是 “$” 所以这里填 $
第二个是:deps 属性:值为此模块依赖的其他模块名字以数组的形式保存,例如:
require.config({
shim:{
'math':{
deps: ['m1','m2'],
exports: 'math'
}
} })
这里的 math 模块依赖 m1,m2 模块,输出为 math这个对象
本篇文章纯是个人觉得的要点归纳,不足的地方敬请原谅