Requirejs是一个简单,实用,强大的前端模块化js库,它遵循AMD这一客户端模块定义规范,使用它能够使我们前端代码更加清晰高效加载,摆脱了以前前端代码杂乱无序的状态。
使用步骤如下:
1.下载require.js文件,地址为 http://www.requirejs.cn/docs/download.html#requirejs,并将其加入我们的项目中;
2.使用define方法定义模块
这里主要有两种形式,第一种是定义无依赖的js模块代码,即这个js模块是单独存在的,不依赖于其他模块或者js库,这里新建一个independent.js,代码如下
define( function() { return{ test1:function() { console.log('i am test1'); }, test2:function() { console.log('i am test2'); } } } )
在这个js文件中定义了一个模块,返回了一个对象,其包含两个方法用以外部文件调用,这是定义一个独立的模块;
第二种方式是定义一个依赖于其他模块的模块,新建一个depend.js,代码如下:
define(['test'],function(test){ return{ showName:function(){ console.log( test.name); }, showAge:function(){ console.log(test.age); } } });
这里定义了一个模块,其依赖于test模块,需要注意的是,requirejs默认js文件名为模块名,test模块即对应于test.js文件,在这个模块中,第一个参数是需要依赖的外部模块名称,是一个数组,也可以依赖多个,第二个参数是一个function,其形参test对应着test模块,所以在showName,showAge方法中课直接调用test的属性或方法;
test.js
define( function() { return { name:'张三', age:22 } } );
这里定义了一个test模块,返回了包含name和age的一个对象,供其他模块调用.
3.使用require调用模块
新建一个main.js,用来作为项目的主js文件,即在页面中只加载这个js文件,其他js文件都通过它以模块调用的形式存在,代码如下:
require(["depend"],function(de){ de.showAge(); de.showName(); });
表示调用depend模块,并调用其showAge和showName方法。
在html中加载requirejs,将其data-main属性指向我们的主js文件main.js
<script data-main="main.js" src="require.js"></script>
结果如下:
4.加载jQuery
平时开发中jQuery用的很多,最新版1.11以上的都遵循AMD规范,可以利用requirejs直接将其作为一个模块加载进来
在main.js中添加require.config,对jQuery进行配置,代码如下:
require.config( { paths:{ jquery:"http://code.jquery.com/jquery-1.11.1.min" } } );
这里配置了一个jQuery模块,它的地址为一个CDN地址,也可以将其下载到本地,地址指向本地地址也可以,注意地址后面没有.js,
然后就可以使用require方法来调用了,main.js中调用代码如下:
require(["jquery","depend","independent"],function($,de,ind){ de.showAge(); de.showName(); console.log($("#span1").html()); ind.test1(); ind.test2(); });
这里调用了三个模块,我们之前自己定义的两个加上jQuery模块,并且使用了他们中的方法,其中jquery模块选择html页面上的一个span并将其内部文字输出到控制台
其余两个模块调用的都是在他们内部自定义的方法
最终结果如下: