Javascript 设计模式系统讲解与应用

npm init

"scripts": {
    "dev": "webpack --config webpack.dev.config.js --mode development"
  },

npm install -D webpack-dev-server / html-webpack-plugin

npm install -D 
babel-core 
babel-loader 
babel-polyfill 
babel-preset-es2015 
babel-preset-latest

• 继承，子类继承父类
• 封装，数据的权限和保密
• 多态，同一接口不同实现

• 1、程序执行：顺序、判断、循环----结构化
• 2、面向对象---- 数据结构化
• 3、对于计算机，结构化的才是最简单的
• 4、编程应该 简单&抽象

• 1、即按照哪种思路或者标准来实现功能
• 2、功能相同，可以有不同设计方案来实现
• 3、伴随着需求增加，设计的作用才能体现出来

• 1、小即美
• 2、让每个程序只做好一件事
• 3、快速搭建原型
• 4、舍弃高效率而取可移植性
• 5、采用纯文本存储数据
• 6、充分利用软件的杠杆效应（软件复用）
• 7、使用shell脚本来提高杠杆效应和可移植性
• 8、避免强制性的用户界面
• 9、让每个程序都成为过滤器

• 1、允许用户定制环境
• 2、尽量使操作系统内核小而轻量
• 3、使用小写字母并尽量简短
• 4、沉默是金
• 5、各部分之和大于整体
• 6、寻求90%的解决方案

• 1、S 单一职责原则
• 2、O 开放封闭原则
• 3、L 李氏置换原则
• 4、I 接口独立原则
• 5、D 依赖倒置原则

function loadImg(src){
   return new Promise(function(resolve,reject){
      let img = document.createElement('img);
      img.onload = function(){
         resolve(img)
      }
      img.error = function(){
         reject("图片加载失败")
      }
      img.src=src;
   }
)}

• 1、工厂模式
• 2、单例模式
• 3、原型模式

• 1、适配器模式
• 2、装饰器模式
• 3、代理模式
• 4、外观模式
• 5、桥接模式
• 6、组合模式
• 7、享元模式

• 1、策略模式
• 2、模板方法模式
• 3、观察者模式
• 4、迭代器模式
• 5、职责模式
• 6、命令模式

• 1、备忘录模式
• 2、状态模式
• 3、访问者模式
• 4、终结者模式
• 5、解释器模式

class jQuery{
   constructor(selector){
       let slice = Array.prototype.slice;
       let dom = slice.call(document.querySelectorAll(selector))
       let len = dom?dom.length:0;
       for(let i=0;i<len;i++){
          this[i] = dom[i];
       }
       this.length = len;
       this.selector = selector || '';
   }
   append(node){
   }
   addClass(name){
   }
   html(data){
   }
}
window.$ = function(selector){
   return new jQuery(selector)
}

class Vnode(tag,attrs,children){
}

React.createElement = function(tag,attrs,children){
   return new Vnode(tag,attrs,children);
}

// jQuery只有一个$
if(window.jQuery!=null){
   return window.jQuery;
}else{
   // 初始化
}

npm install -D babel-plugin-transform-decorators-legacy

{
    "presets": [
        [
            "latest",
            {
                "es2015": false
            }
        ]
    ],
    "plugins": [
        "transform-decorators-legacy"
    ]
}

@testDecclass Demo{}
function  testDemo(target){
   target.isDec = true;
}
alert(Demo.isDec)

function mixins(...list) {
    return function (target) {
        Object.assign(target.prototype, ...list);
    }
}
const Foo = {
    foo() {
        alert("foo");
    }
}
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo();// foo

function readonly(target, name, descriptor) {
    // descriptor 属性描述（Object.defineProperty中会用到），
    // {
    //     value:  specifiedFunction,
    //     enumerable:false,
    //     configurable:true,
    //     writable: true
    // }
    descriptor.writable = false;
    return descriptor;}
class Person {
    constructor() {
        this.first = 'A';
        this.last = "B";
    }
    @readonly
    name() {
        return `${this.first} ${this.last}`
    }
}
let p = new Person();
console.log(p.name());// AB
p.name = function () { }; // 这里会报错，因为name设计只读属性

class Math {
    @log
    add(a, b) {
        return a + b;
    }
}
const math = new Math();
const result = math.add(2, 4);// 执行add时，会自动打印日志，因为有@log装饰器
console.log("result", result);

var div = document.getElementById("div");
div.addEventListener("click",function(e){
   var target = e.target;
   if(target.nodeName==='A'){
      alert(target.innerHTML)
   }
})

// 变量赋值
$("#div).click(function(){
   var _this = this;
   setTimeout(()=>{
      _this.addClass("red)
   },1000)
})

// $.proxy$("#div).click($.proxy(function(){
   setTimeout(()=>{
      this.addClass("red)
   },1000)},this))

