jQuery Callbacks

xiyang 發(fā)布于2019-08-22 11:00 / 2597人閱讀

摘要：參考以下對比不添加參數(shù)添加參數(shù)相同的函數(shù)不會被重復(fù)添加到內(nèi)部隊列中內(nèi)部隊列里的函數(shù)是依次執(zhí)行的，當(dāng)某個函數(shù)的返回值是時，停止繼續(xù)執(zhí)行剩下的函數(shù)。

前言

$.Callbacks用來管理函數(shù)隊列。采用了觀察者模式，通過add添加操作到隊列當(dāng)中，通過fire去執(zhí)行這些操作。實際上$.Callbacks是1.7版本從$.Deferred對象當(dāng)中分離出來的，主要是實現(xiàn)$.Deferred功能。

API $.Callbacks

我們通過調(diào)用$.Callbacks獲取到一個callback實例，如下

var cb = $.Callbacks();

看到Callbacks首字母大寫，有些人可能會覺得一般只有對象才會這樣，因此需要new一個實例，如下

var cb = new $.Callbacks();

實際上這兩種方式都可以，因為Callbacks函數(shù)返回值是一個對象，為什么會這樣？看下面一組對比

function Cons() {
    this.name = "this.name";

    return {
        name: "obj.name"
    };
}

console.log(Cons().name);//obj.name
console.log(new Cons().name);//obj.name

function Cons() {
    this.name = "this.name";

    return "str.name";
}

console.log(Cons());//str.name
console.log(new Cons().name);//this.name

當(dāng)函數(shù)的返回值是一個對象時（null除外），new和直接調(diào)用兩者的返回值是一樣的。但是需要注意了，兩者的this指向是不一樣的。為了盡可能的節(jié)省代碼和避免混亂我們還是統(tǒng)一采用var cb = $.Callbacks();的方式去調(diào)用。

像這種先調(diào)用獲取到實例，然后通過實例進(jìn)行一系列的操作，很明顯利用了閉包特性。

add

向內(nèi)部隊列添加函數(shù)，總有三種參數(shù)形式

單個函數(shù)參數(shù)

var cb = $.Callbacks();

cb.add(function () {
    console.log("add one");
});

多個函數(shù)參數(shù)

var cb = $.Callbacks();

cb.add(function () {
    console.log("add one");
}, function () {
    console.log("add two");
});

數(shù)組參數(shù)

var cb = $.Callbacks();

cb.add([
    function () {
        console.log("add one");
    }, function () {
        console.log("add two");
    }
]);

fire

依次執(zhí)行隊列里的函數(shù)

var cb = $.Callbacks();

cb.add([
    function () {
        console.log("add one");
    }, function () {
        console.log("add two");
    }
]);

cb.fire();
//add one
//add two

fire的參數(shù)會傳遞給我們添加的函數(shù)，例如

var cb = $.Callbacks();

cb.add(function (name, age) {
    console.log(name, age);
});

cb.fire("Jacky", 26);//Jacky 26

fireWith

fire調(diào)用的時候，我們添加函數(shù)當(dāng)中的this指向我們的Callbacks實例，例如

var cb = $.Callbacks();

cb.add(function () {
    console.log(this === cb);
});

cb.fire();//true

fireWith就是改變我們添加函數(shù)的context，即this指向，例如

var cb = $.Callbacks();

var obj = {
    name: "objName"
};

cb.add(function (age) {
    console.log(this.name, age);
});

cb.fireWith(obj, [26]);//objName 26

fireWith第一個參數(shù)是我們的context，第二個參數(shù)是我們需要傳遞的內(nèi)容數(shù)組，注意了是數(shù)組！

empty

清空函數(shù)隊列

var cb = $.Callbacks();

cb.add(function () {
    console.log("add one");
});

cb.empty();
cb.fire();

has

判斷函數(shù)隊列中是否存在某個函數(shù)

var cb = $.Callbacks();

function demo() {
    console.log("demo");
}
cb.add(demo);
console.log(cb.has(demo));//true

函數(shù)傳遞的都是引用，千萬別出現(xiàn)以下的低級錯誤

var cb = $.Callbacks();

cb.add(function () {
    console.log("demo");
});
cb.has(function () {
    console.log("demo");
});

remove

從內(nèi)部隊列中移除某些函數(shù)

var cb = $.Callbacks();

function demo1() {
    console.log("demo1");
}

function demo2() {
    console.log("demo2");
}

cb.add(demo1, demo2);
cb.remove(demo1, demo2);
cb.fire();

disable

禁用回調(diào)列表。這種情況會清空函數(shù)隊列，禁用核心功能。意味著這個回調(diào)管理報廢了。

var cb = $.Callbacks();

cb.add(function () {
    console.log("add");
});

cb.disable();
cb.fire();

disabled

回調(diào)管理是否被禁用

var cb = $.Callbacks();

cb.add(function () {
    console.log("add");
});

cb.disable();
console.log(cb.disabled());//true

lock

鎖定回調(diào)管理，同disable，唯一的差別會在下面表述

locked

回調(diào)管理是否被鎖

fired

回調(diào)隊列是否執(zhí)行過

var cb = $.Callbacks();

cb.add(function () {
    console.log("add");
});

cb.fire();//add
console.log(cb.fired());//true

$.Callbacks()

$.Callbacks通過字符串參數(shù)的形式支持4種及以上的特定功能。很明顯的一個工廠模式。

once

函數(shù)隊列只執(zhí)行一次。參考以下對比

//不添加參數(shù) 
var cb = $.Callbacks();

