requireJS 简要介绍和完整例子

DEMO下载地址:

从事前端开发工作的大概都有所耳闻 requireJS 这个框架，以前都是使用而已没时间写一些记录，今天有空就写一下，顺便写个例子；

什么是 requireJS ？

requireJS 是用JavaScript编写的JS框架，主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作，可简单理解为JS文件的加载器，它非常适合在浏览器中使用，它可以确保所依赖的JS文件加载完成之后再加载当前的JS文件，这在大量使用JS文件的项目中可确保各个JS文件的先后加载顺序，确保避免了以前因某些原因某个文件加载慢而导致其它加载快的文件需要依赖其某些功能而出现某函数或某变量找不到的问题，这点非常有用，也是 requireJS 的主要价值所在吧；

requireJS 官网 http://requirejs.org 中文翻译网 http://www.requirejs.cn 更多详细的请到官网了解，一下是快速简要了解的知识点。

快速简要了解要点：

1,require会定义三个变量：define,require,requirejs，其中require ===requirejs，一般使用require更简短,页面加载同时不阻塞渲染;
2,define(function(){…}); 从名字就可以看出这个api是用来定义一个模块;
3,require([‘aModule’,’bModule’],function(a,b){…}) 加载依赖模块，并执行加载完后的回调函数;
4,在使用requirejs时，加载模块时不用写.js后缀，当然也是不能写后缀;
5,require.config({…}) 是用来配置模块加载位置和设置基本路径等;
6,加载requirejs脚本的script标签加入了data-main属性，这属性指定在加载完reuqire.js后，就用requireJS加载该属性值指定路径下的JS文件并运行，所以一般该JS文件称为主JS文件，类似C或Java语言中main函数的功能，然后把require.config的配置加该主文件后可使每一个页面都使用这个配置，然后页面中就可直接使用require来加载所有的短模块名即可，这样即可在一个地方配置所有地方使用，同时模块别名的使用和管理也都比较方便；例如： < script data-main=”js/main” src=”js/require.js”>< /script>
7,当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径;
8,require加载的模块一般都需要符合AMD规范,即使用define来申明模块;
9,加载非AMD规范的js，这时候就需要用到另一个功能：shim; 例如：

 1 require.config({
 2     paths:{
 3         "underscore":"http://www.xxx.com/xpath/xFile.js"
 4     }
 5     ,shim: {
 6         "underscore" : {
 7             exports : "_";
 8         }
 9     }
10 });

 

好了，简要介绍就到这。

下面看一个实际例子

这个例子的设计要求是 workjs01.js 文件依赖 jquery, workjs02.js 依赖 workjs01.js，只有等依赖文件加载完了，最后在页面打出提示信息，

1，首先看例子文件目录结构：

 

 1 //-------------------------------------------------
 2 userExample01
 3     |---- *.html //html页面
 4     |----scripts    
 5     |       |---- *.js //main.js, require.js等
 6             |----lib   //各个第三方框架
 7             |     |----jquery
 8             |            |---- *.js
 9             |----work  //各个业务工作JS文件
10                    |---- *.js
11 
12 //-------------------------------------------------

 

2，HTML 文件 index.html 注意看 requireJS 加载方式之一，见 script 标签，

 1  2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 
 4 
 5 
 6 
 7 
14 
15 
16 
17 
requireJS 例子 example 01
18 

19  
20 
21 

 

