设计模式

修改之前的代码，很可能会导致“改好一个 bug，引发其他 bug”

使用装饰者模式

把程序中不变的部分隔离出来，
然后把可变的部分封装起来，
这样一来程序就具有了可扩展性。

方式

模版类

子类

在模板方法模式中，我们在父类中封装了子类的算法框架。
这些算法框架在正常状态下是适用于大多数子类的，但对于一些特别“个性”的子类，框架可能就不适用了。

比如我们在饮料类 Beverage 中封装了 饮料的冲泡顺序:
(1) 把水煮沸
(2) 用沸水冲泡饮料
(3) 把饮料倒进杯子
(4) 加调料
这 4 个冲泡饮料的步骤适用于咖啡和茶，在我们的饮料店里，
根据这 4 个步骤制作出来的咖 啡和茶，一直顺利地提供给绝大部分客人享用。
但有一些客人喝咖啡是不加调料(糖和牛奶)的。
既然 Beverage 作为父类，已经规定好了冲泡饮料的 4 个步骤，那么有什么办法可以让子类不受这个约束呢?

钩子方法(hook)可以用来解决这个问题，放置钩子是隔离变化的一种常见手段。
我们在父类中容易变化的地方放置钩子，钩子可以有一个默认的实现，究竟要不要“挂钩”，这由子类自行决定。
钩子方法的返回结果决定了模板方法后面部分的执行步骤，也就是程序接下来的走向。

模板类

class Event {
constructor() {
this.callbacks = {};
}
$on(name, fn) {
  (this.callbacks[name] || (this.callbacks[name] = [])).push(fn);
}
$emit(name, args) {
let cbs = this.callbacks[name];
if (cbs) {
cbs.forEach(c => {
  c.call(this, args);
});
}
}
$off(name, fn) {
let cbs = this.callbacks[name];
for (let i = 0, len = cbs.length; i < len; i++) {
if (cbs[i] === fn) {
cbs.splice(i, 1);
}
}
}
$once(name, fn) {
// 我自己想到的是加个 once 的标记，这样会需要改动数据结构
// vue 源码里的做法：
// 利用发布订阅对象的 $on 与 $off 方法
// 给此事件用 $on 注册的回调函数中先调用发布订阅对象的 $off 方法 移除自定义事件监听器
// 然后再利用 apply 方法，将 on 方法接收到的 emit 过来的参数给 fn 执行
let that = this; // 其实on函数执行时函数里面自己的 this 本来就等同于外面的 this, 因为$emit里面是 c.call(this, ...args);
function on() {
  that.$off(name, on);
  fn.apply(that, arguments);
}
that.$on(name, on);
}
}

在观察者模式中，被观察者 维护着一个 它的观察者列表；
在发布订阅模式中，发布者和订阅者不知道对方的存在，它们只能通过消息代理进行通信。

观察者模式是强耦合的，而发布订阅模式是松散耦合的。

参考

将每个分支转化为一种状态独立出来，
方便每种状态的管理又不至于每次执行时遍历所有分支

var m=new superMary()
m.putAction(['run','shot'])
m.run()

const InputStrategy = (function() {
let Strategy = {
notNull(val) {
  // \s 匹配一个空白字符，包括空格、制表符、换页符和换行符。
  return /\s+/.test(val) ? "请输入内容" : "";
},
number(val) {
  return /^[0-9]+(\.[0-9]+)?$/.test(val) ? "" : "请输入数字";
}
};
return {
check(type, val) {
  val = String(val).trim();
  return Strategy[type]
    ? Strategy[type](val)
    : `没有 ${type} 类型的检测方法`;
},
addStrategy(type, fn) {
  if (Strategy[type]) {
    throw new Error(`已有 ${type} 类型的检测方法`);
  } else {
    Strategy[type] = fn;
  }
}
};
})();

InputStrategy.check("number", "hh");
InputStrategy.addStrategy('number',()=>{})

模板方法模式基于继承的思想，而策略模式则偏重于组合和委托

1. 分解需求流程
   
2. 每个对象只做分内的事
   
3. 无关的事情传到下一个对象中做，直到需求完成
   

即便项目经理某一模块需求不确定，也不影响开发其他模块

方便进行单元测试

请求发送者只需要知道链中的第一个节点，
从而弱化了发送者和接收者之间的强联系。

var a = new myAxios({
baseURL: "xxx"
});
a.send({
  url: "xxx",
  data: {},
  beforeSend: function() {}
});

使用 canvas 绘图时需要不停使用 canvas 元素的上下文引用，这在多人项目中耦合度比较高。
通常会将上下文引用对象安全地封装在一个命令对象内部，如果他人想绘图，就通过命令对象书写一条命令。

CanvasCommand.excute([
{
  command: "fillStyle",
  param: "red"
},
{
  command: "fillRect",
  param: [20, 20, 100, 100]
}
]);

