什么是钩子机制?使用钩子机制有什么好处? 
钩子机制也叫hook机制,或者你可以把它理解成一种匹配机制,就是我们在代码中设置一些钩子,然后程序执行时自动去匹配这些钩子;这样做的好处就是提高了程序的执行效率,减少了if else 的使用同事优化代码结构。由于js是单线程的编程语言,所以程序的运行效率在前端开发是比较重要的,在开发中我们秉承如果能用switch case 的地方就不要用if else 可以用hook实现的尽量使用hook机制去实现。 
这里我们举一个例子看一下: 
例如我们在向后台进行ajax请求的时候,后台经常会返回我们一些常见的错误码,如:001代表用户不存在,002代表用户密码输入错误。003代表用户被锁定。这个时候我们要将错误友好的提示给用户。这个时候我们该怎样实现呢? 
一般的写法可能是:

$.ajax(option,function(result){
var errCode = result.errCode ;//错误码
if(errCode){
if(errCode =='001'){
alert("用户不存在")
}else if(errCode =='002'){
alert("密码输入错误")
}else if(errCode =='003'){
alert("用户被锁定")
}
}else{
//登录成功
}
},function(err){ })

这样写其实是比较low低,稍微有点经验的可能会使用switch case来实现,但是这个两种写法都无法避免一个问题就是如果我的错误码特别多,那得写多少个if else和case 啊?但是如果使用hook写法的话就会简单好多, 
首先我们先声明一个错误码钩子列表

var codeList  = {
"001":"用户不存在",
"002":"密码输入错误",
"003":"用户被锁定"
}
$.ajax(option,function(result){
var errCode = result.errCode ;//错误码
if(!errCode){
alert(codeList[errCode]);
}else{
//登录成功
}
},function(err){ })

这样写的话代码结构更加清楚明了。这个例子是最简单的应用了的了。在Jquery 中hook机制被大量的使用,这里我们就Jquery中判断变量类型的type方法来具体看一下 
通常我们在js中判断一个变量的数据类型?首先会想到type of 和 instanceof 
如果是基本类型我们可以直接使用typeof,但是这种方式只能判断基本数据类型,如果是对象,它返回结果都市Object,如果变量是null它返回的也是Object。这个时候我们要准确的判断一般的写法可能会是:

  function type(obj){
var type = "";
if(obj==null){
type = null;
}else{
type = obj.a.constructor.toString().split("(")[0].split(" ")[1]
}
return type;
}

在jquery中的实现是:

var class2type={};
var toString = Object.prototype.toString;
jQuery.each("Boolean Number String Function Array Date RegExp Object Error Symbol",function(index,name){
class2type["Object"+" name"]==name.toLowerCase();
})
type:function(obj){
if(obj==null){
return obj+"";
}
return typeof obj =="Object"||typeof obj ==="function"?class2type[toString.call(obj)]|||"object":typeof obj
}

上面代码中 
class2type = { ‘[object Boolean]’: ‘boolean’, ‘[object Number]’: ‘number’, ‘[object String]’: ‘string’, ‘[object Function]’: ‘function’, ‘[object Undefined]’: ‘undefined’, ‘[object Null]’: ‘null’, ‘[object Array]’: ‘array’, ‘[object Date]’: ‘date’, ‘[object RegExp]’: ‘regexp’, ‘[object Object]’: ‘object’, ‘[object Error]’: ‘error’}; 
设置一个类型钩子对象 
toString.call(obj)就是Object.prototype.toString.call(arg)来细致判断obj的类型。在这里则转换成对象对应索引是否在class2type 中存在相应value,若存在则返回value判断,若不存在则返回object类型。 
这样就实现了类型的判断。

