基于JS的设计模式01（kerwin老师笔记）

封装变化是核心，变化的部分灵活，不变的部分稳定，不是所有的问题都可以用到现有的设计模式。

1.构造器模式

// 有几个就需要创建几个，太麻烦了
        var employee1 ={
            name:'kerwin',
            age:100
        }
        var employee2 ={
            name:'tiechui',
            age:18
        }

// 构造一个函数，需要几个自己new
        function Employee(name,age){
            this.name = name
            this.age = age

            // 自身带的方法
            this.say = function(){
                console.log("Hello")
            }
        }
        var employee1 = new Employee("kerwin",100)
        employee1.say();

有点Java面向对象的感觉了，抽象构造出属性和方法，然后具体去实例化。

但构造器模式有缺点，每次new的时候都要重新申请内存，但是这些都是相似的东西，重复申请内存不太好。函数的原型是唯一的。

2.原型模式（对构造器的补充）

// 把方法放到原型上
        function Employee(name,age){
            this.name = name
            this.age = age
        }
        employee.prototype.say = function(){
                console.log("Hello")
            }

再用ES6中类的方法创建

 class Employee{
                constructor(name,age){
                    this.name = name
                    this.age = age
                }
                // 这个方法就直接挂到原型上
                say(){
                    console.log("Hello")
                }
            }
            var employee1 = new Employee("kerwin",100)

3.工厂模式

由一个工厂对象决定创建某一种产品对象类的示例，主要用来创建同一类对象。

// 权限系统，映射不同角色进来之后的页面
        function User(role,pages){
            this.role = role
            this.pages = pages
        }
        // 生产User的工厂
        function UserFatory(role){
            switch(role){
                case "superadmin":User
                  return new User("superadmin",["home","user-manage","right-manage","news-manage"])
                break;
                case "admin":User
                  return new User("admin",["home","user-manage","news-manage"])
                break;
                case "editor":User
                  return new User("editor",["home","news-manage"]) 
                break;
                default:
                    throw new Error("参数错误")
            }
        }
        // 这样做白占内存
        // new User("superadmin",["home","user-manage","right-manage","news-manage"])
        // new User("admin",["home","user-manage","news-manage"])
        // new User("editor",["home","news-manage"])   

用ES6改造一下 

 class User {
            constructor(role,pages){
            this.role = role
            this.pages = pages
            }
            // ES6的静态方法
            static UserFatory(role){
              switch(role){
                case "superadmin":User
                  return new User("superadmin",["home","user-manage","right-manage","news-manage"])
                break;
                case "admin":User
                  return new User("admin",["home","user-manage","news-manage"])
                break;
                case "editor":User
                  return new User("editor",["home","news-manage"]) 
                break;
                default:
                    throw new Error("参数错误")
            }
        }    
        } 
        var User = User.UserFatory('editor') 

简单工厂的优点，你只需要一个正确的参数，就可以获取你所需要的对象，但对象不能太多，不能太复杂，不然就难以维护了。

4.抽象工厂模式

抽象工厂模式并不直接生成实例，而是用于对产品类族的创建，继承衍生，覆盖重写基本的类。

        class superadmin extends User{
            constructor(name){
                super(name,"superadmin",["home","user-manage","right-manage","news-manage"])
            }
            dataShow(){
                // 方法重写
                console.log('superadmin-dataShow')
            }
            addRight(){

            }
            addUser(){

            }
        }
        class admin extends User{
            constructor(name){
                super(name,"admin",["home","user-manage","news-manage"])
            }
            dataShow(){
                // 方法重写
                console.log('admin-dataShow')
            }
        }

        function getAbstractUserFactory(role){
            // 返回你需要的类
            switch(role){
                case "SuperAdmin":
                    return superadmin
                    break;
                case "Admin":
                    return Admin
                    break;
                default:
                    throw new Error("参数错误")
            }
        } 

5.建造者模式

工厂模式要的是结果，建造者模式关注的是内部的每一个细节。

class Navbar{
            init(){
                console.log("navbar-init")
            }
            getData(){
                console.log("navbar-getdata")
            }
            render(){
                console.log("navbar-render")
            }
        }
        class lsit{
            init(){
                console.log("lsit-init")
            }
            getData(){
                console.log("lsit-getdata")
            }
            render(){
                console.log("lsit-render")
            }
        }
        // 在这里进行具体的逻辑处理
        class Creator{
            startBulid(builder){
                builder.init()
                builder.getData()
                builder.render()
            }
        }
        // 有问题的话我们只需要改这里
        // class Creator{
        //     async startBulid(builder){
        //         await builder.init()
        //         await builder.getData()
        //         await builder.render()
        //     }
        // }
        const op = new Creator()
        op.startBulid(new Navbar())
        op.startBulid(new lsit())

6.单例模式

保证一个类仅有一个实例，提供一个访问它的全局访问点，主要解决一个全局使用的类频繁的创建和销毁占用内存。长时间不动，对话框提醒重新登录

// 自执行函数，返回函数就是闭包了
        var Singeton = (function(){
            var instance
            function User(name,age){
                this.name = name
                this.age = age
            }
            return function(name,age){
                if(!instance){
                    // 创建实例
                    instance = new User(name,age)
                }
                return instance
            }
        })()
        // 重复执行多次，结果一致，永远是当时的那个，永远不会被垃圾回收
        
        // ES6写法
        class Singeton{
            constructor(name,age){
                if(!Singeton.instance){
                    this.name = name
                    this.age = age
                    Singeton.instance = this
                }
                return Singeton.instance
            }
        }
        // 只要页面不刷新永远是之前的那个

全局store的概念就是单例模式的应用；

7.装饰器模式

对已有功能进行扩展，减少对原业务的影响