jQuery中的编程范式详解

2020-05-22 21:57:08易采站长站整理

     // 将jQuery暴露为全局对象
    window.jQuery = window.$ = jQuery;
})(window);

显然, $.fn其实就是jQuery.prototype的简写.
 
无状态的插件仅仅就是一个函数, 非常简单.
// 定义插件
  (function($){
      $.fn.hoverClass = function(c) {
          return this.hover(
              function() { $(this).toggleClass(c); }
          );
      };
  })(jQuery);
 
  // 使用插件
  $(‘li’).hoverClass(‘hover’);
 
对于比较复杂的插件开发, jQuery UI提供了一个widget工厂机制,
$.widget(“ui.dialog”, {
   options: {
        autoOpen: true,…
     },
     _create: function(){ … },
     _init: function() {
        if ( this.options.autoOpen ) {
            this.open();
        }
     },
     _setOption: function(key, value){ … }
     destroy: function(){ … }
 });
 
调用 $(‘#dlg’).dialog(options)时, 实际执行的代码基本如下所示:
this.each(function() {
        var instance = $.data( this, “dialog” );
        if ( instance ) {
            instance.option( options || {} )._init();
        } else {
            $.data( this, “dialog”, new $.ui.dialog( options, this ) );
        }
    }
可以看出, 第一次调用$(‘#dlg’).dialog()函数时会创建窗口对象实例,并保存在data中, 此时会调用_create()和_init()函数, 而如果不是第一次调用, 则是在已经存在的对象实例上调用_init()方法. 多次调用$(‘#dlg’).dialog()并不会创建多个实例.

13. browser sniffer vs. feature detection

浏览器嗅探(browser sniffer)曾经是很流行的技术, 比如早期的jQuery中
jQuery.browser = {
        version:(userAgent.match(/.+(?:rv|it|ra|ie)[/: ]([d.]+)/) || [0,’0′])[1],
        safari:/webkit/.test(userAgent),