JS模块化设计初探

基于模块的JS程序设计十分常见，易用。下面总结了几种在工作中遇到的常见样式：

 

一，基本模块

1，代码示例：

(function(){

//所有的函数和变量在此声明，并且可以访问外部变量

}())

2，说明

• 说其实基本格式，其实就是JS中的匿名函数闭包。
• 在函数表达式中内部依然可以访问外部的全局变量

 

二，全局变量导入

1，代码示例

(function($,YAHOO){

//在此作用域中有对Yahoo和jQuery的控制

//更快更清晰

}(jQuery,YAHOO))

2， 说明

• 基于第一种模式如果函数调用了诸如jQuery或者yahoo之类的插件，由于JS的作用域链的存在（Scope Chain）会降低代码执行效率。
• 在这个模式中，把插件作为参数出入并在函数声明中作为形参传入。这种方式结构更加清晰，执行更加快捷。

 

三，模块导出
1， 代码示例

varModule=(function(){

//会被Export的 var

var_mePerson={};

//内部变量

var_privateVar=1;

 //内部方法

function_internalMethod(){

console.log('Thisis a internal method');

_privateVar++;

console        .log('Internalvar is '+ _privateVar);

}

   

 //定义公共方法

_mePerson.GetAge=function(){console.log('Ageis 25');

_internalMethod        ();

};

_mePerson.GetName=function(){console.log('Nameis WWW')};

_mePerson.GetCompany=function(){console.log('Companyis MS')};

 

return_mePerson        ;

}());

2， 说明

-完成了对公有，私用变量和函数的控制，强化了面向对象的概念

-模块的导出增加了代码重用更有助于任务分解

  

上面的几种模块写法为项目代码模块化做了铺垫，当然也要根据具体的情况分析使用，虽然项目的前期可能会增加设计的时间但对项目长久的可维护和易维护性打下了良好的基础。下面是针对分解大的JS文件做的一些常识，这样做的目的是有助于分解任务，对现有的JS模块做扩展。

扩展现有模块

-前提是已经存在名为Module的JS模块，对其扩展应用下面格式

-Var在这里是可选项目，因为已经存在名为Module的模块

varModule=(function(my){

my.augmentedMethod=function(){

console.log("Augmentedmethod");

};

returnmy;

}(Module));

 

JS模块扩展的两种方式：

一，松扩展 （Loose augmentation）

1，格式

varModule=(function(my){

my.looseAugmentedMethod=function(){

console.log('Thisis looseAugmentedMethod');

};

returnmy;

}(Module||{}));

 

2，说明

-允许模块异步加载，Var在这里是必须而非可选，因为不能确定是否Module已经存在

-允许用户对现有模块增加功能

-在加载时对其属性进行重写或者扩展是不安全的，因为它的依赖文件也在加载并且可能没有加载完全。

 

二，紧扩展
为了克服上面模式中的问题（不能重写）引入下面的方式，其缺点是不能异步加载

varModule=(function(my){

         var_oldGetAge=my.GetAge;

         my.GetAge=function(){

                 console.log('NewgetAge method');                

                 _oldGetAge();

         };

returnmy;

}(Module));

 

对现有模块复制

代码格式：

前提是已经存在名为Module的模块，这里用的是松扩展模式

varModule_Clone=(function(oldModule){

var_my={};

varkey;

 

for(keyin oldModule)

{

if(oldModule.hasOwnProperty(key))

{

_my[key]=oldModule[key];        

}

}

 

varsupur_moduleMethod = oldModule.GetAge;

_my.GetAge=function(){

//couldaccess supur method here

console.log('Newclone method from Modoule_clone');

};

return_my;

}(Module));

 

同个模块的多个文件中共享私有变量

代码示例：

varModule=(function(my){

var_privateVar=my._privateVar=my._privateVar||{};

 

var_seal=my._seal=my._seal||function () {

deletemy._privateVar;

deletemy._seal;

deletemy._unseal;

}

 

var_unseal=my._unseal=my._unseal||function (){

my._privateVar=_privateVar;

my._seal=_seal;

my._unseal=_unseal;

}

returnmy;

}(Module||{}));

 

说明：

-注意连续复制的执行顺序为从右到左

-复制给my._privateVar 的目的是使新创建的对象不为空{}，而是包含_privateVar属性

-通过_seal _unseal 完成对_privateVar的控制

 

对现有模块扩充子模块

Module.sub=(function(){

varmy={};

my.method=function(){

console.log('Thisis sub method');

};

returnmy;

}());

 

最后，综合上面的几种最常用模式结合jQuery给出如下示例：

大家能找找毛病吗？ （不要运行，直接看;)）

varUTIL=(function(parent,$){

var_my=parent.ajax=parent.ajax||{};

 

_my.get=function(url,params,callback){

return$.getJSON(url,params,callback);

}; 

}(UTIL||{},jQuery)