模块化编程

   随着网页设计发展越来越复杂,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.title();

 

但是这种做法很容易把内部的方法和变量暴露给外部,容易被修改。

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();

 

 

 

posted @ 2016-08-08 10:45  bentos  阅读(222)  评论(0编辑  收藏  举报