javascript 模块化编程----模块的写法

一、原始写法

模板就是实现特定功能的一组方法

只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。

　　function m1(){//... 　　}function m2(){//...}

上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。

这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

二、对象写法

为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

　　var module1 = new Object({

　　　　_count : 0,

　　　　m1 : function (){
　　　　　　//...
　　　　},

　　　　m2 : function (){
　　　　　　//...
　　　　}

　　});

上面的函数m1()和m2(），都封装在module1对象里。使用的时候，就是调用这个对象的属性。

　　module1.m1();

但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。

　　module1._count = 5;

三、立即执行函数写法

使用 立即执行函数，可以达到不暴露私有成员的目的。

var model1=(function(){var count=0;var fun1=function (){console.log("this is function1");};var fun2=function (){console.log("this is function2");}return {fun1:fun1,fun2:fun2}})();

使用上面的方法，外部代码无法读取count变量

console.log(model1.count)//undefined

这是JavaScript模板的基本写法。

四、放大模式

如果一个模块很大，必须分成几个部分，或者一个模板需要继承另一个模块，这时就有必要采用‘放大模式’

var model2=(function(mode){mode.fun3=function (){console.log("this is function3");};return mode})(model1);

model2继承model1，并添加方法fun3，输出model2，有fun1 fun2 fun3 三个方法，因为model1中count没有暴露，所以在model2中无法访问model1中的count

model1中也添加新方法fun3

五、宽放大模式

在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载，如果采用上一节的写法，第一个执行的部分有可能加载一个不存在的对象，这是就要采用‘宽放大模式’。

var module1 = ( function (mod){//...return mod;})(window.module1 || {});

与‘放大模式’相比，‘宽放大模式’就是‘立即执行函数’的参数可以是空对象。

六、 输入全局变量

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

var module1 = (function ($, YAHOO) {//...})(jQuery, YAHOO);

上面的module1模块需要使用jQuery库和YUI库，就把这两个库（其实是两个模块）当作参数输入module1。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

 

 

 

原文出处：http://www.ruanyifeng.com/blog/2012/11/require_js.html

 

转载于:https://www.cnblogs.com/xiaofenguo/p/6595483.html

总结

以上是生活随笔为你收集整理的javascript 模块化编程----模块的写法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。