1.Infancy——NoModularity将js代码按照功能放入不同的JS文件中,在模板中使用script标签引用文件分离是模块化的第一步存在问题:全局作用域的污染=>不利于大型项目和多人团队的开发共建2.成长期-命名空间模式单一全局变量中流行的命名空间模式JavaScript就是选择一个全局变量作为主要的引用对象。例如,jQuery库就使用了这种方法。varmyApplication=(function(){function(){//...},return{//...}})();命名空间前缀命名空间前缀模式有一个非常清晰的思路,就是选择一个唯一的命名空间,然后在它之后声明变量、方法和对象。varmyApplication_propertyA={};varmyApplication_propertyB={};functionmyApplication_myMethod(){}objectliteralnotationobjectliteral模式可以认为是一个包含一组键值对的对象,每对key和value之间用冒号隔开,key也可以是代码的新命名空间。varmyApplication={//可以轻松地为对象字面量定义函数getInfo:function(){//***},//可以进一步支持对象命名空间models:{},views:{pages:{}},collections:{}};嵌套命名空间嵌套命名空间模式可以说是对象字面量模式的升级版,也是一种有效的避免冲突的模式,因为即使存在命名空间,也不太可能出现嵌套子对象同上的情况。varmyApplication=myApplication||{};//定义嵌套的子对象myApplication.routers=myApplication.routers||{};myApplication.routers.test=myApplication.routers.test||{};IIFE(ImmediatelyInvokedFunctionExpression,ImmediatelyInvokeFunctionExpression)IIFE其实就是立即执行一个匿名函数。在JavaScript中,由于变量和函数是在只能在内部访问的上下文中显式定义的,因此函数调用提供了一种实现私有变量和方法的便捷方式。IIFE是封装应用程序逻辑以保护它不受全局命名空间影响的常用方法,在这里它也可以发挥其特殊作用。var命名空间=命名空间||{};(function(o){o.foo="foo";o.bar=function(){return"bar";};})(namespace);console.log(namespace);//定义一个简单的moduleconstiifeModule=(()=>{让count=0;return{increase:()=>++count,reset:()=>{count=0;}}})();iifeModule.increase();iifeModule.reset();//IIFEconst依赖其他模块iifeModule=((dependencyModule1,dependencyModule2)=>{letcount=0;return{increase:()=>++count,reset:()=>{count=0;}}})(dependencyModule1,dependencyModule2);iifeModule.increase();iifeModule.reset();//显示模块模式constiifeModule=(()=>{letcount=0;functionincreaseCount(){++count;}functionresetCount(){count=0;}return{increase:increaseCount,reset:resetCount}})();iifeModule.increase();iifeModule.reset();/***显示模块模式定义:*在模块模式的基础上,重新定义返回的私有作用域中的所有函数和变量。并返回一个匿名对象。他拥有所有指向私有函数的指针。*Module模式最初被定义为传统软件工程中为类提供私有和公共封装的方法。这里的JS最初使用IIEF封装**/namespaceinjectionNamespaceinjection是IIFE的另一种变体,它从函数包装器内部“注入”特定命名空间的方法和属性,将其用作命名空间代理。这种模式的优点是功能行为可以应用于多个对象或命名空间。varmyApplication=myApplication||{};myApplication.utils={};(function(){varvalue=5;this.getValue=function(){returnvalue;}//定义新的子命名空间this.tools={};}).apply(myApplication.utils);(function(){this.diagnose=function(){return"diagnose";}}).apply(myApplication.utils.tools);命名空间注入用于为多个模块或命名空间指定一组类似的基本功能,但最好在声明私有变量或方法时使用它,否则嵌套命名空间就足够了。自动嵌套命名空间functionextend(ns,nsStr){varparts=nsStr.split("."),parent=ns,pl;pl=零件.长度;for(vari=0;i
