随着网页设计发展越来越复杂,javascript编码逐渐趋向模块化编程。但ES5 标准中并没类class的说法,要实现模块化更加无从说起,虽说最新的ES6 已经将类和模块列入要求,但是它的正式推广可能还要一断时间。但是要实现"模块化"还是有办法实现。
一、原始写法
最初的模块写法是将各种功能相似的函数和相关变量放在一起。
1 function a(){
2 ....
3 }
4 function b(){
5 .....
6 }
但这种做法明显的缺点是,很容易造成全局污染,无法保证不与其他模块变量方法发生冲突,还有就是无法看出模块与各成员的关系。
二、对象写法
为了改进上面缺点,可以使用一个对象将模块成员封装起来。
1 var Head =
2 {
3 title : function(){
4 ...
5 }
6 content : function() {
7 ....
8 }
上面这种写法,要调用时可以通过调用这个对象的属性来调用。
但是这种做法很容易把内部的方法和变量暴露给外部,容易被修改。
1 Head.content=function(){
2 var content = myContent;
3 return content;
4 }
三、立即执行函数
使用立即执行函数,可以做到不暴露私有成员的目的
1 var Head = ({ function(){
2
3 var title = function() {
4 ....
5 }
6 var content=function(){
7 ....
8 }
9 })()
这种方法能够使外部无法获得里面的方法和变量,若要用到相关方法变量,可以在里面返回一个方法:
1 var Head= (function ( ) {
2
3 function method1(){
4 title : function(){
5 ...
6 }
7 }
8
9 return{
10 getTitle: function(){
11 title();
12 }
13 };
14
15 })( );
16
17 myModule.getTitle();