JavaScript设计模式:读书笔记(未完)

Posted 2020-07-02

该篇随我读书的进度持续更新
阅读书目:《javascript设计模式》

1. 2016/3/30
2. 2016/3/31

 

2016/3/30：

模式是一种可复用的解决方案,可用于解决软件设计中遇到的常见问题./将解决问题的方法制作成模板,并且这些模板可应用于多种不同的情况.
有效模式的附加要求:适合性,实用性,适用性.

模式的优点:

• 防止局部问题引起大问题,模式让我们的代码更有组织性
• 模式通常是通用的解决方式,不管我们开发哪种应用程序,都可以用模式优化我们代码的结构
• 模式确实可以让我们避免代码复用,使代码更整洁
• 使用模式方便我们与工作伙伴一起工作时进行沟通和交流

优秀的模式有以下的特点

• 解决特殊问题
• 没有显而易见的解决方案－间接提供解决问题的方案
• 证明了作用与描述相一致
• 描述了一种关系,从正式描述能深入解释它与代码关系的系统结构和机制

反模式:

• 描述一种针对某个特定问题的不良解决方案,该方案会导致糟糕的情况发生
• 描述如何摆脱前述的糟糕情况以及如何创造好的解决方案

JavaScript中的反模式示例:

• 在全局上下文中定义大量的变量污染全局命名空间(就是乱使用全局变量)
• 向setTimeout/setInterval传递字符串,这会导致出发eval()的内部使用
• 修改Object类的原型
• 内联形式使用JavaScript,它是不可改变的
• 滥用document.write

设计模式:
确定->包含的类和实例,它们的角色,协作方式,职责分配

1. 创建型设计模式
   处理对象创建机制,以适合给定情况的方式来创建对象.旨在通过控制创建过程来解决减少创建对象的基本方法可能导致的项目复杂性
   Constructor(构造器),Factory(工厂),Abstract(抽象),Prototype(原型),Singleton(单例),Builder(生成器)都属于创建型设计模式.
2. 结构型设计模式
   找出不同对象之间建立关系的简单方法,确保系统某一部分发生变化时,系统整个结构不需要同时改变,对于不适合某一特定目的而需要改变的系统部分,模式也能帮助它进行重组.
   Decorator(装饰者),Facade(外观),Flyweight(享元),Adapter(适配器),Proxy(代理)都属于结构型设计模式.
3. 行为设计模式
   专注于改善或简化系统中不同对象的通信
   Iterator(迭代器),Mediator(中介者),Observer(观察者),Visitor(访问者)都属于行为设计模式.

2016/3/31:

Constructor(构造器)模式:
<经典OOPL中,Constructor是一种在内存已分配给该对象的情况下,用于初始化新创建对象的特殊方法.>
JavaScript中,创建新对象有两种方法:
1. var newObj = {};
2. var newObj = new Object();
以上两种方法都创建了空对象.
赋值方法有4种:
newObj.some = "hello world";
newObj["some"] = "hello world";
以上两种兼容ECMAScript3
Object.defineProperty(newObj,"some",{value:"hello world"});//mdn链接
Object.defineProperties(newObj,{"some":{value:"hello world"},"other":{value:"goodbye"}});//mdn链接
以上两种方法属于ECMAScript5

基本构造器:

function people(name,age){
    this.name = name;
    this.age = age;
    this.toString = function(){
      return this.name;
    };
  }

View Code

问题:toString这样的函数为每个people构造器创建的新对象而重新分别定义了.

带原型的构造器:

function people(name,age){
  this.name = name;
  this.age = age;
}
people.prototype.toString = function(){
  return this.name;
}

View Code

这样就可以单一实例在所有people对象之间共享了.

Module(模块)模式
在JavaScript中,实现模块的方法:

• 对象字面量表示法(对象表达式)
• Module模式
• AMD模块
• CommonJS模块
• ECMAScript Harmony模块

后三种在后面讨论,目前学习前两种

对象字面量表示法:
对象字面量不需要new来实例化,但不能用于语句开头,这会导致{被解读为一个块的开始.对象外部,新成员赋值可以用myModule.property = "Value";
使用对象字面量有助于封装和组织代码.

Module(模块)模式:
Module模式最初定义为一种在传统软件工程中为类提供私有和公有封装的方法.
而在JavaScript中,Module模式用于进一步模拟类的概念.我们通过该方式,能够使一个单独的对象拥有公有/私有方法和变量,使函数名与页面其他脚本定义的函数冲突可能性降低.
JavaScript中没有真正意义上的"私有",所以我们使用作用域来模拟该概念

//函数字面量
var myMoudle = {
  myProperty:"property",
  myConfig:{
    language:"cn"
  },
  myFunction:function(){
    return "myFunction";
  }
};

//Module mode
var newMoudle = (function() {
  //private
  var innerVar = "test";

  return {
    //publish
    displayInnerVar = function() {
      return innerVar;
    }

  };
})();

View Code

(待续)