致敬WordPress Hooks，開發(fā)了 Javascript 版的鉤子。不依托于任何第三方庫，可獨立運行。

什么是鉤子

鉤子分為?Action?和?Filter?兩種。

Action：動作，執(zhí)行到代碼這個位置時，同時調(diào)用其他方法。
Filter：過濾器，代碼在這個位置可能需要過濾數(shù)據(jù)，數(shù)據(jù)通過參數(shù)傳遞給外部方法后返回。

無論WordPress還是Javascript，其目的都是：在代碼正常執(zhí)行過程中為二次開發(fā)預(yù)留的接口。從而實現(xiàn)：一定程度上無需修改源代碼而實現(xiàn)二次開發(fā)。可以理解為：

編寫一套通用的工作流。工作流本身的編寫人提前考慮到一些可能的情況。并在考慮到的情況中預(yù)埋鉤子。

接下來，執(zhí)行人在執(zhí)行工作流前，預(yù)先添加工作流中可能用得到的鉤子，然后再執(zhí)行工作流。當(dāng)工作流執(zhí)行到預(yù)埋鉤子的位置時，被添加的方法得到調(diào)用。

Action鉤子示例

有下面的工作流：

開始–步驟1–步驟2–步驟3–步驟4–結(jié)束

在這個流程中，我們提前考慮到：當(dāng)步驟2執(zhí)行完成后，可能有其他的功能需要同時執(zhí)行。
但是我們不知道何時執(zhí)行完步驟2。因此使用Action鉤子。

于是，工作流（源代碼）的編寫人（開發(fā)人員）在編寫源代碼時，在步驟2結(jié)束的代碼后，預(yù)埋了“do_action”鉤子，并告知了執(zhí)行人（用戶）動作名稱。

最終源代碼發(fā)布給執(zhí)行人（用戶）使用時，就可以通過“add_action”在步驟2執(zhí)行完成后同時執(zhí)行工作流以外的聯(lián)動方法。

Filter過濾器示例

有下面的工作流：

開始–步驟1–步驟2–步驟3–步驟4–結(jié)束

在這個流程中，我們提前考慮到：步驟3的?數(shù)據(jù)可能會被再次處理?后流轉(zhuǎn)到下一個步驟。
但是我們不知道步驟3的原始數(shù)據(jù)，也不知道何時執(zhí)行完步驟3。因此使用Filter鉤子。

于是，工作流（源代碼）的編寫人（開發(fā)人員）在編寫源代碼時，在步驟3處理完后的數(shù)據(jù)中，預(yù)埋了“apply_filters”鉤子，并告知了執(zhí)行人（用戶）過濾器名稱。

最終源代碼發(fā)布給執(zhí)行人（用戶）使用時，就可以通過“add_filter”對步驟3的數(shù)據(jù)進行外部處理后返回，步驟4就能得到外部處理的結(jié)果。

類比WordPress鉤子

WordPress鉤子同樣是這個原理。例如：wp的the_content過濾器。在輸出文章數(shù)據(jù)的時候，如果發(fā)現(xiàn)用戶添加過the_content過濾器，就使用用戶過濾返回后的數(shù)據(jù)，于是輸出的文章內(nèi)容就是用戶使用鉤子修改的內(nèi)容了。
當(dāng)然，用戶在添加這個鉤子的時候，并不知道文章內(nèi)容是什么，所以也不知道如何修改。因此過濾器接收參數(shù)。用戶在過濾的時候就可以根據(jù)原始內(nèi)容就行過濾。然后再返回。

方法名及參數(shù)

do_action

do_action(鉤子名稱:String, 參數(shù)1, 參數(shù)2…)
預(yù)埋鉤子，執(zhí)行“add_action”的動作鉤子，并提供動作的額外參數(shù)。

add_action

add_action(鉤子名稱:String, 回調(diào)函數(shù):Function, 優(yōu)先級:Number)
添加鉤子動作，當(dāng)代碼運行到“do_action”時，聯(lián)動同名的操作。聯(lián)動的回調(diào)參數(shù)接收“do_action”傳遞的參數(shù)。

默認優(yōu)先級：10
邏輯上完全相同（===）的同一個鉤子，只會添加一次