cb.add(function () {
    console.log("add");
});

cb.fire();//add
cb.fire();//add

//添加參數(shù)
var cb = $.Callbacks("once");

cb.add(function () {
    console.log("add");
});

cb.fire();//add
cb.fire();

函數(shù)隊列執(zhí)行過以后，就不會在執(zhí)行了，無論調(diào)用fire多少次。

unique

往內(nèi)部隊列添加的函數(shù)保持唯一，不能重復(fù)添加。參考以下對比

//不添加參數(shù)
var cb = $.Callbacks();

function demo() {
    console.log("demo");
}
cb.add(demo, demo);

cb.fire();
//demo
//demo

//添加參數(shù)
var cb = $.Callbacks("unique");

function demo() {
    console.log("demo");
}
cb.add(demo, demo);

cb.fire();//demo

相同的函數(shù)不會被重復(fù)添加到內(nèi)部隊列中

stopOnFalse

內(nèi)部隊列里的函數(shù)是依次執(zhí)行的，當(dāng)某個函數(shù)的返回值是false時，停止繼續(xù)執(zhí)行剩下的函數(shù)。參考以下對比

//不添加參數(shù)
var cb = $.Callbacks();

cb.add([
    function () {
        console.log("add one");
    },
    function () {
        console.log("add two");
    }
]);

cb.fire();
//add one
//add two

//添加參數(shù)
var cb = $.Callbacks("stopOnFalse");

cb.add([
    function () {
        console.log("add one");
        return false;
    },
    function () {
        console.log("add two");
    }
]);

cb.fire();//add one

注意了返回值一定要是false，像undefined、null這種作為返回值是沒有效果的

memory

當(dāng)函數(shù)隊列fire或fireWith一次過后，內(nèi)部會記錄當(dāng)前fire或fireWith的參數(shù)。當(dāng)下次調(diào)用add的時候，會把記錄的參數(shù)傳遞給新添加的函數(shù)并立即執(zhí)行這個新添加的函數(shù)?？磦€例子

var cb = $.Callbacks("memory");

cb.add(function (name) {
    console.log("one", name);
});

cb.fire("Jacky");//first Jacky

cb.add(function (name) {
    console.log("two", name);
});//two Jacky

例如公司領(lǐng)導(dǎo)在9點的時候發(fā)了封郵件，要求大家提交自己的年終終結(jié)，這就相當(dāng)于fire操作了，在公司里的員工收到郵件后，立馬提交了。小李由于請假，下午才過來，看到郵件后也提交了自己的年終總結(jié)。不需要領(lǐng)導(dǎo)再次發(fā)送郵件提醒。

fire或fireWith一定要在disabled或lock前先執(zhí)行一遍，memory才會起作用

小結(jié)

這四種基本類型可以相互組合起來使用，例如$.Deferred就使用了once和memory的組合。

jQuery.Callbacks("once memory")

disable和lock的區(qū)別

兩者唯一的區(qū)別就是添加了memory參數(shù)，看一下對比

var cb = $.Callbacks("memory");

cb.add(function () {
    console.log("one");
});
cb.fire();
cb.disable();
//cb.lock();
cb.add(function () {
    console.log("two");
});

毫無疑問，disable就是禁用所有功能，無論添加什么參數(shù)。而在memory的情況下，fire過后在lock，繼續(xù)add新的函數(shù)依舊會立即執(zhí)行。

總結(jié)

$.Callbacks在一百多行的代碼里就用到了兩種設(shè)計模式，確實經(jīng)典。當(dāng)然了這都是純屬個人見解。由于平時用的很少，很遺憾沒有舉出代表性的例子供大家參考，畢竟我輩的目標(biāo)是學(xué)以致用。

云服務(wù)器 GPU云服務(wù)器 callbacks jquery插件源碼jquery jQuery$ jQuery

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91607.html

發(fā)表評論

登陸后可評論

0條評論

xiyang

男|高級講師

我要關(guān)注我要私信

TA的文章

conda安裝tensorflow

閱讀 2310·2023-04-25 14:22
URLOS 基于Docker容器Linux主機管理面板雙十一永久授權(quán)11.11元

閱讀 3748·2021-11-15 18:12
前端面試每日3+1——第102天

閱讀 1303·2019-08-30 15:44
小程序填坑實錄

閱讀 3224·2019-08-29 15:37
WeUI基礎(chǔ)樣式庫——寫一個移動端界面

閱讀 653·2019-08-29 13:49
Hard binding & Soft binding detailed explanati

閱讀 3466·2019-08-26 12:11
你不知道的VsCode console快捷鍵

閱讀 887·2019-08-23 18:28
從現(xiàn)在起-徹底學(xué)會 js ast

閱讀 1592·2019-08-23 14:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

jQuery Callbacks

相關(guān)文章

jQuery 源碼系列（七）Callbacks 函數(shù)

jQuery源碼解析之$.queue()、$.dequeue()和jQuery.Callbacks(

**Promise介紹--Deferred及jQuery篇**

jQuery源碼解析Deferred異步對象

發(fā)表評論

0條評論

xiyang

男|高級講師

TA的文章

conda安裝tensorflow

URLOS 基于Docker容器Linux主機管理面板雙十一永久授權(quán)11.11元

前端面試每日3+1——第102天

小程序填坑實錄

WeUI基礎(chǔ)樣式庫——寫一個移動端界面

Hard binding & Soft binding detailed explanati

你不知道的VsCode console快捷鍵

從現(xiàn)在起-徹底學(xué)會 js ast

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

jQuery Callbacks

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！