[什么是钩子]

接触过WordPress的朋友都知道,WP的程序中可以执行类似钩子的函数,当然是这PHP实现的钩子。在JavaScript中一样可以实现类似的功能。

用一句话来形容一下:钩子是将需要执行的函数或者其他一系列动作注册到一个统一的入口,程序通过调用这个钩子来执行这些已经注册的函数。

[为什么要用钩子]

很多朋友都会写一些函数,类似window.onload、$(document).ready等,而且一个页面不止一处写到类似的函数,如何让这些需要执行的函数在一个统一的入口执行(即页面只需要执行一个类似window.onload的函数)?

这时我们可以借助HOOK来实现,(以window.onload为例)将所以需要在页面加载的时候执行函数都注册到一个入口,如:

function func1()
{// ....
}function func2()
{// ....
}
hooks.addAction("loaded", func1); // 添加函数
hooks.addAction("loaded", "func2");

上面表示在loaded钩子上挂了两个函数。然后执行这个钩子,如:

window.onload = function()
{
hooks.doAction("loaded");
}

这样无论在之前挂多少函数hooks.addAction("loaded", function),在hooks.doAction("loaded")这里都被统一执行了。

[JS钩子如何实现]

原理比较简单,定义一个hook数组,addAction时将函数push到hook数组,doAction时将hook数组里的函数逐一调用。

function hooks()
{this.queue = new Array();
}
hooks.prototype.addAction = function(hook, func)
{this.queue[hook] = new Array();if(typeof func == 'function') {this.queue[hook].push(func);
} else if(typeof func == 'string') {this.queue[hook].push(this.window[func]);
}
}
hooks.prototype.doAction = function(hook)
{var parameters = Array.prototype.slice.call(arguments, 1);var functions = this.queue[hook];for(var i=0; i < functions.length; i++)
{this.call_user_func_array(functions[i], parameters);
}return true;
}
hooks.prototype.call_user_func_array = function(cb, parameters)
{if (typeof cb === 'string') {
func = (typeof this[cb] === 'function') ? this[cb] : func = (newFunction(null, 'return ' + cb))();
} else if (cb instanceof Array) {
func = ( typeof cb[0] == 'string' ) ? eval(cb[0]+"['"+cb[1]+"']") : func = cb[0][cb[1]];
} else if (typeof cb === 'function') {
func = cb;
}if (typeof func != 'function') {throw new Error(func + ' is not a valid function');
}if(typeof parameters == 'undefined') {var tmp_ary = [];var parameters = Array.prototype.slice.call(tmp_ary, 1);
}return (typeof cb[0] === 'string') ? func.apply(eval(cb[0]), parameters) :.
( typeof cb[0] !== 'object' ) ? func.apply(null, parameters) : func.apply(cb[0], parameters);
}

