OOP | 单例设计模式和工厂设计模式

Pink
文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画
❥❥❥❥点个赞,让我知道你来过~❥❥❥❥

0 / 单例设计模式

假设:你需要录入两个人的信息:李雷和韩梅梅。不要问我他们是谁

我本来想举个例子,叫"妈妈喊你去相亲"。后来一想,换个例子吧,被妈妈说也就算了,看个代码还要被扎心,太可怜了吧

在最开始学代码时候,我可能会这样写▽

let name = '李雷';
let age = 26;
let sex = '男';
let name = '韩梅梅';
let age = 28;
let sex = '女';

but,如果要把这两段代码放在一个js文件里,肯定会冲突啊怎么办?分个组吧:

let person1 = {
    name:'李雷',
    age:26,
    sex:'男'
};
let person2 = {
    name:'韩梅梅',
    age:28,
    sex:'女'
};

△ 这样把信息分组归类了

person1person2是一个对象,也叫命名空间,可以减少全局变量的污染。

以上的person1person2也是单例设计模式(singleton pattern),即:只有一个实例的对象

在JS中,以对象字面量的方式和构造函数模式是可以创建单例对象的。

单例设计模式:把描述事务的信息放到一个命名空间中进行归类,防止全局变量污染

高级单例模式:你在开发中也经常用,比如:公共模块都写在utils里面、页面模块单独写在一个JS文件里面

let utils = (function (){
    function deepCopy(){
        //.....CODE
    }
    function addHandler(){
        //....CODE
    }
    
    //...CODE
    
    return {
        deepCopy,
        addHandler
    };
})();

△ 高级单例模式

高级单例模式使用闭包的保护机制,让里面的代码不受外界的干扰。

函数执行会形成一个全新的私有作用域,保护里面的代码不受到外界的干扰,这种保护机制就是闭包。闭包有两个作用:保护和保存。传送门:图解 | 理解闭包

1 / 工厂模式

写一两个人的信息好弄,如果班里有30个人,这样一个个写得累蒙圈了,而且会产生大量的重复代码。

于是,可以造一个工厂出来,批量可以把属性都造出来:

function person(name, age, sex){
    let person = {};
    
    person.name = name;
    person.age = age;
    person.sex = sex;
    
    return person;
}

let p1 = person('李雷', 26, '男');
let p2 = person('韩梅梅', 28, '女');
let p3 = person('莉莉', 26, '女');
//....余下的人信息

△ 在单例的基础上可以批量产出属性,录入信息了

person就是个函数,函数的意义在于什么?封装

工厂模式:用函数来封装以特定的方式来创建对象的细节。

(1)低耦合:可以减少一个个创建对象这些冗余的代码

(2)高内聚:提高代码的重复使用率

2 / 面向对象

【PS:这个概念很大,以我目前的知识储备和文字表达能力可能说的不是很清楚的,请见谅~】

面向对象编程(Object Oriented Programming)

还记得第一次面试,面试官问:什么是对象?答:万物皆对象~【PS:那时候真勇敢呀~】

公号:朝霞的光影笔记

△ 20.1_自然中的分类【PS:请原谅我的生物知识都还给老师了~~】

"万物皆对象"中的"对象"本身只是一个泛指,任何事物都是一个对象,都可以是我们研究和面对的。

把抽象的“对象”,按照特点来进行分类(大类/小类)后,把共同的东西抽取出来,放到对应的类别中。即:“类”是对“对象”一种细分和公共部分的封装。

通过类别派生出来的具体事务叫做:类的“实例”

实例既有属于自己私有的东西,也会继承各个类别中的公有信息

面向对象编程需要掌握“对象”“类”“实例”之间的关系

ID:zhaoxiajingjing
△ 20.2_画个草图

比如,之前写的一个选项卡:

    <div id="tabBox" class="tabBox">
        <ul id="navBox" class="navBox">
            <li class="active">代码</li>
            <li>看书</li>
            <li>运动</li>
        </ul>
        <div class="active">
            读读代码
            <p>公号:朝霞的光影笔记</p>
            <p>ID:zhaoxiajingjing</p>
        </div>
        <div>
            书中自有颜如玉
            <p>公号:朝霞的光影笔记</p>
            <p>ID:zhaoxiajingjing</p>
        </div>
        <div>
            瘦子生活模式,好好吃饭,好好生活
            <p>公号:朝霞的光影笔记</p>
            <p>ID:zhaoxiajingjing</p>
        </div>
    </div>

ID:zhaoxiajingjing
△ 20.3_查看元素
公号:朝霞的光影笔记

△ 20.4 研究一个实例

研究一个实例:

1、私有的信息

2、所属类公有的信息

3、一层层从小类别一直找到Object为止,研究属性和方法

dir(tabBox)
|=>__proto__:HTMLDivElement.prototype
|=>__proto__:HTMLElement.prototype
|=>__proto__:Element.prototype
|=>__proto__:Node.prototype
|=>__proto__:EventTarget.prototype
|=>__proto__:Object.prototype

3 / 预告

请问:原型和原型链是啥?
ID:zhaoxiajingjing

阅读 421

朝霞的光影笔记
公号首发:朝霞的光影笔记 ID:zhaoxiajingjing →→→→ 多学一点知识,就少写一行代码

没有什么是20遍解决不了的,如果有~那就再写20遍

255 声望
13 粉丝
0 条评论
你知道吗?

没有什么是20遍解决不了的,如果有~那就再写20遍

255 声望
13 粉丝
宣传栏