一、定义
享元（flyweight）模式是一种用于性能优化的模式，核心是运用共享技术来有效支持大量细刻度的对象。
在JavaScript中，浏览器特别是移动端的浏览器分配的内存并不算多，如何节省内存就成了一个非常有意义的事情。
享元模式是一种用时间换空间的优化模式
- 内衣工厂有100种男士内衣、100中女士内衣，要求给每种内衣拍照。如果不使用享元模式则需要200个塑料模特；使用享元模式，只需要男女各1个模特。
二、什么场景下使用享元模式？
（1）程序中使用大量的相似对象，造成很大的内存开销
（2）对象的大多数状态都可以变为外部状态，剥离外部状态之后，可以用相对较少的共享对象取代大量对象
三、如何应用享元模式？
第一种是应用在数据层上，主要是应用在内存里大量相似的对象上；
第二种是应用在DOM层上，享元可以用在中央事件管理器上用来避免给父容器里的每个子元素都附加事件句柄。
享元模式要求将对象的属性分为内部状态和外部状态。
内部状态独立于具体的场景，通常不会改变，可以被一些对象共享；
外部状态取决于具体的场景，并根据场景而变化，外部状态不能被共享。
享元模式中常出现工厂模式，Flyweight的内部状态是用来共享的，Flyweight factory负责维护一个Flyweight pool(模式池)来存放内部状态的对象。
缺点：对象数量少的情况，可能会增大系统的开销，实现的复杂度较大！
四、示例：文件上传
var Upload = function(uploadType) {
this.uploadType = uploadType;
}
/* 删除文件（内部状态） */
Upload.prototype.delFile = function(id) {
uploadManger.setExternalState(id, this); // 把当前id对应的外部状态都组装到共享对象中
// 大于3000k提示
if(this.fileSize < 3000) {
return this.dom.parentNode.removeChild(this.dom);
}
if(window.confirm("确定要删除文件吗？" + this.fileName)) {
return this.dom.parentNode.removeChild(this.dom);
}
}
/** 工厂对象实例化
* 如果某种内部状态的共享对象已经被创建过，那么直接返回这个对象
* 否则，创建一个新的对象
*/
var UploadFactory = (function() {
var createdFlyWeightObjs = {};
return {
create: function(uploadType) {
if(createdFlyWeightObjs[uploadType]) {
return createdFlyWeightObjs[uploadType];
}
return createdFlyWeightObjs[uploadType] = new Upload(uploadType);
}
};
})();
/* 管理器封装外部状态 */
var uploadManger = (function() {
var uploadDatabase = {};
return {
add: function(id, uploadType, fileName, fileSize) {
var flyWeightObj = UploadFactory.create(uploadType);
var dom = document.createElement('div');
dom.innerHTML = "<span>文件名称：" + fileName + "，文件大小：" + fileSize +"</span>"
+ "<button class='delFile'>删除</button>";
dom.querySelector(".delFile").onclick = function() {
flyWeightObj.delFile(id);
};
document.body.appendChild(dom);
uploadDatabase[id] = {
fileName: fileName,
fileSize: fileSize,
dom: dom
};
return flyWeightObj;
},
setExternalState: function(id, flyWeightObj) {
var uploadData = uploadDatabase[id];
for(var i in uploadData) {
// 直接改变形参（新思路！！）
flyWeightObj[i] = uploadData[i];
}
}
};
})();
/*触发上传动作*/
var id = 0;
window.startUpload = function(uploadType, files) {
for(var i=0,file; file = files[i++];) {
var uploadObj = uploadManger.add(++id, uploadType, file.fileName, file.fileSize);
}
};
/* 测试 */
startUpload("plugin", [
{
fileName: '1.txt',
fileSize: 1000
},{
fileName: '2.txt',
fileSize: 3000
},{
fileName: '3.txt',
fileSize: 5000
}
]);
startUpload("flash", [
{
fileName: '4.txt',
fileSize: 1000
},{
fileName: '5.txt',
fileSize: 3000
},{
fileName: '6.txt',
fileSize: 5000
}
]);
五、补充
（1）直接改变形参Demo
function f1() {
var obj = {a: 1};
f2(obj);
console.log(obj); // {a: 1, b: 2}
}
function f2(obj) {
obj.b = 2;
}
f1();
（2）对象池，也是一种性能优化方案，其跟享元模式有一些相似之处，但没有分离内部状态和外部状态的过程。
var objectPoolFactory = function(createObjFn) {
var objectPool = [];
return {
create: function() {
var obj = objectPool.lenght === 0 ? createObjFn.apply(this, arguments) : objectPool.shift();
return obj;
},
recover: function() {
objectPool.push(obj);
}
};
}
希望本文所述对大家学习javascript程序设计有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。