[转] js中的钩子机制(hook)的更多相关文章

  1. 别再为了this发愁了------JS中的this机制

    别再为了this发愁了------JS中的this机制 题记:JavaScript中有很多令人困惑的地方,或者叫做机制.但是,就是这些东西让JavaScript显得那么美好而与众不同.比方说函数也是对 ...

  2. 再次讲解js中的回收机制是怎么一回事。

    在前几天的一篇闭包文章中我们简单的介绍了一下闭包,但是并没有深入的讲解,因为闭包涉及的知识点比较多,为了能够更好的理解闭包,今天讲解一下关于js中的回收机制. 在初识闭包一文中我说过js中有回收机制这 ...

  3. 关于js中的回收机制,通俗版

    在前面的几篇文章中,我讲解过了js中的回收机制,但是对于当时的我来说,我自己对回收机制的这个概念也有些懵懵懂懂,现在对回收机制有了更深入的理解,所以特此发布此文给于总结,也好加深记忆. 如果你想学习闭 ...

  4. 次讲解js中的回收机制是怎么一回事。

    在前几天的一篇闭包文章中我们简单的介绍了一下闭包,但是并没有深入的讲解,因为闭包涉及的知识点比较多,为了能够更好的理解闭包,今天讲解一下关于js中的回收机制. 在初识闭包一文中我说过js中有回收机制这 ...

  5. 别再为了this发愁了:JS中的this机制

    题记:JavaScript中有很多令人困惑的地方,或者叫做机制.但是,就是这些东西让JavaScript显得那么美好而与众不同.比方说函数也是对象.闭包.原型链继承等等,而这其中就包括颇让人费解的th ...

  6. JS中的this机制

    1.this是啥? 简言之,this是JavaScript语言中定义的众多关键字之一,它的特殊在于它自动定义于每一个函数域内,但是this倒地指引啥东西却让很多人张二摸不着头脑.这里我们留个小悬念,希 ...

  7. JS中的存储机制

    一.堆和栈的介绍 1.堆和队,是先进先出:栈,是先进后出,就跟水桶差不多: 2.存储速度:堆和队的存储速度较慢,栈的存储速度较快,会自动释放: 二.js中存储的类型 1.堆,一般用于复杂数据类型,存储 ...

  8. JS中的执行机制(setTimeout、setInterval、promise、宏任务、微任务)

    1.执行机制 JS 是单线程的,处理 JS 任务(程序)只能一个一个顺序执行,所以 JS 中就把任务分为了同步任务和异步任务.同步的进入主线程先执行,异步的进入Event Table并注册函数,当指定 ...

  9. Java中的变量传递机制以及JS中的参数传递机制

    JAVA: 传递基本类型是 就是基本的值传递 不会影响值本身. package com.wuqi.p1; public class ValuePassTest { public static void ...

随机推荐

  1. delphi 控件集

    delphi  控件集: 1)RAIZE 控件包  :http://www.raize.com/devtools/rzcomps/   被收购 Raize Components has been ac ...

  2. mac使用技巧之截图

    1.选定区域截图 command+shift+3 选定区域按住control,可以直接截图到剪切板, 按option可以进行比例缩放. 按住shift可以选定区域 按住空格键可以进入窗口截图模式. 2 ...

  3. day2 --> pyc 文件

    执行python 代码时,如果导入了其他的.py文件,那么,执行过程中会自动生成一个与其同名的.pyc文件,该文件就是python解释器便宜之后产生的字节码. PS:代码经过便宜可以产生字节码;字节码 ...

  4. mysql多表关联update修改操作

      UPDATE province_yunnan_salary s1 JOIN province_guangdong_salary s2 ON s1.user_name= s2.user_name S ...

  5. 我的大学,我的SPR机器人队

    时间过的真快,我这个在协会呆了好多年的老油条今年都毕业了,在石油大学大学七年几乎三分之二的时间就是在协会度过的.实话说在北京这是我最亲切的地方,这里有我喜欢的各种设备,有亲爱的老师和一起奋斗的队友,在 ...

  6. [PHP]一些坑

    一.如果有一个字符串变量等于'error',它跟0 == 运算时,会返回true,但是它并不是一个预置常量 $test = 'error'; var_dump($test == 0);//true 二 ...

  7. shiro使用

    web.xml配置 <filter> <filter-name>shiroFilter</filter-name> <filter-class>org. ...

  8. jdbctemplate 调用oracle 有返回(会话型临时表数据的)结果的存储过程

    注:本文为博主 原创. jdbctemplate 调用oracle存储过程 事务 临时表  有返回结果 1:java 代码 本逻辑代码本是想把 java 代码里的list<Strign>类 ...

  9. Executor多线程框架使用

    在我们的JDK1.5的时候JAVA推出一款为了更加方便开发的多线程应用而封装的框架(Executor),相比传统的Thread类,Executor更加的方便,性能好,更易于管理,而且支持线程池.一般在 ...

  10. 自定义Form组件

    一.wtforms源码流程 1.实例化流程分析 # 源码流程 1. 执行type的 __call__ 方法,读取字段到静态字段 cls._unbound_fields 中: meta类读取到cls._ ...