jQuery中的设计模式有哪些

发布时间：2021-01-07 09:29:33 阅读：236 作者：小新栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章给大家分享的是有关jQuery中的设计模式有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

jQuery中的设计模式有：1、组合模式，描述了一组对象可像单个对象一样的对待；2、适配器模式；3、外观模式；4、观察者模式；5、迭代器模式；6、惰性初始模式；7、代理模式；8、建造者模式。

本教程操作环境：windows7系统、jquery3.5版本、Dell G3电脑。

推荐教程：jQuery教程

jQuery中的设计模式

jQuery是目前最流行的JavaScript DOM操作库，它提供了一个在安全和跨浏览器的方式下与DOM交互的抽象层。有意思的是，这个库也可以作为一个例子，来展示设计模式如何有效的创建既可读又易用的API。

虽然在很多情况下，撰写jQuery的主要贡献者并没有打算使用特定的模式，但是这些设计模式确实存在，而且对我们学习来说，非常有用。

组合模式

组合模式描述了一组对象可像单个对象一样的对待。

这允许我们能统一的处理单个对象或多个对象。这意味着无论是一个对象还是一千个对象我们都能以同样的行为来处理。

在Jquery中，当我们在一个节点或多个节点上应用方法时，我们都能以相同的方式来选择并返回JQuery对象。

下面这个演示我们将使用Jquery的选择器。对单一元素(比如拥有唯一ID的元素)或拥有相同标签或Class的一组元素添加名为active的class,对待它们使用上并无不同:

// 单一节点
$( "#singleItem" ).addClass( "active" );
$( "#container" ).addClass( "active" );

// 一组节点
$( "div" ).addClass( "active" );
$( ".item" ).addClass( "active" );
$( "input" ).addClass( "active" );

JQuery的addClass()实现中直接使用原生的for循环、Jquery的JQuery.each()、Jquery.fn.each来迭代一个集合以达到能同时处理一个或一组元素的目的。请看下面的例子:

 addClass: function( value ) {
  var classNames, i, l, elem,
    setClass, c, cl;

  if ( jQuery.isFunction( value ) ) {
    return this.each(function( j ) {
      jQuery( this ).addClass( value.call(this, j, this.className) );
    });
  }

  if ( value && typeof value === "string" ) {
    classNames = value.split( rspace );

    for ( i = 0, l = this.length; i < l; i++ ) {
      elem = this[ i ];

      if ( elem.nodeType === 1 ) {
        if ( !elem.className && classNames.length === 1 ) {
          elem.className = value;

        } else {
          setClass = " " + elem.className + " ";

          for ( c = 0, cl = classNames.length; c < cl; c++ ) {
            if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
              setClass += classNames[ c ] + " ";
            }
          }
          elem.className = jQuery.trim( setClass );
        }
      }
    }
  }

  return this;
}

适配器模式

适配器模式将一个对象或者类的接口翻译成某个指定的系统可以使用的另外一个接口。

适配器基本上允许本来由于接口不兼容而不能一起正常工作的对象或者类能够在一起工作.适配器将对它接口的调用翻译成对原始接口的调用，而实现这样功能的代码通常是最简的。

我们可能已经用过的一个适配器的例子就是jQuery的jQuery.fn.css()方法，这个方法帮助规范了不同浏览器之间样式的应用方式，使我们使用简单的语法，这些语法被适配成为浏览器背后真正支持的语法：

// Cross browser opacity:
// opacity: 0.9;  Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+
// filter: alpha(opacity=90);  IE6-IE8

// Setting opacity
$( ".container" ).css( { opacity: .5 } );

// Getting opacity
var currentOpacity = $( ".container" ).css('opacity');

将上面的代码变得可行的相应的jQuery核心css钩子在下面：

get: function( elem, computed ) {
 // IE uses filters for opacity
 return ropacity.test( (
       computed && elem.currentStyle ?
           elem.currentStyle.filter : elem.style.filter) || "" ) ?
   ( parseFloat( RegExp.$1 ) / 100 ) + "" :
   computed ? "1" : "";
},

set: function( elem, value ) {
 var style = elem.style,
   currentStyle = elem.currentStyle,
   opacity = jQuery.isNumeric( value ) ?
         "alpha(opacity=" + value * 100 + ")" : "",
   filter = currentStyle && currentStyle.filter || style.filter || "";

 // IE has trouble with opacity if it does not have layout
 // Force it by setting the zoom level
 style.zoom = 1;

 // if setting opacity to 1, and no other filters
 //exist - attempt to remove filter attribute #6652
 if ( value >= 1 && jQuery.trim( filter.replace( ralpha, "" ) ) === "" ) {

   // Setting style.filter to null, "" & " " still leave
   // "filter:" in the cssText if "filter:" is present at all,
   // clearType is disabled, we want to avoid this style.removeAttribute
   // is IE Only, but so apparently is this code path...
   style.removeAttribute( "filter" );

   // if there there is no filter style applied in a css rule, we are done
   if ( currentStyle && !currentStyle.filter ) {
     return;
   }
 }

 // otherwise, set new filter values
 style.filter = ralpha.test( filter ) ?
   filter.replace( ralpha, opacity ) :
   filter + " " + opacity;
}
};

外观模式

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

门面在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>

观察者模式

另一个我们之前提到过的模式就是观察者（发布/订阅）模式.这种模式下，系统中的对象可以在关注的事件发生的时候给其他对象发送消息，也可以被其他对象所通知。

jQuery核心库很多年前就已经提供了对于类似于发布/订阅系统的支持，它们称之为定制事件。

jQuery的早期版本中，可以通过使用jQuery.bind()(订阅),jQuery.trigger()(发布),和jQuery.unbind()(取消订阅)来使用这些定制事件，但在近期的版本中，这些都可以通过使用jQuery.on(),jQuery.trigger()和jQuery.off()来完成。

下面我们来看一下实际应用中的一个例子:

// Equivalent to subscribe(topicName, callback)
$( document ).on( "topicName" , function () {
    //..perform some behaviour
});

// Equivalent to publish(topicName)
$( document ).trigger( "topicName" );

// Equivalent to unsubscribe(topicName)
$( document ).off( "topicName" );

对于jQuery.on()和jQuery.off()的调用最后会经过jQuery的事件系统，与Ajax一样，由于它们的实现代码相对较长，我们只看一下实际上事件处理器是在哪儿以及如何将定制事件加入到系统中的:

