javascript钩子机制

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 84 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pao8041/p/3922566.html

文章标签：

#javascript #ViewUI

本文介绍了一种通过钩子函数实现的机制，该机制允许开发者按照特定规则定义方法，并在页面加载完成前统一执行这些方法。文章详细展示了钩子机制的工作原理及其实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

钩子机制是这样的，大家按照某一规则写一个方法（这个规则在方法名称上），然后页面加载完之前，统一执行所有的钩子函数。

注意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(this.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();