在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ 代理模式
中介者模式
MVVM
亨元模式
設(shè)計模式分類概覽表
ES Harmony
組合模式
CommonJS
jQuery 插件的設(shè)計模式
外觀模式
觀察者模式
建造者模式
構(gòu)造器模式
外觀模式
簡介
AMD
原型模式
設(shè)計模式的分類
觀察者模式
命名空間模式
代理模式
編寫設(shè)計模式
適配器模式
反模式
什么是設(shè)計模式
模塊化模式
MVC
Mixin 模式
裝飾模式
設(shè)計模式的結(jié)構(gòu)
單例模式
迭代器模式
命令模式
工廠模式
MVP
暴露模塊模式
惰性初始模式

代理模式

在我們需要在一個對象后多次進(jìn)行訪問控制訪問和上下文,代理模式是非常有用處的。

當(dāng)實(shí)例化一個對象開銷很大的時候,它可以幫助我們控制成本,提供更高級的方式去關(guān)聯(lián)和修改對象,就是在上下文中運(yùn)行一個特別的方法。

在jQuery核心中,一個jQUery.proxy()方法在接受一個函數(shù)的輸入和返回一個一直具有特殊上下文的新的實(shí)體時存在。這確保了它在函數(shù)中的值時我們所期待的的值。

一個使用該模式的例子,在點(diǎn)擊事件操作時我們利用了定時器。設(shè)想我用下面的操作優(yōu)先于任何添加的定時器:

$( "button" ).on( "click", function () {
  // 在這個函數(shù)中,'this'代表了被當(dāng)前被點(diǎn)擊的那個元素對象
  $( this ).addClass( "active" );
});

如果想要在addClass操作之前添加一個延遲,我們可以使用setTiemeout()做到。然而不幸的是這么操作時會有一個小問題:無論這個函數(shù)執(zhí)行了什么在setTimeout()中都會有個一個不同的值在那個函數(shù)中。而這個值將會關(guān)聯(lián)window對象替代我們所期望的被觸發(fā)的對象。

$( "button" ).on( "click", function () {
  setTimeout(function () {
    // "this" 無法關(guān)聯(lián)到我們點(diǎn)擊的元素
    // 而是關(guān)聯(lián)了window對象
    $( this ).addClass( "active" );
  });
});

為解決這類問題,我們使用jQuery.proxy()方法來實(shí)現(xiàn)一種代理模式。通過調(diào)用它在這個函數(shù)中,使用這個函數(shù)和我們想要分配給它的this,我們將會得到一個包含了我們所期望的上下文中的值。如下所示:

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

    setTimeout( $.proxy( function () {
        // "this" 現(xiàn)在關(guān)聯(lián)了我們想要的元素
        $( this ).addClass( "active" ); 
    }, this), 500);

    // 最后的參數(shù)'this'代表了我們的dom元素并且傳遞給了$.proxy()方法
});

jQuery代理方法的實(shí)現(xiàn)如下:

// 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;
 }
上一篇:Mixin 模式下一篇:MVC