JavaScript 模块化编程(笔记)(3)

// require.js加载的模块,采用AMD规范,也就是说,模块必须按照AMD的规定来写;
// 具体来说,就是模块必须采用特定的define()函数来定义;如果一个模块不依赖其他模块,那么可以直接定义在define()函数中;
// 在math.js中定义math模块
// math.js
    define(function(){
        var add = function(x,y){
            return x+y;
        };
        return {
            add:add
        };
    });
// 在main.js中加载math模块
    require(['math'],function(math){
        alert(math.add(1,1));
    });
// 如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性;
// math.js
    define(['myLib'],function(myLib){
        function foo(){
            myLib.doSomething();
        }
        return {
            foo:foo
        };
    });
// 当require()函数加载上面这个模块的时候,就会先加载myLib.js文件;

六 加载非规范的模块

// 加载非规范的模块,在用require()加载之前,要先用require.config()方法,定义它们的一些特征;
    require.config({
        shim:{
            'underscore':{
                exports:'_'
            },
            'backbone':{
                deps:['underscore','jquery'],
                exports:'Backbone'
            }
        }
    });
// require.config()接收一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块;
// (1).定义deps数组,表明该模块的依赖性;
// (2).定义exports值(输出的变量名),表明这个模块外部调用时的名称;
比如:jQuery的插件
    shim:{
        'jquery.scroll':{
            deps:['jquery'],
            exports:'jQuery.fn.scroll'
        }
    };

七 require.js插件

1.domready:可以让回调函数在页面DOM结构加载完成之后运行;
    require(['domready!'],function(doc){
        // called once the DOM is ready;
    })   
2.text和image:允许require.js加载文本和图片文件;
    define(['text!review.txt','image!cat.jpg'],function(review,cat){
        console.log(review);
        document.body.appendChild(cat);
    });

您可能感兴趣的文章: