js鈎子函數

鈎子機制

鈎子機制是這樣的，大家按照某一規則寫一個方法（這個規則在方法名稱上），然后頁面加載完之前，統一執行所有的鈎子函數。

注意callHooks方法，里面的局部變量s就是鈎子函數名稱中一定要有的內容。——這是使用鈎子的方法！

// 處理鈎子的對象
var hook = (function(){
    return {
        timer:null,
        init:function(){
            this.callHooks('init');
        },  
        callHooks:function(init){
            var s = "hook_" + init + '_event',
            f = []; 
            for(var h in window){
                if(h.indexOf(s) != 0) continue;
                f.push(h);
            }   
            this.hooksTimeout(f);
        },  
        hooksTimeout:function(hooks){
            if(0 === hooks.length){
                if(this.timer) clearTimeout(this.timer);
                return;
            }   

            var h = hooks.shift();
            window[h].apply();
            window[h] = undefined;

            window.setTimeout(function(){hook.hooksTimeout(hooks);}, 200);
        }   
    }   
}());

// 鈎子1
var hook_init_event_tpl_html = function(){
    document.getElementById('test').innerHTML = 'This is HTML!';
}

// 鈎子2
var hook_init_event_tpl_console = function(){
    console.log('This is console!');
}

// 最好在頁面加載完之前調用，也就是在window.onload()之前
hook.init();