JS 提升 10

1 面向对象

1 核心概念 -- 类和对象
  1 对象是类的具体某一个
  2 对象带有属性和方法的集合, 是某一大类的一个具体的对象
  3 类是具体对象的抽象概念的集合
  4 类是一组相关属性和行为的集合, 可以看成某一类事物的模板, 是某些具体对象的抽象概括的集合
  5 场用到面向对象的场景: 模块化 / 封装插件
        
2 面向对象的特征
  1 封装 -- 
  2 继承 -- 
  3 多态 -- 
        
3 面向对象和面向过程的区别
-----------------------------------------------------------------------------------------
  1 面向对象 (思维)
    1 把事物分解为一个个对象, 分析每个对象所需属性和功能,  然后分工合作, 实现复杂的行为或功能
    2 封装不同的类来实例化很多不同的对象, 实现复杂的行为或功能
    3 优点: 便于维护开发, 灵活可复用等优点, 适合开发很大的项目
    
  2 面向过程 (理解)
    1 分析出解决问题的步骤 -- 然后使用函数一步一步实现这些步骤
    2 性能比面向对象好, 适合于跟硬件联系很紧密的情况
-----------------------------------------------------------------------------------------

4 创建对象的各种方式
-----------------------------------------------------------------------------------------
1 字面量创建: 
  const obj = {}

2 构造函数创建: 

3 工厂模式: 

4 原型模式: 

5 混合模式: 

6 ES6中class类: 
-----------------------------------------------------------------------------------------

5 面向过程 -> 过渡到面向对象 -> 的学习思路
-----------------------------------------------------------------------------------------
1 定义构造函数 (通常首字母大写)
2 把变量变成对象的属性
3 把函数变成对象的方法 (通常 -> 方法: 写在 prototype上; 属性写在构造器内部)
4 改错
5 构造函数实例化
-----------------------------------------------------------------------------------------

2 设计模式

1 工厂模式: 🌹
-----------------------------------------------------------------------------------------
1 一个简单的工厂函数: 

function factory(a,b,c) {
    var car = {}; //原料
    car.aa = a; //加工
    car.bb = b; //加工
    car.cc = c; //加工
    car.drive = function () {
        console.log('最高时速为：' + car.speed);
    }  //加工
    return car;  //出厂
}
var obj1 = function(1,2,3);
var obj2 = function(4,5,6);


2 工厂模式可用于创建多个不同类型的对象

var factory = (function (){   //立即执行函数
    var car = {   //该对象每个属性值都是一个构造函数
        carA: function (){
            this.type = '高配版';
            this.engine = 'v8引擎';
            this.speed = '最高时速320km/h';
        },
        carB: function (){
            this.type = '中配版';
            this.engine = 'v6引擎';
            this.speed = '最高时速220km/h'; 
        },
        carC: function (){
            this.type = '低配版';
            this.engine = 'v4引擎';
            this.speed = '最高时速180km/h';
        }
    }
    return function (config){        //直接返回一个函数, 然后调用的时候传参
        return new car[config]();     //字符串读取对象属性的方式
    }
})();   //这个位置立即执行函数决定了我们传参的位置, 也可以在括号传参改变构造函数的配置

var car1 = factory('carA');
var car2 = factory('carB');
console.log(car1.type);
console.log(car2.type);
-----------------------------------------------------------------------------------------


2 单例模式: 🌹
-----------------------------------------------------------------------------------------
作用: 让一个类只有一个实例对象

面试题
function Fun() {
    // 在函数中添加代码，使下面的运行结果成立
    if (Fun.instancehh) {
        return Fun.instancehh;
    }
    this.attr = 'hello world';
    return Fun.instancehh = this;
}   //缺点暴露了
var obj1 = new Fun();
var obj2 = new Fun();
console.log(obj1 === obj2);   //true
console.log(obj1.attr);   //'hello world'

闭包实现单例模式
var singleLogin = (function () {
    var instance;
    var CreateLogin = function () {
        if (instance) {
            return instance;
        }
        this.init();
        return instance = this;
    }
    CreateLogin.prototype.init = function () {
        var div = document.createElement('div');
        div.className = 'login';
        div.innerHTML = '登录窗口';
        document.body.appendChild(div);
    }
    return function () {
        return new CreateLogin();
    };
})();
console.log( singleLogin() === singleLogin() );