jQuery.event = {

  add: function( elem, types, handler, data, selector ) {

    var elemData, eventHandle, events,
      t, tns, type, namespaces, handleObj,
      handleObjIn, quick, handlers, special;

    ...

    // Init the element's event structure and main handler,
    //if this is the first
    events = elemData.events;
    if ( !events ) {
      elemData.events = events = {};
    }
    ...

    // Handle multiple events separated by a space
    // jQuery(...).bind("mouseover mouseout", fn);
    types = jQuery.trim( hoverHack(types) ).split( " " );
    for ( t = 0; t < types.length; t++ ) {

      ...

      // Init the event handler queue if we're the first
      handlers = events[ type ];
      if ( !handlers ) {
        handlers = events[ type ] = [];
        handlers.delegateCount = 0;

        // Only use addEventListener/attachEvent if the special
        // events handler returns false
        if ( !special.setup || special.setup.call( elem, data,
        //namespaces, eventHandle ) === false ) {
          // Bind the global event handler to the element
          if ( elem.addEventListener ) {
            elem.addEventListener( type, eventHandle, false );

          } else if ( elem.attachEvent ) {
            elem.attachEvent( "on" + type, eventHandle );
          }
        }
      }

对于那些喜欢使用传统的命名方案的人， Ben Alamn对于上面的方法提供了一个简单的包装，然后为我们提供了jQuery.publish(),jQuery.subscribe和jQuery.unscribe方法。我之前在书中提到过，现在我们可以完整的看一下这个包装器。

(function( $ ) {

  var o = $({});

  $.subscribe = function() {
    o.on.apply(o, arguments);
  };

  $.unsubscribe = function() {
    o.off.apply(o, arguments);
  };

  $.publish = function() {
    o.trigger.apply(o, arguments);
  };

}( jQuery ));

在近期的jQuery版本中，一个多目的的回调对象（jQuery.Callbacks）被提供用来让用户在回调列表的基础上写新的方案。另一个发布/订阅系统就是一个使用这个特性写的方案，它的实现方式如下:

var topics = {};

jQuery.Topic = function( id ) {
    var callbacks,
        topic = id && topics[ id ];
    if ( !topic ) {
        callbacks = jQuery.Callbacks();
        topic = {
            publish: callbacks.fire,
            subscribe: callbacks.add,
            unsubscribe: callbacks.remove
        };
        if ( id ) {
            topics[ id ] = topic;
        }
    }
    return topic;
};

然后可以像下面一样使用:

// Subscribers
$.Topic( "mailArrived" ).subscribe( fn1 );
$.Topic( "mailArrived" ).subscribe( fn2 );
$.Topic( "mailSent" ).subscribe( fn1 );

// Publisher
$.Topic( "mailArrived" ).publish( "hello world!" );
$.Topic( "mailSent" ).publish( "woo! mail!" );

//  Here, "hello world!" gets pushed to fn1 and fn2
//  when the "mailArrived" notification is published
//  with "woo! mail!" also being pushed to fn1 when
//  the "mailSent" notification is published.

// Outputs:
// hello world!
// fn2 says: hello world!
// woo! mail!

迭代器模式

迭代器模式中，迭代器（允许我们遍历集合中所有元素的对象）顺序迭代一个集合对象中的元素而无需暴漏其底层形式。

迭代器封装了这种特别的迭代操作的内部结构，就jQuery的jQuery.fn.each()迭代器来说，我们实际上可以使用jQuery.each()底层的代码来迭代一个集合，而无需知道或者理解后台提供这种功能的代码是如何实现的。

这种模式可以被理解为门面模式的一种特例，在这里我们只处理与迭代有关的问题。

$.each( ["john","dave","rick","julian"] , function( index, value ) {
  console.log( index + ": "" + value);
});

$( "li" ).each( function ( index ) {
  console.log( index + ": " + $( this ).text());
});

这里我们可以看到jQuery.fn.each()的代码:

// Execute a callback for every element in the matched set.
each: function( callback, args ) {
  return jQuery.each( this, callback, args );
}

在jQuery.each()方法后面的代码提供了两种迭代对象的方法:

each: function( object, callback, args ) {
  var name, i = 0,
    length = object.length,
    isObj = length === undefined || jQuery.isFunction( object );

  if ( args ) {
    if ( isObj ) {
      for ( name in object ) {
        if ( callback.apply( object[ name ], args ) === false ) {
          break;
        }
      }
    } else {
      for ( ; i < length; ) {
        if ( callback.apply( object[ i++ ], args ) === false ) {
          break;
        }
      }
    }

  // A special, fast, case for the most common use of each
  } else {
    if ( isObj ) {
      for ( name in object ) {
        if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
          break;
        }
      }
    } else {
      for ( ; i < length; ) {
        if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
          break;
        }
      }
    }
  }

  return object;
};

惰性初始模式

延迟初始化是一种允许我们延迟初始化消耗资源比较大的进程，直到需要他们的时候（才初始化）。这其中的一个例子就是jQuery的.ready()方法，它在DOM节点加载完毕之后会执行一个回调方法。

$( document ).ready( function () {

    //ajax请求不会执行，直到DOM加载完成

    var jqxhr = $.ajax({
      url: "http://domain.com/api/",
      data: "display=latest&order=ascending"
    })
    .done( function( data ) ){
        $(".status").html( "content loaded" );
        console.log( "Data output:" + data );
    });

});

jQuery.fn.ready()底层是通过byjQuery.bindReady()来实现的, 如下所示:

bindReady: function() {
  if ( readyList ) {
    return;
  }

  readyList = jQuery.Callbacks( "once memory" );

  // Catch cases where $(document).ready() is called after the
  // browser event has already occurred.
  if ( document.readyState === "complete" ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
    return setTimeout( jQuery.ready, 1 );
  }

  // Mozilla, Opera and webkit support this event
  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 ) {
    // ensure firing before onload,
    // maybe late but safe also for iframes
    document.attachEvent( "onreadystatechange", DOMContentLoaded );

    // A fallback to window.onload, that will always work
    window.attachEvent( "onload", jQuery.ready );

    // If IE and not a frame
    // continually check to see if the document is ready
    var toplevel = false;

    try {
      toplevel = window.frameElement == null;
    } catch(e) {}

    if ( document.documentElement.doScroll && toplevel ) {
      doScrollCheck();
    }
  }
},

即使不直接在jQuery核心文件中使用，有些开发者通过一些插件也可能熟悉懒加载的概念，延迟加载和揽初始化一样有效，它是一种在需要的时候（比如：当用户浏览到了页面底部的时候）才加载页面数据的技术。最近几年，这种模式已经变得非常显著并且现在可以再Twitter和Facebook的UI里面zhaoda。

代理模式

在我们需要在一个对象后多次进行访问控制访问和上下文，代理模式是非常有用处的。

当实例化一个对象开销很大的时候，它可以帮助我们控制成本，提供更高级的方式去关联和修改对象，就是在上下文中运行一个特别的方法。

在jQuery核心中，一个jQUery.proxy()方法在接受一个函数的输入和返回一个一直具有特殊上下文的新的实体时存在。这确保了它在函数中的值时我们所期待的的值。

一个使用该模式的例子，在点击事件操作时我们利用了定时器。设想我用下面的操作优先于任何添加的定时器：

$( "button" ).on( "click", function () {
  // 在这个函数中，'this'代表了被当前被点击的那个元素对象
  $( this ).addClass( "active" );
});

如果想要在addClass操作之前添加一个延迟，我们可以使用setTiemeout()做到。然而不幸的是这么操作时会有一个小问题：无论这个函数执行了什么在setTimeout()中都会有个一个不同的值在那个函数中。而这个值将会关联window对象替代我们所期望的被触发的对象。

$( "button" ).on( "click", function () {
  setTimeout(function () {
    // "this" 无法关联到我们点击的元素
    // 而是关联了window对象
    $( this ).addClass( "active" );
  });
});

为解决这类问题，我们使用jQuery.proxy()方法来实现一种代理模式。通过调用它在这个函数中，使用这个函数和我们想要分配给它的this，我们将会得到一个包含了我们所期望的上下文中的值。如下所示：

$( "button" ).on( "click", function () {

    setTimeout( $.proxy( function () {
        // "this" 现在关联了我们想要的元素
        $( this ).addClass( "active" ); 
    }, this), 500);

    // 最后的参数'this'代表了我们的dom元素并且传递给了$.proxy()方法
});

jQuery代理方法的实现如下：

// Bind a function to a context, optionally partially applying any
 // arguments.
 proxy: function( fn, context ) {
   if ( typeof context === "string" ) {
     var tmp = fn[ context ];
     context = fn;
     fn = tmp;
   }

   // Quick check to determine if target is callable, in the spec
   // this throws a TypeError, but we will just return undefined.
   if ( !jQuery.isFunction( fn ) ) {
     return undefined;
   }

   // Simulated bind
   var args = slice.call( arguments, 2 ),
     proxy = function() {
       return fn.apply( context, args.concat( slice.call( arguments ) ) );
     };

   // Set the guid of unique handler to the same of original handler, so it can be removed
   proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++;

   return proxy;
 }

建造者模式

处理DOM时，我们常常想要去动态的构建新的元素--这是一个会让我们希望构建的元素最终所包含的标签，属性和参数的复杂性有所增长的过程。

定义复杂的元素时需要特别的小心，特别是如果我们想要在我们元素标签的字面意义上（这可能会乱成一团）拥有足够的灵活性，或者取而代之去获得更多面向对象路线的可读性。我们需要一种为我们构建复杂DOM对象的机制，它独立于为我们提供这种灵活性的对象本身，而这正是建造者模式为我们所提供的。

建造器使得我们仅仅只通过定义对象的类型和内容，就可以去构建复杂的对象，为我们屏蔽了明确创造或者展现对象的过程。

jQuery的美元标记为动态构建新的jQuery（和DOM）对象提供了大量可以让我们这样做的不同的方法，可以通过给一个元素传入完整的标签，也可以是部分标签还有内容，或者使用jQuery来进行构造：

$( '<div class="foo">bar</div>' );

$( '<p id="test">foo <em>bar</em></p>').appendTo("body");

var newParagraph = $( "<p />" ).text( "Hello world" );

$( "<input />" )
      .attr({ "type": "text", "id":"sample"});
      .appendTo("#container");

下面引用自jQuery内部核心的jQuery.protoype方法，它支持从jQuery对象到传入jQuery()选择器的标签的构造。不管是不是使用document.createElement去创建一个新的元素，都会有一个针对这个元素的引用（找到或者被创建）被注入到返回的对象中，因此进一步会有更多的诸如as.attr()的方法在这之后就可以很容易的在其上使用了。

// HANDLE: $(html) -> $(array)
  if ( match[1] ) {
    context = context instanceof jQuery ? context[0] : context;
    doc = ( context ? context.ownerDocument || context : document );

    // If a single string is passed in and it's a single tag
    // just do a createElement and skip the rest
    ret = rsingleTag.exec( selector );

    if ( ret ) {
      if ( jQuery.isPlainObject( context ) ) {
        selector = [ document.createElement( ret[1] ) ];
        jQuery.fn.attr.call( selector, context, true );

      } else {
        selector = [ doc.createElement( ret[1] ) ];
      }

    } else {
      ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
      selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
    }

    return jQuery.merge( this, selector );

感谢各位的阅读！关于“jQuery中的设计模式有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

jQuery中的设计模式有哪些

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签