seajs模块化开发初探

seajs官网:http://seajs.org/docs/

使用seajs模块化开发:

seaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。SeaJS 遵循MIT 协议,无论个人还是公司,都可以免费自由使用。

注:seajs的默认根目录:sea.js,就是以它为根目录

四步骤:

  1. 引入seajs库;
  2. 如何变为模块?
    -define(function(require,exports,module){…});
  3. 如何调用模块?
    -exports:对外接口,
    seajs.use(地址,回调函数):去调用模块;
  4. 如何依赖模块?-require

模块化用法:

//这是test1.js内容
define(function(require,exports,module){//参数不变
    //exports:对外接口
    //require:依赖的接口
    require('./test2.js');//相对地址
    //如果地址是一个模块的话,那么require的返回值就是模块中的exports
    // 即:require('./test2.js')=exports;

    function tab(){
        alert(require('./test2.js').a);
    }
    //将方法暴露出去
    exports.tab=tab;
});
//这是test2.js
define(function(require,exports,module){
    var a=10;
    exports.a=a;
});
//这是主文件调用
seajs.use('./js/test1.js',function(ex){
    //回调的参数,就是模块中的exports
    ex.tab();
    //此时再声明同名函数也不冲突,两个同名函数作用于不同空间
    function tab(){
        alert(456);
    }
    tab();
});

seajs多模块引用:

seajs.use(['./main.js','./main2.js'],function(ex,ex2){...});

ex,ex2分别对应相应的模块接口!

你可能感兴趣的:(JavaScript,模块化,seajs)