再起航，我的学习笔记之JavaScript设计模式16(享元模式)

享元模式

享元模式(Flyweight)： 运用共享技术有效地支持大量的细粒度的对象，避免对象间拥有相同内容造成多余的开销。

上回我们在组合模式中创建了文章列表类，这次我们要向不同的文章列表类里都添加20条记录

首先我们创建一个文章列表类这里面有我们的类别和想要添加的标题名称

var ArticleModel=function(type,name){
	this.type=type;
	this.name=name;
}

这里我们简单处理，添加一个show方法好直接打印输出效果

Model.prototype.show=function(){
	console.log('类型：'+this.type+';名称：'+this.name);
}

接着我们用两个循环分别代表我们的图片文章列表和文字文章列表

for(var i=1;i<=20;i++){
	var ImageModel=new ArticleModel('Image','图片文章'+i);
	ImageModel.show();
}
for(var i=1;i<=20;i++){
	var TextModel=new ArticleModel('Text','文字文章'+i);
	TextModel.show();
}

我们来看看打印出来的效果

现在看还没什么，但是我们看接下来的两组对比,分别在IE和Chrome下进行测试，循环次数都是20000


直接运行的话或许还没什么，但是当我们打开控制台运行的时候，在Chrome中没什么，但是在IE下直接卡死了。

我们发现我们的代码在循环处具有相同的结构，只不过里面创建的内容不同，当我们执行多次循环时造成的多余开销在低版本的IE浏览器中会严重影响其性能，那么对于相同结构造成的多余开销问题，我们可以用享元模式来解决。

享元模式主要对我们代码的数据，方法进行共享分离，他将数据和方法分成内部数据、内部方法和外部数据、外部方法。内部方法与内部数据指的是相似或者共有的数据的方法，所以将这一部分提取出来减少开销，以提高性能。

我们对上面的代码进行下优化

var ArticleModel=function(type,name){
	this.type=type;
	this.name=name;
}

Model.prototype.show=function(){
	console.log('类型：'+this.type+';名称：'+this.name);
}
var ImageModel=new ArticleModel('Image',''),
TextModel=new ArticleModel('Text','');    
for (var i = 1; i <=20; i++){
   ImageModel.name = '图片文章' + i;
   ImageModel.show();
}
for (var i = 1; i <=20; i++){
   TextModel.name = '文字文章' + i;
   TextModel.show();
}

我们再来看看

我们发现，时间都相应的减少了。

总结

享元模式的应用目的是为了提高程序的执行效率与系统的性能。因此在大型系统开发中应用是比较广泛的，百分之一的效率的提升有时可以发生质的改变。它可以避免程序中的数据重复。有时系统内存在大量对象，会造成大量内存占用，所以应用享元模式来减少内存消耗是很有必要的。不过应用时一定要找准内部状态与外部状态，这样你才能更合理地提取分离。当然在我们的示例或小程序中，性能与内存的消耗对程序的执行影响不大时，比如这次示例中我们优化的时间就比较少，我们强行应用享元模式而引入复杂的代码逻辑，往往会收到负效应。
也谢谢大家看到这里：）如果你觉得我的分享还可以请点击推荐，分享给你的朋友让我们一起进步~

好了以上就是本次分享的全部内容，本次示例参考自JavaScript设计模式一书，让我们一点点积累一点点成长，希望对大家有所帮助。

欢迎转载，转载请注明作者，原文出处。