模块化编程1

一,原始写法

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

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

function m1 () {

//.....

}

function () {

//......

}

这是最初级的写法,这样m1(),m2(),组成一个模块。使用的时候,直接调用就行了,

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

二,对象写法

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

varmodule1 =  newObject({

_count :0,

m1 : function() {

},

m2 : function() {

}

});

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

module1.m1();

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

module1._count = 5;

三,立即执行函数写法

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

var module1=(function() {

var _count = 0;

var m1 = function() {

console.log("m1");

};

var m2 = function() {

console.log("m2");

};

return{

m1 : m1,

m2 : m2

}

})();

使用上面的写法,外部代码无法读取内部的_count变量。

四,放大模式

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另外一个模块,这是就有必要采用“放大模式”。

var module1=(function(mod) {

mod.m3=function() {

console.log("m3");

}

return mod;

})(module1);

这样写其实就是给一个模块添加新的方法m3();可以用这种方式给一个模块扩展方法。

5.宽放大模式

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

var module1 = (function (mod){

return;

})(window.module1 || {});

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

六,输入全局变量

独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。为了在模块颞部调用全局变量,必须显式地将其他变量输入模块。

var module1 = (function ($,YAHOO)  {

//

})(jQuery, YAHOO);

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

注:这是我自己的一个360ssp网站,需要点访问量,希望大家能够能够点击访问一下,支持一下。http://078156.top

posted @ 2017-09-26 16:26  仙人掌的成长  阅读(181)  评论(0编辑  收藏  举报