你的浏览器不支持canvas

深入浅出:了解常见的设计模式(闭包、垃圾回收机制)

 导航:

1.闭包

2.垃圾回收机制

3.内存泄漏场景

4.设计模式分类

一、闭包:闭包就是能够读取其他函数内部变量的函数。

应用场景:设置私有变量和方法(为了防止变量命名间的污染,可以用闭包来包裹住,使得变量仅在当前局部作用于下发生作用,而不会与其他全局作用下的同名变量发生变量污染。)
不适合场景:返回闭包的函数是个非常大的函数
闭包的特性:
1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收

       作用:(1).可以将局部作用域ii的局部变量,返回给全局,让全局可以访问到这个变量。

function f1() {
n = 999;
function f2() {
alert(n);//将父级函数的变量返回给全局的其他函数。
//子函数可以改变父函数的变量
}
return f2;
}
var result = f1();
result(); // 999

                   (2).可以再循环中保留i值。推荐个网址:https://www.cnblogs.com/shipskunkun/p/5695784.html

for(vari=0;i<aLi.length;i++){
(function(i){
//预处理事件
aLi[i].onclick = function(){
alert(i)
}
})(i)
} 

           缺点:(1).消耗性能:因为闭包它不会自动被销毁会在内存中一直占用,所以会非常耗费性能。

    (2). 同时在IE浏览器下可能会造成内存溢出 当不用闭包的时候要将其摧毁,解决方法是,在退出函数之前,将不使用的局部变量全部删除。这就用到了垃圾回收机制了。


二、垃圾回收机制:

 

当一个函数运行完毕以后,如果内部的变量或者方法没有在外部(全局)进行调用的话,这个函数就会被立即销毁 下次在调用的时候里面所有的变量都会进行重置 如果当前函数的变量或者方法在全局进行了调用的话,那么这个函数不会被销毁而是一直在内存中存在 

例:

function fn() {
var a = 10;
return function () {
return a;
}
}
var b = fn()
var c = b();
console.log(c);//10
b = function () {
return a;
}

 

JS中最常见的垃圾回收方式是标记清除。

 

工作原理:是当变量进入环境时,将这个变量标记为“进入环境”。当变量离开环境时,则将其标记为“离开环境”。标记“离开环境”的就回收内存。

 

工作流程:

 

1. 垃圾回收器,在运行的时候会给存储在内存中的所有变量都加上标记。

 

2. 去掉环境中的变量以及被环境中的变量引用的变量的标记。

 

3. 再被加上标记的会被视为准备删除的变量。

 

4. 垃圾回收器完成内存清除工作,销毁那些带标记的值并回收他们所占用的内存空间。

 

引用计数 方式

 

工作原理:跟踪记录每个值被引用的次数。

 

工作流程:

 

1. 声明了一个变量并将一个引用类型的值赋值给这个变量,这个引用类型值的引用次数就是1。

 

2. 同一个值又被赋值给另一个变量,这个引用类型值的引用次数加1.

 

3. 当包含这个引用类型值的变量又被赋值成另一个值了,那么这个引用类型值的引用次数减1.

 

4. 当引用次数变成0时,说明没办法访问这个值了。

 

5. 当垃圾收集器下一次运行时,它就会释放引用次数是0的值所占的内存。

 

但是循环引用的时候就会释放不掉内存。循环引用就是对象A中包含另一个指向对象B的指针,B中也包含一个指向A的引用。

 

因为IE中的BOM、DOM的实现使用了COM,而COM对象使用的垃圾收集机制是引用计数策略。所以会存在循环引用的问题。

 

解决:手工断开js对象和DOM之间的链接。赋值为null。IE9把DOM和BOM转换成真正的JS对象了,所以避免了这个问题。

 

 三、什么情况会引起内存泄漏?

 

虽然有垃圾回收机制但是我们编写代码操作不当还是会造成内存泄漏。

1. 意外的全局变量引起的内存泄漏。

原因:全局变量,不会被回收。

解决:使用严格模式避免。

2. 闭包引起的内存泄漏

原因:闭包可以维持函数内局部变量,使其得不到释放。