JS钩子的机制与实现的更多相关文章

  1. 关于js内部运行机制的一本好书

    读<单页Web应用一书>,第二章讲了js内部运行机制,感觉棒极了.之前读<你不知道的js>,看的云里雾里,似懂非懂.没想到单页Web一书将此内容讲的如此通俗易懂,好多困惑已久的 ...

  2. JS的解析机制

    JS的解析机制,是JS的又一大重点知识点,在面试题中更经常出现,今天就来唠唠他们的原理.首先呢,我们在我们伟大的浏览器中,有个叫做JS解析器的东西,它专门用来读取JS,执行JS.一般情况是存在作用域就 ...

  3. JS的运行机制

    代码块: JS中的代码块是指由<script>标签分割的代码段.JS是按照代码块来进行编译和执行的,代码块间相互独立(即就算代码块1出错,但不影响代码块2的加载和执行),但变量和方法共享. ...

  4. 试着讲清楚:js代码运行机制

    一. js运行机制 js执行引擎 经常看文章的说到js是带线程的,其实这个说法非常的模糊,准确的是js执行引擎是单线程的,js执行引擎就是js代码的执行器,有了这个概念就可以下来说说js是如何运行的了 ...

  5. 浅析JS异步执行机制

    前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面.本文将针对JS异步执行机制进行一个简单的分析. 从一份代码讲起 下面是两个经典的JS定时执行函数,这两个函数的区别相信对JS有 ...

  6. js事件循环机制辨析

     对于新接触js语言的人来说,最令人困惑的大概就是事件循环机制了.最开始这也困惑了我好久,花了我几个月时间通过书本,打代码,查阅资料不停地渐进地理解他.接下来我想要和大家分享一下,虽然可能有些许错误的 ...

  7. 前端面试:谈谈 JS 垃圾回收机制

    摘要: 不是每个人都回答的出来... 最近看到一些面试的回顾,不少有被面试官问到谈谈JS 垃圾回收机制,说实话,面试官会问这个问题,说明他最近看到一些关于 JS 垃圾回收机制的相关的文章,为了 B 格 ...

  8. python垃圾回收机制:引用计数 VS js垃圾回收机制:标记清除

    js垃圾回收机制:标记清除 Js具有自动垃圾回收机制.垃圾收集器会按照固定的时间间隔周期性的执行. JS中最常见的垃圾回收方式是标记清除. 工作原理 当变量进入环境时,将这个变量标记为"进入 ...

  9. 深入理解 JS 引擎执行机制(同步执行、异步执行以及同步中的异步执行)

    首先明确两点: 1.JS 执行机制是单线程. 2.JS的Event loop是JS的执行机制,深入了解Event loop,就等于深入了解JS引擎的执行. 单线程执行带来什么问题? 在JS执行中都是单 ...

随机推荐

  1. System.Web.Mvc.HttpPutAttribute.cs

    ylbtech-System.Web.Mvc.HttpPutAttribute.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, P ...

  2. 面试系列 30 如何自己设计一个类似dubbo的rpc框架

    其实一般问到你这问题,你起码不能认怂,因为既然咱们这个课程是短期的面试突击训练课程,那我不可能给你深入讲解什么kafka源码剖析,dubbo源码剖析,何况我就算讲了,你要真的消化理解和吸收,起码个把月 ...

  3. git使用中的问题

    一.github ssh_exchange_identification: read: Connection reset by peer 和电脑环境有关,检查防火墙关了没有,是不是杀毒软件.安全卫士的 ...

  4. C++命令行多文件编译(g++)

    在刚开始学Java时用命令行进行编译代码.而C++一直在用IDE, 这次尝试下命令行编译.vs下也可以用cl.exe.link.exe等命令来进行编译 但这次是通过安装MinGW来学习命令编译,主要用 ...

  5. JavaScript特效源码(8、其他特效)

    1.中文日期 中文日期[无须修改][共1步]] ====1.将以下代码加入HEML的<body></body>之间 <script LANGUAGE="Java ...

  6. Matlab神经网络验证码识别

    本文,将会简述如何利用Matlab的强大功能,调用神经网络处理验证码的识别问题.  预备知识,Matlab基础编程,神经网络基础.  可以先看下: Matlab基础视频教程 Matlab经典教程--从 ...

  7. SPOJ694 New Distinct Substrings

    New Distinct Substrings 题目大意 给定一个字符串,求本质不同的子串个数 题解 SA常见思想:每一个子串都是某个后缀的前缀 考虑每一个后缀的贡献,首先他拥有n - sa[i]个( ...

  8. Jpgraph小应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Python全栈开发:冒泡排序

    #!/usr/bin/env python # -*- coding;utf-8 -*- """ 第一次对比:找到最大值,放到最后 对比是两两对比,对比的两个数组合共有l ...

  10. html-圣杯布局

    1.两边固定 当中自适应 2.当中列要完整显示 3.当中列要优先加载 浮动: 搭建完整的布局框架 margin 为赋值:调整旁边两列的位置(使三列布局到一行上) 使用相对定位:调整旁边两列的位置(使两 ...