javascript设计模式--Module(模块)模式

JS模块设计实践

最新推荐文章于 2022-05-26 21:53:44 发布

最新推荐文章于 2022-05-26 21:53:44 发布 · 246 阅读

文章标签：

#javascript设计模式 #module模式

WEB前端同时被 2 个专栏收录

64 篇文章

订阅专栏

javascript

57 篇文章

订阅专栏

本文介绍JavaScript中的两种模块设计方法：对象字面量和Module模式，通过示例代码展示了如何使用这两种方法来组织代码，实现模块化的开发。

最近在看《javascript设计模式》一书，看完之后不能就完了吧，做个读书笔记。

模块是任何强大应用程序架构中不可或缺的一部分，它通常能够帮助我们清晰地分离和组织项目中的代码单元。

我在此只做两种实现模块的方法，1.对象字面量 2.Module模式

1.对象字面量

对象字面量表示法：可以被认为是包含一组键值对的对象，每一对键和值由冒号进行分隔，键也可以代表新的命名空间。

对象字面量不需要使用new运算符进行实例化，但不能用在一个语句的开头，因为开始的可能被解读为一个块的开始。

在对象外部，新成员可以使用赋值语句添加到对象字面量上。

通过对象字面量，我们可以处理成类似其他高级语言中命名空间或者包的形式。

var Mymodule = {
  getInfo:function(){
      console.log("My name is "+this.settings.lastname+",and I am "+this.settings.age);    
  },
  setInfo:function(info){
    console.log("Set Info:"+info);
  },
  settings:{firstname:"zhang",lastname:"mike",age:28},
  com:{
    cn:{
      setAge:function(age){
        console.log("Set age is:"+age);
      }
    }
  }
}
Mymodule.getDate = function(){
  console.log(new Date());
}
Mymodule.getInfo();
Mymodule.setInfo("zeromike");
Mymodule.getDate();
console.log(Mymodule.settings.firstname+" is "+Mymodule.settings.age+" years old!");
Mymodule.com.cn.setAge(18);

打印结果：

My name is mike,and I am 28

Set Info:zeromike

Sun Oct 05 2014 16:58:56 GMT+0800 (中国标准时间)

zhang is 28 years old!

Set age is:18

2.Module模式

Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。在Javascript中，Module模式用于进一步模拟类的概念，通过这种方式，能够使一个单独的对象拥有公有/私有方法和变量，从而屏蔽来自全局作用域的特殊部分。产生的结果是：函数名与在页面上其他脚本定义的函数冲突的可能性降低。

Module模式使用闭包封装"私有"状态和组织。它提供了一种包装混合私有/公有方法和变量的方式，防止其泄露至全局作用域，并与其他接口发生冲突。通过该模式，只返回一个公有API，而其他的一切则都维持在私有闭包里。该模式返回一个对象而不是一个函数。

第一种方式：

var MySecondModule = (function(){
  var defaultValue = {firstname:"zhang",lastname:"mike",age:"18"};
  var _setSettings=function(settings){
     _settings = settings;
     $.extend(defaultValue,_settings);
  }
  var _getSettings = function(){
    return defaultValue;
  }
  return {
    setNewSettings:function(settings){
      _setSettings(settings);
    },
    getNewSettings:_getSettings
  };
})();
var options = {firstname:"Lee",lastname:"Bruce",age:"32",address:"Beijing"};
MySecondModule.setNewSettings(options);
console.log(MySecondModule.getNewSettings());

打印结果：

{firstname: "Lee", lastname: "Bruce", age: "32", address: "Beijing"}

第二种方式：

var MyThirdModule = (function(){
  var defaultValue = {firstname:"zhang",lastname:"mike",age:"18"};
  var module = {};
  module.setNewSettings=function(settings){
     _settings = settings;
     $.extend(defaultValue,_settings);
  }
  module.getNewSettings=function(){
      return defaultValue;   
  }
  return module;
})();
var options = {firstname:"Lee",lastname:"Bruce",age:"32",address:"Beijing"};
MyThirdModule.setNewSettings(options);
console.log(MyThirdModule.getNewSettings());

打印结果：

{firstname: "Lee", lastname: "Bruce", age: "32", address: "Beijing"}

Bonus：单例模式

单例模式被熟知是因为它限制了实例化次数只能一次。从经典意义上说，Singleton模式，在该实例不存在的情况下，可以通过一个方法创建一个类来实现创建类的实例：如果实例已经存在，它会简单返回该对象的引用。

var Singleton = (function(){
  var _instance;
  function MySingleton(options){
    options = options||{};
    this.name = options.name||'zeromike';
    this.message = options.message||'Hi';
  }
  return {
    getInstance:function(options){
      if (_instance===undefined){
        _instance = new MySingleton(options);
      }
      return _instance;
    }
  };
})();
var single = Singleton.getInstance({name:'mike',message:'Hello'});
console.log(single.message+","+single.name);
var single = Singleton.getInstance();
console.log(single.message+","+single.name);

打印结果：

Hello,mike

代码HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Test2</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="module1.js">
</script>
<body>
</body>

</html>

将以上JS代码放到module1.js文件中即可。