2，主文件 main.js 一般用这个进行主文件，进行各个文件按一定先后完成各个文件的加载；推荐注意文件个注释说明和书写格式，方便养成良好习惯和代码规范；

 1 //1，about require js config//配置信息
 2 ;
 3 require.config({
 4     //define all js file path base on this base path
 5     //actually this can setting same to data-main attribute in script tag
 6     //定义所有JS文件的基本路径,实际这可跟script标签的data-main有相同的根路径
 7     baseUrl:"./scripts" 
 8 
 9     //define each js frame path, not need to add .js suffix name
10     //定义各个JS框架路径名,不用加后缀 .js
11     ,paths:{ 
12         "jquery":["http://libs.baidu.com/jquery/2.0.3/jquery", "lib/jquery/jquery-1.9.1.min"] //把对应的 jquery 这里写对即可
13         ,"workjs01":"work/workjs01" 
14         ,"workjs02":"work/workjs02"
15         ,"underscore":"" //路径未提供，可网上搜索然后加上即可
16     }
17 
18     //include NOT AMD specification js frame code
19     //包含其它非AMD规范的JS框架
20     ,shim:{ 
21         "underscore":{
22             "exports":"_"
23         }
24     }
25 
26 });
27 
28 //2，about load each js code basing on different dependency
29 //按不同先后的依赖关系加载各个JS文件
30 require(["jquery","workjs01"],function($,w1){
31     require(['workjs02']);
32 });

 

3，业务文件之一， workjs01.js 注意语法看看模块是怎么写的，推荐注意文件各个注释说明和书写格式，方便养成良好习惯和代码规范

 

 1 define(['jquery'],function($){  //注意模块的写法
 2     //1,define intenal variable area//变量定义区
 3     var myModule = {}; //推荐方式
 4     var moduleName = "work module 01";
 5     var version = "1.0.0";
 6 
 7     //2,define intenal funciton area//函数定义区
 8     var loadTip = function(tipMsg, refConId){
 9         var tipMsg = tipMsg || "module is loaded finish.";
10         if(undefined === refConId || null === refConId || "" === refConId+""){
11             alert(tipMsg);
12         }else{
13             $('#' + (refConId+"")).html(tipMsg);
14         }
15     };
16 
17     //3,should be return/output a object[exports/API] if other module need
18     //如有需要暴露(返回)本模块API(相关定义的变量和函数)给外部其它模块使用
19     myModule.moduleName = moduleName;
20     myModule.version = version;
21     myModule.loadTip = loadTip; 
22     return myModule;
23 
24     /*
25     //this is same to four line code upper//跟上面四行一样
26     return {
27         "moduleName":"work module 01"
28         ,"version":"1.0.0"
29         ,loadTip:loadTip
30     };
31     */
32 
33 });

4，业务文件之一， workjs02.js 推荐注意文件个注释说明和书写格式，方便养成良好习惯和代码规范；

 1 define(['workjs01'],function(w01){
 2     //1,define intenal variable area//变量定义区
 3     var moduleName = "work module 02";
 4     var moduleVersion = "1.0.0";
 5 
 6     //2,define intenal funciton area//函数定义区
 7     var setHtml = function(refId,strHtml){
 8         if(undefined === refConId || null === refConId || "" === refConId+""){
 9             return;
10         }else{
11             $('#' + (refId + "")).html(strHtml+"");
12         }
13     };
14 
15     //3,auto run when js file is loaded finish
16     //在JS加载完,可在本模块尾部[return之前]运行某函数,即完成自动运行
17     w01.loadTip("本页文件都加载完成，本页设计 workjs01.js 文件依赖jquery, workjs02.js 依赖 workjs01.js","loadMsgCon");
18 
19     //4,should be return/output a object[exports/API]
20     //如有需要暴露(返回)本模块API(相关定义的变量和函数)给外部其它模块使用
21     return {
22         "moduleName":moduleName
23         ,"version": moduleVersion
24     }
25 
26 });

 

注意，对应的 requireJS 和 jquery 这里没有给出，到对应的网上或官网下载放到对应目录，注意修改文件名对应即可，参见对应地方的注释；

好了，例子介绍到这就完了，还算简单吧？ 呵呵，我把这个例子完整打包上传到我的空间，欢迎点击这里下载，拍砖讨论…

值得注意的是本例虽然简单，但是基本包含了实际大部分 requireJS 知识点，注释也非常清楚，同时注意文件的组织结构，requireJS的配置的定义，调用关系，模块的写法，模块内部的写法，依赖文件的加载和调用，以及模块如何自动运行某个函数等等。可能部分有疏漏,，拍砖讨论…