例：在下面的工作流中，根據(jù)當(dāng)前時間判斷是早上還是晚上。并調(diào)用不同的外部方法

//==========添加可用鉤子============
add_action('in_the_night',function(time){
    console.log("It's " + time + ", I have to sleep.");
});
add_action('in_the_morning',function(time){
    console.log("It's " + time + ", I have to go to school.");
});
//==========正常的代碼工作流============
var date = new Date(),
    hour = date.getHours(),
    minute = date.getHours(),
    time = hour + ":" + minute;
if (hour >= 21 && hour <= 23) {
    console.log('Good night!');
    do_action('in_the_night', time);
}
if (hour >= 6 && hour <= 9) {
    console.log('Good morning!');
    do_action('in_the_morning', time);
}
//==========運行結(jié)果===========
// 在6點～9點間，屏幕輸出：
// Good morning!
// It's (當(dāng)前時間), I have to go to school.
//
// 在21點～23點間，屏幕輸出：
// Good night!
// It's (當(dāng)前時間), I have to sleep.

apply_filters

過濾結(jié)果 = apply_filters(鉤子名稱:String, 被過濾的參數(shù), 額外參數(shù)1, 額外參數(shù)2…)
預(yù)埋過濾器，執(zhí)行“add_filter”的過濾器，并提供被過濾的數(shù)據(jù)。
若添加的過濾器有多個，則被過濾的數(shù)據(jù)為上一個過濾器返回的數(shù)據(jù)。

add_filter

add_filter(鉤子名稱:String, 回調(diào)函數(shù):Function, 優(yōu)先級:Number)

添加鉤子過濾器，當(dāng)代碼運行到“apply_filters”時，運行回調(diào)函數(shù)，在函數(shù)中并返回過濾后的參數(shù)。

必須返回參數(shù)，原則上返回的過濾后的參數(shù)應(yīng)該與被過濾的參數(shù)類型、結(jié)構(gòu)相同
默認優(yōu)先級：10
邏輯上完全相同（===）的同一個鉤子，只會添加一次

例：有一個students的數(shù)組中包含每個學(xué)生的姓名、年齡、和自我介紹。讀取自我介紹時進行過濾：當(dāng)學(xué)生沒有自我介紹時，自動根據(jù)名字和年齡生成自我介紹。

//==========添加可用鉤子============
add_action('introduce_oneself',function(introduce_original, name, age){
    if (introduce_original == "") {
        //沒有自我介紹，自動根據(jù)額外的參數(shù)（姓名和年齡）自動生成
        return "My name is " + name + ", I am " + age + " years old.";
    } else {
        //有自我介紹，不作處理，直接返回
        return introduce_original;
    }
});
//==========正常的代碼工作流============
var students = [
    {
        name: "Mary",
        age: 12,
        introduce: ""
    },
    {
        name: "Bob",
        age: 13,
        introduce: "I'm Bob, I like football."
    }
];
//輸出自我介紹
for (var i = 0; i < students.length; i++) {
    // 執(zhí)行過濾器，給過濾器傳入被過濾的參數(shù)（introduce）、額外參數(shù)（name,age）
    var introduce_filtered = apply_filters("introduce_oneself", students[i].introduce, students[i].name, students[i].age);
    console.log(introduce_filtered);
}
//==========運行結(jié)果===========
// 屏幕輸出：
// My name is Mary, I am 12 years old.
// I'm Bob, I like football.

remove_action / remove_filter

remove_action(鉤子名稱:String, 回調(diào)函數(shù):Function)
remove_filter(鉤子名稱:String, 回調(diào)函數(shù):Function)

只有Function完全相同（===）時，才會被移除。與WordPress的PHP鉤子不同的是，無需提供優(yōu)先級即可移除。

例：

//==========添加可用鉤子============
// Take some apple.
function take_apple(original_apple) {
    return original_apple - 3;
}
add_filter('count_apple',take_apple);
// Put them back
remove_filter('count_apple',take_apple);
//==========正常的代碼工作流============
var original_apple = 5;
var new_apple = apply_filters("count_apple", original_apple);
console.log("There are " + new_apple + " apples.");

{{userData.name}}已認證

此組別內(nèi)的文章

需要支持？

JS Hooks介紹與使用