写在前面:
一些关于本身在代码设想头脑方面的进修纪录

面向对象的一些明白

实例代码就不上了, 就写一些总结

封装: 供应属性和要领的权限治理, 只对外暴露接口, 细致的功用在内部完成
继续: 子类继续父类的要领和属性, 能够抽离大众代码,削减代码冗余
多态: 统一个接口在子类中的差别的完成, 能够对父类中要领举行扩大

ES6中类的设想剖析

磨炼本身的笼统设想能力, 经由历程UML类图来展现类之间的关联

• 平常步骤

  梳理各给类之间的关联关联:

  抽离父类, 笼统子类, 剖析关联类(互相援用的关联)
  

  要明白以下几点:
  // 每一个自力的对象都能够笼统为一个类
  // 每一个类都 要干本身该干的事(要领), 都有本身的特征(属性)
  // 关联类: 一个类 须要用到 另一个类中的东西; 或者说一个类 它能够作为另一个类的属性来用

简朴工场形式

我们不须要体贴营业的细致完成历程, 末了只须要给你一个模子,你输入参数就能够套用了;下面都是连系实例来展现我的明白

// 举个栗子
// 食物实例天生的细致历程
class Food {
    constructor(name, type) {
        this.name = name // 食物
        this.type = type // 食物范例
    }

    desc() {
        console.log(`我是${this.name},属于${this.type}范例`);
    }
    
}

class FoodFactory {
    // ES6中静态要领不会被实例挪用,能够被类挪用
    static create(name, type) {
        // 建立一种食物实例
        return new Food(name, type)
    }
}

// 工场最先临盆食物实例了
FoodFactory.create('核桃', '坚果').desc() // 我是核桃, 属于坚果范例
FoodFactory.create('旺仔', '饮品').desc() // 我是旺仔, 属于饮品范例
// 如许我们就能够 天生出我们想要的食物, 只需你给我们 一个称号和范例

单例形式

就是保证全局只要一个对象能够接见; 像全局缓存、全局状况治理时,都能够运用, 完成数据同享

我们要确保一个类 只能初始化 一个实例, 有就直接返回, 没有就初始化

如购物车, 登录框只要一个, jQuery的 $, vuex的store都是单例形式的头脑

class Singleton {
    // js模仿
    constructor() {}

    login() {
        console.log('login...');
    }
}

// 给类挂载一个静态要领, 只要一个
// 自实行函数: 只是为了将变量保留在 函数的作用域中, 防止污染罢了
Singleton.singleInstance = (function () {
            // 经由历程闭包完成: 相似经由历程一个全局变量来存储这个实例
            let instance;  // 保留建立好的实例
            return function() {
                if (!instance) {
                    // 假如没有建立, 就建立一个
                    instance = new Singleton()
                }
                return instance
            }
        })()
// 经由历程挪用静态要领来建立单实例
let single11 = Singleton.singleInstance()
let single22 = Singleton.singleInstance()
// 经由历程挪用类 初始化的实例
let single3333 = new Singleton()
single11.login();
single22.login();
console.log(single11 === single22);  // ture
console.log(single11 === single3333); // false

demo演示, 页面登录框

class LoginForm {

    constructor() {
        this.state = 'hide' // 初始状况
    }

    // 显现
    show() {
        if (this.state === 'show') {
            console.log('登录框已显现');
            return ;
        }
        this.state = 'show';
        console.log('登录框显现了, 请输入');
    }
    // 隐蔽
    hide() {
        if (this.state === 'hide') {
            console.log('登录框已隐蔽');
            return ;
        }
        this.state = 'hide';
        console.log('登录框隐蔽');
    }
}

// 增加单例要领
// 经由历程这个要领, 我初始化出来的 都是指向统一个实例对象
LoginForm.initSingle = (function () {
    let instance; // 存储实例对象
    return function () {
        if (!instance) {
            instance = new LoginForm()
        }
        return instance
    }
})()

// 当同时对一个实例举行操纵时:

// 页面1的上岸操纵
let login1 = LoginForm.initSingle()
login1.show()

// 页面2的上岸操纵
let login2 = LoginForm.initSingle()
login2.show() // 上岸框已显现, 页面2也是对统一实例举行接见,就会弹出毛病
login2.hide()

// 单例形式 就是实例化出来的对象 都指向统一实例, 对统一实例举行操纵, 
// 完成了 数据同享