JavaScript 设计模式 - 模块模式

本文介绍了模块模式及其变种——暴露式模块模式和暴露式原型模式。模块模式利用闭包实现私有成员的封装,并通过返回一个包含公有接口的对象来暴露对外可见的方法。暴露式模块模式则将所有成员都放在闭包内,直接返回这些成员的引用。暴露式原型模式分离了构造函数和方法,使JavaScript具备面向对象的特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

模块模式

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

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();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值