requireJS

1.用于ADM（基于模块的异步加载JavaScript代码的机制）js模块开发

2.下载requireJS

3.好处：

　　1）有效防止命名冲突（js多时可能很多全局变量容易重复）

　　2）声明不同的js文件之间的依赖

　　3）模块化的开发　　

4.常用方法：

　　requirejs.config:为模块指定别名

　　requirejs:将写好的模块引入并编写主代码

　　define；编写模块，在相应地方来引用

5.例子：

　　1）引入模块入口data-main是入口;<script data-main="js/main" src="js/require.js"></script>

　　2）入口js文件中两个方法requirejs.config配置baseUrl；paths;requirejs([],function(){})

require.config({
    baseUrl: 'js',
    paths: {
        jquery: 'jquery-1.8.2.min'
    }
});
/*
  jquery是定义好的模块；validate也是在validate.js中定义的模块；
  $代表jquery模块；validate代表define定义的模块
*/
require(['jquery','validate'],function($,validate) {
    $('body').css('background-color','red');
    console.log(validate.isEqual(12,23));
});

View Code

　　3定义的模块外部不能访问只能防护出结果：

//这里是一个私有的只能内部自己放回数据 
define(['jquery'],function($){
    return{
        isEmpty:function(){},
        checkLength:function(){},
        isEqual:function(str1,str2){
            return str1===str2;
        }
    }
    
})

View Code

6.定义模块

　　1）简单键值对

　　　　define({ color: "black", size: "unisize" });

　　2）定义函数(函数返回对象)

　　　　define(function(){return

　　　　　　color:"red",

　　　　　　size:"unsize"

　　　　})

　　3）定义带依赖的函数(返回对象)

　　　　define(["./inventory"],function(inventory){

　　　　　　return{

　　　　　　　　color:"red",size:"large",addToInventory:function(){

　　　　　　　　　　inventory.decrement(this)

　　　　}}})

　　4）定义一个模块作为一个函数（返回函数）

　　　　define(["my/inventory"],function(inventory) { return function(title) {

　　 return title ? (window.title = title) : inventory.storeName;

　　 }} );

　　5）用简单的CommonJS包装器定义模块（将几个对象作为局部变量放入）

　　　　define(function(require,exports,module)){

　　　　　　var a=require("a"),

　　　　　　return function(){}

　　　　}

　　6）自定义方式定义模块（第一个参数为模块即给模块定义了名字,这种起了名字的模块可移植性差，一般是有优化工具自动生成的）

　　　　define("foo/title",["my/cart","my/inventory"],function(cart,inventory){

　　　　　　dsfasfasdfasf

　　　　})　　　　

　　7）其他模块说明

　　　　想要生成相对与模块的URL：可以将“require”作为依赖

　　　　define(["require"], function(require) { var cssUrl = require.toUrl("./style.css"); });

　　　　控制台调用代码：require("module/name").callSomeFunction()

　　　　当遇到依赖对象为空时：可用exports.foo对象得到可能为null的模块　

1.方式一
define(['a', 'exports'], function(a, exports) {  
    exports.foo = function () {         return a.bar();   
      }; }); 
2.方式二CommandJS


define(function(require, exports, module) { 
    var a = require("a"); 
    exports.foo = function () {return a.bar();
     }; });

View Code

　　8)指定一个JSONP服务依赖

　　　require(["http://example.com/api/data.json?callback=define"], function (data) { console.log(data); } );

　　9）取消模块的定义

　　　 require.undef()

7.运行机制

　　使用head.appendChild()加载依赖作为script标签-》加载完得到模块间调用顺序

8.在外层Html中使用require（不用data-main入口属性调用require方法）

　　1）传递配置项对象作为第一个参数

<script type="text/javascript" src="scripts/require.js"></script> 
<script type="text/javascript">  
     require.config({     baseUrl: "/another/path",     paths:          {         "some": "some/v1.0"     },     waitSeconds: 15,     locale: "fr-fr"   });   require( ["some/module", "my/module", "a.js", "b.js"],     function(someModule,    myModule) {         //This function will be called when all the dependencies         //listed above are loaded. Note that this function could         //be called before the page is loaded.         //This callback is optional.     }   ); 
</script>

View Code

　　2）加载 require.js 之前，你可以定义一个 require 对象

<script type="text/javascript">   
     var require = {        
        deps:    ["some/module1", "my/module2", "a.js", "b.js"],
        callback: function(module1, module2) {callback is optional.}     };
</script> 
<script type="text/javascript" src="scripts/require.js"></script>

View Code

9.配置项详解(require.config{}中的)

　　baseUrl；paths;

　　shim(当加载的js模块不符合AMD规范时用shim替代require(),一般的jquery.form插件也不符合AMD规范)；

　　　　（类似与easyui 必须要jquery.js，所以不能直接使用，这种情况需用shim 的deps配置它的依赖js）　　

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})
配置后可加载插件后的jquery了
require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

View Code

　　map:

 requirejs.config({
     map: {
         '*': {
             'foo': 'foo1.2'
         },
         'some/oldmodule': {
             'foo': 'foo1.0'
         }     } });

View Code

　　Config：

requirejs.config({
     config: {
         'bar': {
             size: 'large'
         },
         'baz': {
             color: 'blue' 
        }     } }); 
 
define(function (require, exports, module) {
     // 这里将读取 bar 中的 size 信息
     var size = module.config().size; }); 
 
define(['module'], function (module) {     // 这里将读取到 baz.js 模块信息
     var color = module.config().color;
 });

View Code

　　传递 config 对象到 package 中

requirejs.config({
     //Pass an API key for use in the pixie package's
     //main module.
     config: {
         'pixie/index': {
             apiKey: 'XJKDLNS'
         }
     },
     //Set up config for the "pixie" package, whose main
     //module is the index.js file in the pixie folder.
     packages: [
         {
             name: 'pixie',
             main: 'index'
         }
     ] });

View Code

packages：配置从 CommonJS 包中加载的模块。

waitSeconds：脚本加载超时时间。设置为 0 禁用超时。默认值为 7s
context：用来定义加载上下文的名称。这个机制允许 require.js 在一个页面中加载多个版本的模块，只要在最外层调用一个唯一的上下文名称。如何正确的使用它，请参考多版本支持章节。
deps：需要加载的依赖数组。在加载 require.js 之前，require 被定义成一个配置对象，同时你又想一旦 require()被定义时指定依赖的情况下，这时是非常有用的。使用 deps 就像调用 require([])一样，但是加载器一旦处理到配置项就立刻加载依赖。它不会阻塞来自模块的任何 require()调用，她仅仅是一种用来异步的加载模块作为配置项块方法
callback：当所有的模块加载完成后执行的函数。在加载 require.js 之前，require 被定义成一个配置对象，同时你想要在配置的依赖数组都被加载后指定一个函数去执行。
enforceDefine：如果设置成 true，如果加载的脚本没有调用 define()或者校验 shim 导出的字符串值时将抛出异常。更多信息参考 IE 中捕获加载失败。
xhtml：如果设置成 true，将使用 document.createElementNS()创建 script 元素
urlArgs：在 RequireJS 用来查询资源的 URL 后添加的额外参数值。当浏览器或服务器配置没有正确配置时，是缓存失效。

scriptType：通过 RequireJS 指定<script>标签的 type 属性值

posted @ 2017-06-19 22:40 王吉平阅读(492) 评论(0) 编辑收藏举报

刷新页面返回顶部

小平1993

requireJS

公告