优化
var createLogin = function () { //创建对象
    var div = document.createElement('div');
    div.className = 'login';
    div.innerHTML = '登录窗口<span>X</span>';
    document.body.appendChild(div);
    return div;
}
var getSingle = function (fn) { //管理单例逻辑
    var result;
    return function () {
        // if (result) {
        //    return result;
        // }
        // return result = new fn();
        return result || ( result = new fn() );
    }
}
var singleLogin = getSingle(createLogin);
console.log( singleLogin() === singleLogin() ); //true
-----------------------------------------------------------------------------------------


3 代理模式: 🌹
-----------------------------------------------------------------------------------------
代理模式是为一个对象提供一个代理, 以便控制对它的访问
代理模式分成两个部分，一个部分是本体，即为你想要实现的功能；另一部分为代理，代理可以代替本体做一些处理。
代理模式是一种非常有意义的模式，在生活中可以找到很多代理模式的场景
-----------------------------------------------------------------------------------------


4 策略模式: 🌹
-----------------------------------------------------------------------------------------
策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
一个基于策略模式的程序至少由两部分组成：
第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程；
第二个部分是环境类Context，Context接受客户的请求，随后把请求委托给某个策略类。
'算法'：各种业务规则
-----------------------------------------------------------------------------------------

3 发布订阅模式

也叫观察者模式, 
场景:  定义对象间的一对多的依赖关系, 当一个对象的状态发生改变时, 所有依赖于它的对象都将得到通知
在JavaScript开发中, 我们一般用事件模型来替代传统的发布-订阅模式
最常用且最简单的发布-订阅模式：DOM事件
    document.body.addEventListener('click', function () {
        alert('消息');
    }, false);
    订阅document.body上的click事件，当body节点被点击时，body节点便会向订阅者发布这个消息

理解: 负责登录模块的情况, 就是一对多的关系, 因为由好多信息数据, 都是建立在登录的情况下的

    1 首先有一个缓存客户信息的列表 ---> 所有订阅了我消息的用户, 我们都缓存到了这个列表
    2 然后就是操作这个缓存列表 ---> 三个方法
        1 代码展示
            <button class="b1">订阅1</button>
            <button class="b2">订阅2</button>

            <button class="s1">发布1</button>
            <button class="s2">发布2</button>

            JavaScript
    //订阅者模式, 是一种处理一对多的关系
    function Observe() {
      this.cacheList = {};   //缓存列表--> 储存方式 {A: [F1, F2, F3], B: [F1, F2], ...}
    }

    Observe.prototype = {
      constructor: Observe,
      //发布 ---> 取出对应的消息类型, 执行所有回调函数传入发布的信息
      publish: function (type, message) {   //(消息类型, 消息)
        if (!this.cacheList[type]) {
          return;
        }
        this.cacheList[type].forEach(function (v, i) {
          v(message);
        });
      },
      //订阅  ---> 就是往某个消息类型中, 添加回调函数
      subscribe: function (type, callback) {   //(消息类型, 回调函数)
        if (!this.cacheList[type]) {   //判断对象是否有type属性
          this.cacheList[type] = [];   //如果没有就添加一个属性, 且值为 []
        }
        this.cacheList[type].push(callback);  //往对应的消息类型插入回调函数
      },
      //取消订阅 --->
      unsubscribe: function (type, callback) {
        if (!type) {    // ==直接调用, 没有传参
          this.cacheList = {};
        } else if (type && !callback) {  //删除某个消息类型的所有回调函数 (只传入type的情况)
          delete this.cacheList[type];
        } else {  //删除某个消息类型中的某个回调函数 (俩个参数都传入了)
          this.cacheList[type] = this.cacheList[type].filter(function (v, i) {
            return v !== callback;
          })
        }
      }
    }

    var b1 = document.querySelector('.b1');
    var b2 = document.querySelector('.b2');

    var s1 = document.querySelector('.s1');
    var s2 = document.querySelector('.s2');

    var ob1 = new Observe();

    b1.onclick = function() {
      console.log('你订阅了 A');
      ob1.subscribe('A', function(msg) {   //订阅了 A;  msg--收到的消息
        console.log('收到的消息: ' + msg);
      });
    }

    s1.onclick = function() {
      ob1.publish('A', '亲爱的客户, 您关注的户型A, 要开卖了');
    }

发布订阅流程:  创建一个函数 ---> 内部创建一个对象(缓存列表) ---> 操作该函数的 Fn.prototype = { 发布 -- 订阅 -- 取消订阅} (操作缓存列表)