JavaScript 设计模式 - 模块模式

模块模式

模块模式是一种创建型和结构型的设计模式，提供了一种生成公有接口的时候封装私有成员。可以通过闭包来完成，返回一个包含公有接口的对象。

这样我们就可以隐藏主要的逻辑，而只暴露一个接口：

var Module = (function(/* pass initialization data if necessary */) {
// Private data is stored within the closure
var privateData = 1;

// Because the function is immediately invoked,
// the return value becomes the public API
var api = {
getPrivateData: function() {
return privateData;
},

getDoublePrivateData: function() {
return api.getPrivateData() * 2;
}
};
return api;
})(/* pass initialization data if necessary */);

暴露式模块模式

暴露式模式块式是模块模式的变种，关键的不同点是他们的所有成员（public 和 private的）都在闭包中，返回值是一个不包含函数定义的对象，并且所有对成员数据的引用都是通过直接引用，而不是通过返回对象。

var Module = (function(/* pass initialization data if necessary */) {
// Private data is stored just like before
var privateData = 1;

// All functions must be declared outside of the returned object
var getPrivateData = function() {
return privateData;
};

var getDoublePrivateData = function() {
// Refer directly to enclosed members rather than through the returned object
return getPrivateData() * 2;
};

// Return an object literal with no function definitions
return {
getPrivateData: getPrivateData,
getDoublePrivateData: getDoublePrivateData
};
})(/* pass initialization data if necessary */);

暴露式原型模式

这种模式用于分离构造方法和其他方法。让可以可以把JavaScript变成面向对象的语言。

//Namespace setting
var NavigationNs = NavigationNs || {};

// This is used as a class constructor
NavigationNs.active = function(id, length) {
this.current = current;
this.length = length;
}

// The prototype is used to separate the construct and the methods
NavigationNs.active.prototype = function() {
// It is a example of a public method because is revealed in the return statement
var setCurrent = function() {
//Here the variables current and length are used as private class properties
for (var i = 0; i < this.length; i++) {
$(this.current).addClass('active');
}
}
return { setCurrent: setCurrent };
}();

// Example of parameterless constructor
NavigationNs.pagination = function() {}

NavigationNs.pagination.prototype = function() {
// It is a example of a private method because is not revealed in the return statement
var reload = function(data) {
// do something
},
// It the only public method, because it the only function referenced in the return statement
getPage = function(link) {
var a = $(link);

var options = {url: a.attr('href'), type: 'get'}
$.ajax(options).done(function(data) {
// after the the ajax call is done, it calls private method
reload(data);
});

return false;
}
return {getPage : getPage}
}();

上面的代码应该被放在一个单独的js文件中，像这样使用：

var menuActive = new NavigationNs.active('ul.sidebar-menu li', 5);
menuActive.setCurrent();