JavaScript 外观模式

外观模式

正如我们早前在书中提过的, 没面模式为一个庞大的（可能更复杂的）代码结构提供了一个更简单的抽象接口。

门面在jQuery库中能够经常见到，它们为开发者处理DOM节点，动画或者令人特别感兴趣的跨域Ajax提供了简单的实现入口。

下面的代码是jQuery $.ajax()方法的门面:

$.get( url, data, callback, dataType );
$.post( url, data, callback, dataType );
$.getJSON( url, data, callback );
$.getScript( url, callback ); 

这些方法背后真正执行的代码是这样的：

// $.get()
$.ajax({
  url: url,
  data: data,
  dataType: dataType
}).done( callback );

// $.post
$.ajax({
  type: "POST",
  url: url,
  data: data,
  dataType: dataType
}).done( callback );

// $.getJSON()
$.ajax({
  url: url,
  dataType: "json",
  data: data,
}).done( callback );

// $.getScript()
$.ajax({
  url: url,
  dataType: "script",
}).done( callback );

更有趣的是，上面代码中的门面实际上是它们自身具有的能力，它们隐藏了代码背后很多复杂的操作。

这是因为jQuery.ajax()在jQuery核心代码中的实现是一段不平凡的代码，至少是这样的。至少它规范了XHR（XMLHttpRequest）之间的差异而且让我们能够简单的执行常见的HTTP动作（比如：get、post等），以及处理延迟等等。

由于显示与上面所讲的门面相关的代码将会占据整个章节，这里仅仅给出了jQuery核心代码中规划化XHR的代码:

// Functions to create xhrs
function createStandardXHR() {
  try {
    return new window.XMLHttpRequest();
  } catch( e ) {}
}

function createActiveXHR() {
  try {
    return new window.ActiveXObject( "Microsoft.XMLHTTP" );
  } catch( e ) {}
}

// Create the request object
jQuery.ajaxSettings.xhr = window.ActiveXObject ?
  /* Microsoft failed to properly
   * implement the XMLHttpRequest in IE7 (can't request local files),
   * so we use the ActiveXObject when it is available
   * Additionally XMLHttpRequest can be disabled in IE7/IE8 so
   * we need a fallback.
   */
  function() {
    return !this.isLocal && createStandardXHR() || createActiveXHR();
  } :
  // For all other browsers, use the standard XMLHttpRequest object
  createStandardXHR;
  ...

下面的代码也处于实际的jQuery XHR（jqXHR）实现的上层，它是我们实际上经常打交道的方便的门面:

// Request the remote document
   jQuery.ajax({
     url: url,
     type: type,
     dataType: "html",
     data: params,
     // Complete callback (responseText is used internally)
     complete: function( jqXHR, status, responseText ) {
       // Store the response as specified by the jqXHR object
       responseText = jqXHR.responseText;
       // If successful, inject the HTML into all the matched elements
       if ( jqXHR.isResolved() ) {
         // Get the actual response in case
         // a dataFilter is present in ajaxSettings
         jqXHR.done(function( r ) {
           responseText = r;
         });
         // See if a selector was specified
         self.html( selector ?
           // Create a dummy div to hold the results
           jQuery("

<div>

   ")
             // inject the contents of the document in, removing the scripts
             // to avoid any 'Permission Denied' errors in IE
             .append(responseText.replace(rscript, ""))

             // Locate the specified elements
             .find(selector) :

           // If not, just inject the full result
           responseText );
       }

       if ( callback ) {
         self.each( callback, [ responseText, status, jqXHR ] );
       }
     }
   });

   return this;
 }

</div>