文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画
❥❥❥❥点个赞，让我知道你来过~❥❥❥❥
0 / 单例设计模式
假设：你需要录入两个人的信息：李雷和韩梅梅。<i>不要问我他们是谁</i>
<i>我本来想举个例子，叫"妈妈喊你去相亲"。后来一想，换个例子吧，被妈妈说也就算了，看个代码还要被扎心，太可怜了吧</i>
在最开始学代码时候，我可能会这样写▽
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:'女'
};
<i>△ 这样把信息分组归类了</i>
person1和person2是一个对象，也叫命名空间，可以减少全局变量的污染。
以上的person1和person2也是单例设计模式（singleton pattern），即：只有一个实例的对象。
在JS中，以对象字面量的方式和构造函数模式是可以创建单例对象的。
单例设计模式：把描述事务的信息放到一个命名空间中进行归类，防止全局变量污染
高级单例模式：你在开发中也经常用，比如：公共模块都写在utils里面、页面模块单独写在一个JS文件里面
let utils = (function (){
function deepCopy(){
//.....CODE
}
function addHandler(){
//....CODE
}
//...CODE
return {
deepCopy,
addHandler
};
})();
<i>△ 高级单例模式</i>
高级单例模式使用闭包的保护机制，让里面的代码不受外界的干扰。
函数执行会形成一个全新的私有作用域，保护里面的代码不受到外界的干扰，这种保护机制就是闭包。闭包有两个作用：保护和保存。<i>传送门：图解 | 理解闭包</i>
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, '女');
//....余下的人信息
<i>△ 在单例的基础上可以批量产出属性，录入信息了</i>
person就是个函数，函数的意义在于什么？封装
工厂模式：用函数来封装以特定的方式来创建对象的细节。
（1）低耦合：可以减少一个个创建对象这些冗余的代码
（2）高内聚：提高代码的重复使用率
2 / 面向对象
<i>【PS:这个概念很大，以我目前的知识储备和文字表达能力可能说的不是很清楚的，请见谅~】</i>
面向对象编程（Object Oriented Programming）
<i>还记得第一次面试，面试官问：什么是对象？答：万物皆对象【PS：那时候真勇敢呀】</i>
公号：朝霞的光影笔记
<i>△ 20.1_自然中的分类【PS：请原谅我的生物知识都还给老师了~~】</i>
"万物皆对象"中的"对象"本身只是一个泛指，任何事物都是一个对象，都可以是我们研究和面对的。
把抽象的“对象”，按照特点来进行分类（大类/小类）后，把共同的东西抽取出来，放到对应的类别中。即：“类”是对“对象”一种细分和公共部分的封装。
通过类别派生出来的具体事务叫做：类的“实例”
实例既有属于自己私有的东西，也会继承各个类别中的公有信息
*面向对象编程*****需要掌握“对象”“类”“实例”之间的关系
ID:zhaoxiajingjing
<i>△ 20.2_画个草图</i>
比如，之前写的一个选项卡：
<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
<i>△ 20.3_查看元素</i>
公号：朝霞的光影笔记
<i>△ 20.4 研究一个实例</i>
研究一个实例：
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
网友评论