增加一个中介者对象后，所有的相关对象都通过中介者对象来通信，而不是互相引用。
当一个对象发生改变时，只需要通知中介者对象即可。
中介者使各对象之间耦合松散，而且可以独立地改变它们之间的交互。
中介者模式使网状的多对多关系变成了相对简单的一对多关系。

泡泡堂游戏

系统中会新增一个中介者对象

重复数据反复请求不仅增加了服务器端的压力，
请求数据的等待过程也会影响客户端的用户体验

就像银行里的点钞机，可以降低点钞成本，安全而可靠

在开发中极大简化了代码中的循环语句，使代码结构清晰紧凑；
这些简化了的循环语句实质上隐形地移到了迭代器中。

使用迭代器时，不用关心对象的内部结构，解决了对象的使用者和对象内部结构之间的耦合

提供了操作对象的统一接口

getVmVal('a')
getVmVal('a.b')
getVmVal('a.b.v')

setVmVal("k", 1);
setVmVal("k.g", 1);
setVmVal("a.s.l", 1);

// 没有完全弄清楚，以后需要实现这种需求时再来研究

const Interpreter = (function() {
return function(node, wrap) {
let path = [];
wrap = wrap || document;
if (node === wrap) {
if (wrap.nodeType == 1) {
path.push(wrap.nodeName.toUpperCase());
}
return path;
}
if (node.parentNode !== wrap) {
// 当前节点的父元素节点不等于容器节点
path = Interpreter(node.parentNode, wrap);
} else {
// 当前节点的父元素节点与容器节点相等
if (wrap.nodeType == 1) {
path.push(wrap.nodeName.toUpperCase());
}
}

if (node.nodeType == 1) {
path.push(node.nodeName.toUpperCase());
}

return path;
};
})();

let path=Interpreter(document.getElementById('span7'))

// 这里可以使用惰性模式章节中的 
// A.on(dom, type, fn) 方法
ul.onclick=function(e){
let e=e||window.event,
tar=e.target||e.srcElement;

if(tar.nodeName.toLowerCase()==='li'){
  tar.style.backgroundColor='grey'
}
}

优点

使用：
const LJ = new BaseLocalStorage("LJ_");

LJ.set("name", "lucy", new Date(), function() {
console.log(1)
}); // LJ_name : 1585287966510|-|lucy

定义：
class BaseLocalStorage {
constructor(prefix, seperator = "|-|") {
this.prefix = prefix;
this.seperator = seperator;
this.status = {
  SUCCESS: 0,
  FAILURE: 1,
  OVERFLOW: 2,
  TIMEOUT: 3
};
this.storage = localStorage || window.localStorage;
}
getKey(key) {
  return this.prefix + key;
}
}

var book=DB('book')
book.insert({title:'js 设计模式',type:'js'})

涉及技巧：

• 高阶函数（这里的返回值是函数）
  
• 闭包
  

字符串模版库

格式化方法

字符串拼接操作

A.init({
type: "listPart",
data: {
  h2: "hello",
  p: "paragraph",
  li: [
    {
      strong: "strong"
    }
  ]
}
});

在文件加载进来时
通过闭包执行该方法对其进行重新定义

在函数第一次调用的时候对其重定义

MyPromise.all = function(values) {
// 1. 要返回一个新的 Promise 实例
return new MyPromise((resolve, reject) => {
let result = [];

// 使用计数器解决多个异步的并发问题
let count = 0;
// 2. 返回值按照参数内的 promise 顺序排列
function processData(index, value) {
result[index] = value;
count++;

// 3. 不能直接判断 result.length 与 values.length 是否相等
// 因为可能会给 result 后面的项目先赋值，这样前面异步的项目会变为 <empty>，
// 这时虽然前面有异步结果没有返回，但是 result.length 可能就已经和 values.length 相同了
if (count === values.length) {
resolve(result);
}
}

for (let i = 0; i < values.length; i++) {
const current = values[i];
// 4. 利用 Promise.resolve 方法返回一个以给定值解析后的Promise 对象
// MyPromise.resolve(current).then(data => {
// processData(i, data);
// }, reject); //这里直接写 reject 也能达到效果，
//但为啥这样简写也可以不清楚，先按照下面这种常见的写法写
MyPromise.resolve(current).then(
data => {
  processData(i, data);
},
err => {
reject(err);
}
);
}
});
};

let fs =require('fs')
function read(url){
let dfd=MyPromise.defer()
fs.readFile(url,'utf8',function(err,data){
  if(err) dfd.reject(err)
  dfd.resolve(data)
})
return dfd.myPromise;
}
read('./name.txt').then(data=>{
  console.log(data)
})

MyPromise.defer = MyPromise.deferred = function() {
  let dfd = {};
  dfd.myPromise = new MyPromise((resolve, reject) => {
    dfd.resolve = resolve;
    dfd.reject = reject;
  });
  return dfd
};

