requireJS简介和一个完整实例

2021-05-19 22:29

阅读：311

YPE html>

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来加载所有的短模块名即可，这样即可在一个地方配置所有地方使用，同时模块别名的使用和管理也都比较方便。例如：
7、当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径；
8、require加载的模块一般都需要符合AMD规范，即使用define来申明模块；
9、加载非AMD规范的js，这时候就需要用到另一个功能：shim; 例如：

require.config({
    paths:{
        "underscore":"http://www.xxx.com/xpath/xFile.js"
    }
    ,shim: {
        "underscore" : {
            exports : "_";
        }
    }
});

　　好了，简要介绍就到这，下面看一个实际例子：

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

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

//-------------------------------------------------
userExample01
    |---- *.html //html页面
    |----scripts    
    |       |---- *.js //main.js, require.js等
            |----lib   //各个第三方框架
            |     |----jquery
            |            |---- *.js
            |----work  //各个业务工作JS文件
                   |---- *.js
//-------------------------------------------------

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

span>"-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
"http://www.w3.org/1999/xhtml">"Content-Type" content="text/html; charset=utf-8" />  
requireJSrequireJS 例子 example 01
  
"loadMsgCon" class="div01">

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

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

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

define([‘jquery‘],function($){  //注意模块的写法  
    //1,define intenal variable area//变量定义区  
    var myModule = {}; //推荐方式  
    var moduleName = "work module 01";  
    var version = "1.0.0";  
      
    //2,define intenal funciton area//函数定义区  
    var loadTip = function(tipMsg, refConId){  
        var tipMsg = tipMsg || "module is loaded finish.";  
        if(undefined === refConId || null === refConId || "" === refConId+""){  
            alert(tipMsg);  
        }else{  
            $(‘#‘ + (refConId+"")).html(tipMsg);  
        }  
    };  
      
    //3,should be return/output a object[exports/API] if other module need  
    //如有需要暴露(返回)本模块API(相关定义的变量和函数)给外部其它模块使用  
    myModule.moduleName = moduleName;  
    myModule.version = version;  
    myModule.loadTip = loadTip;   
    return myModule;  
      
    /* 
    //this is same to four line code upper//跟上面四行一样 
    return { 
        "moduleName":"work module 01" 
        ,"version":"1.0.0" 
        ,loadTip:loadTip 
    }; 
    */     
});

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

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

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

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

上一篇：PHP分布式中Redis实现Session

下一篇：CSS块级元素和行内元素

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：requireJS简介和一个完整实例
文章链接：http://soscw.com/index.php/essay/87783.html

亲，登录后才可以留言！

requireJS简介和一个完整实例

requireJS 例子 example 01

评论

热门文章

推荐文章

最新文章

置顶文章