new Proxy(target,{
   get:function(target,key){
   }
   set:function(target,key,val){
   }
})

function bindEvent(elem,type,selector,fn){
   if(fn===null){
      fn = selector;
      selector = null;
   }
}
bindEvent(elem,'click','#div',fn);
bindEvent(elem,'click',fn);

• 1、发布订阅
• 2、一对多

var div  = window.getElementById("div");
div.addEventListener("click",function(){
   console.log("click")
})

let promise = new Promise(()=>{
   resolve()
})
promise.then((res)=>{
    
})

let callbacks = $.Callbacks();
callbacks.add(info=>{
   console.log(info)
})
callbacks.fire("执行")

const EventEmitter = require("events").EventEmitter;
const emitter1 = new EventEmitter();
emitter1.on("some",(info)=>{
   console.log(info)
})
emitter1.emit("some")

var fs = require("fs");
var readStream = fs.createReadStream("./data/file.txt")
var length = 0;
readStream.on("data", function (chunk) {
    length += chunk.toString().length
})
readStream.on("end", function () {
    console.log(length)
})

• 1、顺序访问一个集合
• 2、使用者无需知道集合的内部结构（封装）

var arr = [4,32,432,43];
arr.forEach((item)=>{})

var nodeList =  document.getElementByTagNames("p");
nodeList.map(item=>{})

// jQuery 对象遍历
var $p = $("p");
$p.each((key,p)=>{})

class Iterator {
    constructor(container) {
        this.container = container;
        this.index = 0;
        console.log(container)
    }
    next() {
        if (this.hasNext()) {
            return this.container.list[this.index++]
        }
        return null;
    }
    hasNext() {
        if (this.index >= this.container.list.length) {
            return false
        }
        return true;
    }
}
class Container {
    constructor(list) {
        this.list = list;
    }
    //生成遍历器   
 getIterator() { 
       return new Iterator(this)
    }
}
let arr = [432, 432, 42, 34];
let container = new Container(arr);
let iterator = container.getIterator();
while (iterator.hasNext()) {
    console.log(iterator.next())
}

function each(data){
   var $data = $(data);
   $data.each((key,p)=>{
      console.log(key,p)
   }
)}

• 1、ES6语法中，有序集合的数据类型已经有很多
• 2、Array Map String TypeArray arguments NodeList
• 3、需要一个统一的接口来遍历多有数据类型
• 4、（Object不是有序集合，可以用Map代替）
• 5、以上数据类型都有[Symbol.iterator]属性
• 6、属性值是函数，执行函数返回一个迭代器
• 7、这个迭代器有的方法就可以顺序迭代子元素
• 8、可运行Array.prototype[Symbol.iterator]来测试

• 1、Iterator的价值不限于上述几个类型的遍历
• 2、还有Generator函数的使用
• 3、即只要返回的数据符合Iterator接口的要求
• 4、即可以使用Iterator语法，这就是迭代器模式

1. 原型模式

1. 桥接模式
2. 组合模式
3. 享元模式

1. 策略模式
2. 模板方法模式
3. 职责模式
4. 命令模式
5. 备忘录模式
6. 中介者模式
7. 访问者模式
8. 解析器模式

• 1、clone自己，生成一个新对象
• 2、java默认有clone接口，不用自己实现

• 1、prototype可以理解为ES6 class的一种底层原理
• 2、而class是实现面向对象的基础，并不是服务于某个模块
• 3、若干年后ES普及，大家可能会忽略掉prototype
• 4、但是Object.create却会长久保留

<div id='div'>
 <a>
  <!--无限下拉列表  -->
</div>
<script>
   var div1 = document.getElementById("div")
    div.addEventListener("click",function(e){
      var target = e.target;
      if(e.nodeName === 'A'){
         console.log(target.innerHTML)
      }
    })
</script>

// 接收者class Receiver {
    exec() {
        console.log("执行") 
   }
}
// 命令者
class Command {
    constructor(receiver) {
        this.receiver = receiver;
    }
    cmd() {
        console.log("执行命令");
        this.receiver.exec();
    }
}
// 触发者class Invoker {
    constructor(command) {
        this.command = command;
    }
    invoke() {
        console.log("开始");
        this.command.cmd()
    }
}
// 执行者
let receiver = new Receiver();
// 中间命令者
let command = new Command(receiver);
//  发布命令者
let invoker = new Invoker(command);
invoker.invoke()