javascript设计模式-门面和享元

门面​

它的作用有两个,一个是简化类的接口,另一个是消除类与使用它的客户代码之间的耦合。比如基于GUI的操作系统就是计算机的数据和功能的一个门面,每次点击等操作实际上是在跟一个门面打交道,间接地执行一些幕后的命令。

如今的WEB应用程序开发要求必须尽量提高编程效率,要做到这一点最简单的是创建自己的工具集或使用第三方函数库。最简单的门面如下:

function a(x) {
  // do stuff here...
}
function b(y) {
  // do stuff here...
}
function ab(x, y) {
  a(x);
  b(y);
}

如果很多地方重复使用两个函数,那么建议此处用门面来设计。

享元​

这是一种优化性能代码的模式,最适合解决因创建大量类似对象而累及性能的问题。对于那些可能一连几天也不会重新加载的大型应用系统非常有用。它用于减少应用程序所需要数量,通过将对象内部划分为内在数据和外在数据两类来实现。

管理享元外在数据有许多方法:1、数据库;2、组合模式(利用对象自身的层次关系保存数据并达到共享的目的)。这种优化的一步步骤如下:

  • 将所有外在数据从目标类中剥离,尽可能多地删除此类的改改。
  • 创建一个用来控制此类的实例化的工厂类。这个工厂应该掌握该类所有创建出来的独一无二的实例。具体做法就是用一个对象字面量来保存每一个这类对象的引用。另一种做法是创建一个对象池。
  • 创建一个用来保存外在数据的管理器,负责控制处理外在数据的种种事宜。
var Tooltip = function() {
  this.delayTimeout = null;
  this.delay = 1500; // in milliseconds.

  // Create the HTML.
  this.element = document.createElement('div');
  document.getElementsByTagName('body')[0].appendChild(this.element);
};
Tooltip.prototype = {
  startDelay: function(e, text) {
  },
  show: function(x, y, text) {
  },
  hide: function() {
  }
};
var TooltipManager = (function() {
  var storedInstance = null;
  var Tooltip = function() {
  };
 Tooltip.prototype = {
  };
  return {
    addTooltip: function(targetElement, text) {
      var tt = this.getTooltip();
      addEvent(targetElement, 'mouseover', function(e) { tt.startDelay(e, text); });
      addEvent(targetElement, 'mouseout', function(e) { tt.hide(); });      
    },
    getTooltip: function() {
      if(storedInstance == null) {
        storedInstance = new Tooltip();
      }
      return storedInstance;
    }
  };
})();
TooltipManager.addTooltip($('link-id'), 'Lorem ipsum...');

你可能感兴趣的:(#,JavaScript设计模式,javascript,前端,开发语言,设计模式,ecmascript)