随着网站复杂化和需要不断的变化,以及项目团队成员的不断变化,我们写的js功能模块如何不与别人的发生冲突,如何解决项目中引入大量的js之间的依赖关系,如何提升工作的沟通成本,这是我们应该考虑的。我们可能会选择模块化开发以更好的管理代码。

目前用的比较广的是SeaJS和RequireJS,一个遵循CMD规范,一个遵循AMD规范。这两个库的核心功能应该也是解决JS之间的依赖,下面一起学习下SeaJS中依赖的实现。

正常情况下我们引入依赖的js,比如:b.js依赖a.js,一般在script标签中引入如下js,注意前后顺序不能错否则报错:

src="js/a.js"
src="js/a.js"

这样依赖就完成了。


下面我们具体看下seajs依赖的实现:

1. 我们在a.js中定义一个模块,只定义并输出一个m变量,如下:

define(function (require,exports,module) {
    var m = 1;
    function abc(){
        return m;
    };
    exports.abc = abc;
});

2. 我们在b.js中引入依赖的a.js,只输出从a.js获取的变量,如下:

define( function (require,exports,module){
    var m = require('./a');
    function abc(){
        return m.abc();
    };
    exports.abc = abc;
});

完成1、2两步b.js和a.js之间的依赖就完成了,下面我们测试一下依赖是否成功:

3. 我为了方便测试,再定义了一个主入口模块main.js来加载b.js,如下:

define(function (require,exports,module){
    var m = require('./b');
    function abc(){
        return m.abc();
    };
    exports.abc = abc;
});

在demo.html页面中调用main.js进行初始化:

seajs.config({
        base: './js/'
    });
    seajs.use('modules/main', function(ex){
        console.log(ex.abc()); /结果给出1
    });

这时输出了1,一个完整的seajs依赖的使用就实现了。

使用seajs做模块化开发管理代码固然不错,提高了代码可维护性和团队工作效率,但是随之而来的也带来了性能问题,增加了http请求次数,对于高访问量的大型网站,这是不能容忍的:

多增加了两次请求,开发阶段这样做没问题,但是上线为了不影响性能,我们期望优化目标是只有main.js一个请求,那如何解决这些问题呢?

spm出现了解决了这个问题,spm是 CMD 包管理,seajs 使用的 CMD 模块是需要 transport 的,首先需要在node环境下使用,请先确保本机已经安装了node环境和node包管理npm。

spm打包具体细节请参考:https://github.com/seajs/seajs/issues/538

最近更新:2015-10-31
转载注明:http://www.ddbing.com/detail/55.html  [复制链接]
尊重知识|文明读者
boxUI on the road
最新评论