JavaScript的设计模式

JavaScript中的设计模式：
代码书写经验，为了应对各种场景，经过前人不断的总结，压缩，形成的一套又一套的代码的书写规范，形成了设计模式。是针对特定问题，提出见解而有效的处理方案。

设计模式的种类有很多例如：
工厂模式，单例模式，组合模式，观察者模式，MV*模式，策略模式，代理模式，外观模式，亨元模式，模块化模式，中介者模式，装饰模式，适配器模式等等…

接下来简单的介绍两种设计模式

一.单例模式
单例：单个实例
如果需要多次创建同一个对象，完成同一件事情，肯定会多次new，产生多个对象，但是没必要。修改成，多次执行，只有一个对象。

1.修改系统默认使用

function Fn(){
        // 主动返回对象了么？
        // this.name = "hahaha";

        // 将来准备给Fn的身上添加一个属性，这个属性为对象，但是又不能每次都添加
        // 判断，如果是第一次，意味着之前没有添加过，默认是undefined，如果不是第一次，意味添加过，那么就是对象
        if(!Fn.obj){
            Fn.obj = {};
        }

        Fn.obj.sayHello = "hello";
        
        return Fn.obj;
    }

    var f1 = new Fn();
    var f2 = new Fn();

    console.log(f1);
    console.log(f2);

    // console.log(f1 === f2);     // t

为什么默认情况下，每次new会得到新对象呢？

new的原理：
    1.创建了新对象
    2.改变了this指向
    3.修改了原型的指向
    4.检查当前函数是否主动返回对象，如果没有，则返回第一步创建的新对象

2.封装一个单例模式的调用方式

var f = (function(){
    var instance;       // 等同于第一种写法中的Fn.obj
    return function(){
        if(!instance){
            instance = new Person();
        }
        return instance;
    }
})();
var p1 = f();
var p2 = f();
console.log(p1);
console.log(p2);
console.log(p1 === p2);

二、MVC模式
MVC模式：
M：model数据
V：view视图
C：ctrl控制器

// 创建模型，管理多个数据
class Model{
    model1(){
        return "hello";
    }
    model2(){
        return "world";
    }
    model3(){
        return "你好";
    }
}

// 创建视图，管理多种渲染方式
class View{
    view1(data){
        console.log(data);
    }
    view2(data){
        document.write(data);
    }
    view3(data){
        alert(data);
    }
}

// 创建控制器，设定对应的指令
class Ctrl{
    constructor(){
        // 初始化模型和视图
        this.m = new Model();
        this.v = new View();
    }
    // 在指令中，可以读取对应的数据，放在对应的视图中
    ctrl1(){
        var data = this.m.model1();
        this.v.view1(data);
    }
    ctrl2(){
        var data = this.m.model2();
        this.v.view3(data);
    }
}

var c = new Ctrl();
c.ctrl1();
c.ctrl2();