目前的理解：
为了在使用 defer 方法时不用包一层 new Promise((resolve,reject)=>{}),
defer 方法内部自己用 new Promise((resolve,reject)=>{}) 包了一层，
并将日后要使用到 promise 实例与其 excutor 函数中的 resolve 和 reject 参数
都赋值给了 dfd 的相关属性。

创建

调度

这一章的代码没有跑通，
如果需要了解，考虑去看实现了 AMD 规范的 require.js 的源码分析

require.js 源码分析

灵活
高效
可扩展

结构清晰

methods.checkEmail().checkName();

var m=new Methods()
m.checkEmail().checkName()

链式调用，注意返回自身

使用类继承时将方法定义在父类的 prototype 上；
如果放在函数内部通过 this 定义，每 new 一次就要复制一下它自己本身的方法，会造成浪费

const book=Book('js') // es6 语法会自动检测并报错
// const book=new Book('js') 
console.log(book)

var book=Book('js')
// var book=new Book('js')
console.log(book)

通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类

const userNameAlert = createPop("alert", "用户名不能超过26个字母");

function createPop(type, text) {
const o = new Object();
o.content = text;
o.show = function() {};
if (type === "alert") {
// 警示框差异部分
}
if (type === "prompt") {
//...
}
if (type === "confirm") {
//...
}
return o;
}

let uiObj = new Factory("UI", "UI course", "blue");

用 es6 的 class 语法，在父类的 constructor 里调子类，子类里又调 super() 会导致栈溢出

class Human {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}

class Work {
constructor(work) {
this.work = work;
this.addDes();
}
addDes() {
switch (this.work) {
case "code":
this.title = "工程师";
this.des = "沉醉于编程";
}
}
changeWork(work){
this.work=work
}
}

// 上下滑动切换
class SlideLoopImg extends LoopImages{
changeImage(i){
console.log("SlideLoopImg changeImage function");
}
}
// 渐隐切换
class FadeLoopImg extends LoopImages{
// 重写方法
changeImage(i){
console.log(i)
console.log("FadeLoopImg changeImage function");
}
}

let a = lazySingle();
let b = lazySingle();
console.log(a === b); //true

function addEvent(dom, type, fn) {
if (dom.addEventListener) {
dom.addEventListener(type, fn, false);
} else if (dom.attachEvent) {
// <ie9
dom.attachEvent("on" + type, fn);
} else {
dom["on" + type] = fn;
}
}

可以使用惰性模式，去掉每次执行函数时的特性检测

常见的做法是先用一张 loading 图片占位，然后用异步的方式加载图片，等图片加载好了再把它填充到 img 节点里

var myImage = (function(){
var imgNode = document.createElement( 'img' );
document.body.appendChild( imgNode );
return {
  setSrc: function( src ){
    imgNode.src = src;
  }
}
})();

var proxyImage = (function(){
var img = new Image;
img.onload = function(){
  myImage.setSrc( this.src );  // 这里的this指 img 对象
}
return {
setSrc: function( src ){
  myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
  img.src = src;
}
}
})();

proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

主要作用

一般会将原始方法保存起来，在运行原始方法的前后进行一些其他操作

示例

用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的“孙对象”构成的。

用来表示树形结构/部分-整体结构

通过对象的多态性表现，
使得用户对单个对象和组合对象的使用具有一致性

请求从树最顶端的对象往下传递；
如果当前处理请求的对象是叶对象，叶对象自身会对请求作出相应的处理;
如果当前处理请求的对象是组合对象， 组合对象则会遍历它属下的子节点，将请求继续传递给这些子节点。

文件夹里既可以包含文件，又可以包含其他文件夹，最终可能组合成一棵树

组合模式在文件夹的应用中的好处

Folder 类

File 类

创建一些文件夹和文件对象，
并且让它们组合成一棵树

把移动硬盘里的文件和文件夹
都复制到这棵树

运用了组合模式之后，扫描整个文件夹的操作也是轻而易举的，
我们只需要操作树的最顶端对象

⚠️ 注意

const shareUnit = (function() {
const created = [];
let num=5;
function create() {
  let dom = document.createElement("div");
  document.getElementById("container").appendChild(dom);
  created.push(dom);
  return dom;
}
return {
getDiv: function(i) {
  if (created.length < num) {
    return create();
  } else {
    return created[i]
  }
}
};
})();

// 初始化列表
const articles = [
"11",
"22",
"33",
"44",
"55",
"66",
"77",
"88",
"99",
"100",
"101",
"102"
];

let page = 0,
num = 5,
len = articles.length;
for (let i = 0; i < num; i++) {
  if (articles[i]) {
    shareUnit.getDiv(i).innerHTML = articles[i];
  }
}