javascript模式——Facade

Facade模式为许多代码提供一个方便的接口，不现实代码实现的复杂性，这样，使用者只需要关心他的使用接口就可以使用。

 

下面来看一段Facade模式的运用，绑定事件在浏览器之间是不一样的，利用Facade模式，我们创建了一个绑定事件的函数addMyEvent,在其中，我们写了一些代码，我们判断了是否支持addEventListener,是怎么样，不是怎么样……但这些都不相关，对于其他开发者而言，他只需要，addMyEvent可以兼容浏览器绑定事件。

var addMyEvent = function( el,ev,fn ){
 
   if( el.addEventListener ){
            el.addEventListener( ev,fn, false );
      }else if(el.attachEvent){
            el.attachEvent( "on" + ev, fn );
      } else{
           el["on" + ev] = fn;
    }
 
};

 

jQuery大量使用了Facade模式，无论是选择元素，或是修改CSS

下面看一段jQuery内部bindReady的实现，和我们上面的例子有些相似，判断不同事件绑定的支持，经过一些代码操作实现兼容的功能函数.然而对于其他的使用者而言，我们只需要知道bindReady可以判断DOM加载完成，就可以使用，这个bindReady就是外观。

bindReady: function() {
    ...
    if ( document.addEventListener ) {
      // Use the handy event callback
      document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
 
      // A fallback to window.onload, that will always work
      window.addEventListener( "load", jQuery.ready, false );
 
    // If IE event model is used
    } else if ( document.attachEvent ) {
 
      document.attachEvent( "onreadystatechange", DOMContentLoaded );
 
      // A fallback to window.onload, that will always work
      window.attachEvent( "onload", jQuery.ready );
               ...