js中的设计模式

js的设计模式还是真的要学一下的，看rxjs的时候，一直不明白发布订阅的意思，过于纠结于字面意思了。基础还是要扎实才行。

我觉得前端最好的学习路线

1.js(js高级进阶，代表入门了，重点看懂栈，堆的变量引用，变量提升的机制，值类型和引用类型)第一次最好看视频，我当初看完书没什么印象，看了一次视频课，再看的书才反应过来（原谅我把C语言的知识全忘光了，还好还记得一个指针）。

2.js的设计模式

    目前为止还是觉得设计模式主要是看懂对象的引用，值得传递，返回值得灵活调用。纠结了我半天的原型链原来就是返回自身。

    但是视频还是要看的，要不然不会想到jquery的点击事件是利用了观察者模式的方法。

3.jquery的源代码分析

     jquery 这么多年了，主要是有视频资源，看完这些，就可以看书了

 

下面记录一下主要的几种设计模式

       顺便提一下老师推荐Linux/Unix设计哲学，最近在看操作系统，先看完操作系统。

工厂模式

   工厂模式的定义：提供创建对象的接口，意思就是根据领导（调用者）的指示（参数），生产相应的产品（对象）

   简单工厂模式：使用一个类，通常为单体，来生成实例。

   复杂工厂模式定义是：将其成员对象的实列化推到子类中，子类可以重写父类接口方法以便创建的时候指定自己的对象类型。

  父类只对创建过程中的一般性问题进行处理，这些处理会被子类继承，子类之间是相互独立的，具体的业务逻辑会放在子类中进行编写。

简单的说就是根据产品的不同生成不同的实例

var XMLHttpFactory =function(){};　　　　　　//这是一个简单工厂模式
　　XMLHttpFactory.createXMLHttp =function(){
　　　 var XMLHttp = null;
　　　　if (window.XMLHttpRequest){
　　　　　　XMLHttp = new XMLHttpRequest()
　　　 }else if (window.ActiveXObject){
　　　　　　XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
　　　　}
　　return XMLHttp;
　　}
　　//XMLHttpFactory.createXMLHttp()这个方法根据当前环境的具体情况返回一个XHR对象。
　　var AjaxHander =function(){
　　　　var XMLHttp = XMLHttpFactory.createXMLHttp();
　　　　...
　　}

观察者模式

           定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。
其中有两个定义需要明确，被观察者和观察者。通常来说，这两者是一对多的，也有多对多的情景。
          在网页开发中，被观察者通常是数据源，不论是内存数据，还是持久化数据，又或者是接口返回的数据，都可以作为被观察者。它一旦改变，就去改变依赖于它的节点。
          观察者有很多可能，针对于网页开发，我们常常认为dom节点是观察者，一旦节点的监视的数据源发生变化，节点也执行更新方法

         下面是一个简单的自定义的发布方式。

 

// 发布类
class Subject {
    constructor(data) {
        this.obList = [];
        this.data = data;
    }
    add(ob) {
        if (arguments.length >= 1) {
            Array.from(arguments).forEach(item => this.obList.push(item));
        }
    }
    remove(ob) {
        let i = this.obList.findIndex(ele => ele === ob); 
        if (i >= 0) {
            this.obList.splice(i, 1);
        }
    }
    notify() {
        this.obList.forEach((item) => {
            item.update(this.data);
        })
    }
}
// 观察者类
class Observer {
    constructor(id) {
        this.id = id;
    }
    update(data) {
        console.log('observer ' + this.id + ': ' + data + ';');
    }
}
function test() {
    let sub = new Subject('test'); 
    let ob1 = new Observer(1); 
    let ob2 = new Observer(2); 
    let ob3 = new Observer(3);

    sub.add(ob1, ob2, ob3);

    sub.notify();

    sub.remove(ob2);

    sub.notify();
}

test();

    针对更一步的耦合https://www.cnblogs.com/liuyongjia/p/9415008.html

先记一下这两个模式，举一反三还真不容易，单纯针对以上两种都可以扩展很多知识点了。等我去研究一下源代码。