享元是意译，英文为 flyWeigth。fly 苍蝇 weight 重量 = 轻量

享元可以理解为通用的属性和元方法，即通过共享属性的方式来达到减少创建对象的目的。从而提升性能优化。

例子

  1. // 100 套衣服，男女各 50 套衣服 进行拍照
  2. var Modal = function(sex, clothes) {
  3.     this.sex = sex;
  4.   this.clothes = clothes;
  5. }
  7. Modal.prototype.takePhoto = function() {
  8.     console.log("sex =" + this.sex + "衣服：" + this.clothes);
  9. }
  11. for (var i = 0; i < 50; i++) {
  12.     var modal = new Modal("male", "clothes" + i); // 实现了 50 个男模特
  13.   modal.takePhoto();
  14. }
  16. for (var j = 0; j < 50; j++) {
  17.     var modal = new Modal("female", "clothes" + j); // 实现了 50 个女模特
  18.   modal.takePhoto();
  19. }
  21. // --------------------------------------------------------------
  22. var Modal = function(sex) {
  23.     this.sex = sex;
  24. }
  26. Modal.prototype.takePhoto = function() {
  27.     console.log("sex =" + this.sex + "衣服：" + this.clothes);
  28. }
  30. var maleModal = new Modal("male");
  31. var femaleModal = new Modal("female");
  33. for (var i = 0; i < 50; i++) {
  34.     maleModel.clothes = i; // 问题在于这种赋值相当隐晦，表意不明显。
  35.                                                // 以为是普通对象，实则是实例对象
  36.                                                // 动态增加外部状态
  37.   maleModel.takePhoto();
  38. }
  40. for (var j = 0; j < 50; j++) {
  41.     femaleModel.clothes = j;
  42.   femaleModel.takePhoto();
  43. }

享元模式

解决上面的两个问题，使其有控制。

  1. var Modal = function(sex) {
  2.     this.sex = sex;
  3. }
  5. Modal.prototype.takePhoto = function() {
  6.     console.log("sex =" + this.sex + "衣服" + this.clothes);
  7. }
  9. var modeFactory = (function() {
  10.     var modalGender = {};
  11.   // 单例模式，保证一个性别只有一个实例对象
  12.   return {
  13.       createModel: function(sex) {
  14.         if(modalGender[sex]) {
  15.           return modalGender[sex];
  16.       }
  18.       return (modalGender[sex] = new Modal(sex));
  19.     }
  20.   };
  21. })();
  23. // 状态管理器
  24. var ModalManager = (function() {
  25.     const modalObj = {};
  26.   return {
  27.       add: function(sex, i) {
  28.         modalObj[i] = {
  29.           clothes: "衣服:" + i
  30.       };
  31.     },
  32.     setExternalState: function(modal, i){
  33.         modal.clothes = modalObj[i].clothes;
  34.     }
  35.   };  
  36. })();
  38. for (var i = 0; i < 50; i++) {
  39.     var maleModal = ModalManager.add("male", i);
  40.   ModalManager.setExternalSate(maleModal, i);
  41.   maleModal.takePhoto();
  42. }
  44. for (var i = 0; i < 50; i++) {
  45.     var femaleModal = ModalManager.add("female", i);
  46.   ModalManager.setExternalSate(femaleModal, i);
  47.   femaleModal.takePhoto();
  48. }