解决:将事件处理函数定义在外部,解除闭包,或者在定义事件处理函数的外部函数中,删除对dom的引用。

3. 没有清理的DOM元素引用

原因:虽然别的地方删除了,但是对象中还存在对dom的引用

解决:手动删除。

4. 被遗忘的定时器或者回调

原因:定时器中有dom的引用,即使dom删除了,但是定时器还在,所以内存中还是有这个dom。

解决:手动删除定时器和dom。

5. 子元素存在引用引起的内存泄漏

原因:div中的ul li 得到这个div,会间接引用某个得到的li,那么此时因为div间接引用li,即使li被清空,也还是在内存中,并且只要li不被删除,他的父元素都不会被删除。

解决:手动删除清空。

 

 

四、设计模式主要分三个类型:创建型、结构型和行为型。
 
其中创建型有:
 
一、Singleton,单例模式:保证一个类只有一个实例,并提供一个访问它的全局访问点
 
二、Abstract Factory,抽象工厂:提供一个创建一系列相关或相互依赖对象的接口,而无须指定它们的具体类。
 
三、Factory Method,工厂方法:定义一个用于创建对象的接口,让子类决定实例化哪一个类,Factory Method使一个类的实例化延迟到了子类。
 
四、Builder,建造模式:将一个复杂对象的构建与他的表示相分离,使得同样的构建过程可以创建不同的表示。
 
五、Prototype,原型模式:用原型实例指定创建对象的种类,并且通过拷贝这些原型来创建新的对象。
 
行为型有:
 
六、Iterator,迭代器模式:提供一个方法顺序访问一个聚合对象的各个元素,而又不需要暴露该对象的内部表示。
 
七、Observer,观察者模式:定义对象间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知自动更新。
 
八、Template Method,模板方法:定义一个操作中的算法的骨架,而将一些步骤延迟到子类中,TemplateMethod使得子类可以不改变一个算法的结构即可以重定义该算法得某些特定步骤。     九、Command,命令模式:将一个请求封装为一个对象,从而使你可以用不同的请求对客户进行参数化,对请求排队和记录请求日志,以及支持可撤销的操作。     十、State,状态模式:允许对象在其内部状态改变时改变他的行为。对象看起来似乎改变了他的类。
 
十一、Strategy,策略模式:定义一系列的算法,把他们一个个封装起来,并使他们可以互相替换,本模式使得算法可以独立于使用它们的客户。
 
十二、China of Responsibility,职责链模式:使多个对象都有机会处理请求,从而避免请求的送发者和接收者之间的耦合关系
 
十三、Mediator,中介者模式:用一个中介对象封装一些列的对象交互。
 
十四、Visitor,访问者模式:表示一个作用于某对象结构中的各元素的操作,它使你可以在不改变各元素类的前提下定义作用于这个元素的新操作。
 
十五、Interpreter,解释器模式:给定一个语言,定义他的文法的一个表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。
 
十六、Memento,备忘录模式:在不破坏对象的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态。
 
结构型有:
 
十七、Composite,组合模式:将对象组合成树形结构以表示部分整体的关系,Composite使得用户对单个对象和组合对象的使用具有一致性。
 
十八、Facade,外观模式:为子系统中的一组接口提供一致的界面,fa?ade提供了一高层接口,这个接口使得子系统更容易使用。
 
十九、Proxy,代理模式:为其他对象提供一种代理以控制对这个对象的访问
 
二十、Adapter,适配器模式:将一类的接口转换成客户希望的另外一个接口,Adapter模式使得原本由于接口不兼容而不能一起工作那些类可以一起工作。
 
二十一、Decrator,装饰模式:动态地给一个对象增加一些额外的职责,就增加的功能来说,Decorator模式相比生成子类更加灵活。
 
二十二、Bridge,桥模式:将抽象部分与它的实现部分相分离,使他们可以独立的变化。
 
二十三、Flyweight,享元模式

 

posted @ 2018-08-30 19:27  云上丶无忧  阅读(988)  评论(0编辑  收藏  举报

来场流星雨,吧