随着简单网页逐渐变成交互复杂的网站应用,网页上的Javascript代码也变得越来越庞大,越来越复杂。加之随即而来的多人协作分工的开发方式,每个人只负责其中一个或者几个很小的功能模块,最终必须通过把各个功能模块组合才能变成一个完整的功能。
而多个模块又涉及到加载顺序,依赖关系等的影响,当功能模块增加、依赖关系越来越复杂的时候,让人工的去保证这些信息的严格正确性已经变得更加困难了。在这种情况下,产生了较多的模块化开发方式、方法以及工具。
早起的Javascript主要用于表单验证等一些简单的工作,写法也主要是过程式函数的形式。
2006年,Ajax席卷全球。JavaScript被重视了,越来越多的后端逻辑放到了前端。网页中的JS代码量急剧增加。这时写函数方式组织大量代码显得力不从心。有时调试一个小功能,从一个函数可能会跳到第N个函数去。这时写类的方式出现了,Prototype 率先流行开来,用它组织代码,写出的都是一个个类。例如采用混合的构造函数/原型模式自定义的对象:
Comment.prototype = { } //原型的方式定义共享的方法和属性
或者是把模块写成一个对象,所有的模块成员都放到这个对象里面。
var module = new Object({ })
但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。
到现在大肆倡导的模块化开发概念,模块化Javascript是啥?其实并没有什么神奇的,其实在计算机领域,模块化的概念被推崇了近四十年。软件总体结构体现模块化思想,即把软件划分为一些独立命名的部件,每个部件称为一个模块,当把所有模块组装在一起的时候,便可获得问题的一个解。模块化以分治法为依据,但是否意味着我们把软件无限制的细分下去。事实上当分割过细,模块总数增多,每个模块的成本确实减少了,但模块接口所需代价随之增加。要确保模块的合理分割则须了解信息隐藏,内聚度及耦合度。
最近了解了seaJs的思想,简单友好的模块定义规范,自然直观的代码组织方式;使用之后立即就喜欢上了,不仅如此它比requireJs好的一个点是主动修改了一些其他的开源库使其可以通过seaJs的方式加载,例如jquery,angularJs等。例如有个模块叫 comment.js,用来加载更多内容的:
define(function(require, exports, module){ //通用的模块定义方式,可以用require加载其他模块
var $ = require('jquery');
var baidu = require('template'); //百度的一个开源template,源码只有几百行效率不错,安利一下
exports.show = function(){ }
});
这样再引入seaJs之后就可以直接使用了,Like this:
seajs.config({
base: '/js/sea-modules/',
alias: {
"jquery" : "jquery/jquery/1.10.1/jquery.js",
"template" : "hope/template.js",
"comment" : "hope/comment.js",
},
charset: 'utf-8',
debug: false
});
seajs.use("comment", function(comment){ //评论组件
comment.show();
});
好了,关于模块化开发,以及seaJs就说这么多吧,seaJs还有很多更强大的地方,例如debug、插件等,感兴趣的可以进一步了解。