JavaScript 设计模式 - 模块模式

来源:互联网 发布:浪潮gs软件下载 编辑:程序博客网 时间:2024/05/30 04:55

模块模式

模块模式是一种创建型和结构型的设计模式,提供了一种生成公有接口的时候封装私有成员。可以通过闭包来完成,返回一个包含公有接口的对象。
这样我们就可以隐藏主要的逻辑,而只暴露一个接口:

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 settingvar 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();
0 0