什么是钩子机制?使用钩子机制有什么好处? 
钩子机制也叫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. Linux IDR机制【转】

    转自:https://blog.csdn.net/av_geek/article/details/49640433 IDR机制在Linux内核中指的是整数ID管理机制. 实质上来讲,这就是一种将一个整 ...

  2. python3+requests库框架设计06-测试脚本

    在项目下新建TestCase文件夹,然后新建.py文件在文件中写关于接口具体的测试脚本,一般我喜欢按照模块来分,一个模块一个.py文件,建议以test开头命名文件 把配置文件改成这样 url:http ...

  3. VS2015 发布常见问题

    1. 发布时预编译 所示如下: 遇到的问题 使用abp时引用了System.Collections.Immutable.dll,但是项目编译一直出错, 排查: 查看项目引用,可看到System.Col ...

  4. AngularJs 刷新页面

    第一种: AngularJs 刷新页面可采用下面的方式:首先先在控制器中注册$window,然后定义函数$scope.reloadRoute,在需要刷新页面的地方调用函数$scope.reloadRo ...

  5. Directory 中user Var 如何添加到通道变量中?

    FS默认的配置,ACL 是 拒绝的,只能通过 Digest 的方式进行认证,一旦认证成功之后,directory 中的 var 就能在通道中通过${} 的方式获取到. 如果ACL 认证通过 ,就直接走 ...

  6. 堆(Heap)详解——Java实现

    Heap 堆定义:(这里只讲二叉堆)堆实为二叉树的一种,分为最小堆和最大堆,具有以下性质: 任意节点小于/大于它的所有后裔,最小/大元在堆的根上. 堆总是一棵完全二叉树 将根节点最大的堆叫做最大堆或大 ...

  7. python1114string_test

    #! -*- coding:utf-8 -*- str = "self_learn"print(type(str))str.title()print(str.title()) # ...

  8. Confluence 6 数据库支持的驱动

    数据库 驱动已捆绑? JDBC 驱动 备注 更多信息 PostgreSQL 9.4-1202 JDBC 41 driver download 我们推荐你使用 JDBC 4 的驱动. 如果你希望使用更新 ...

  9. Confluence 6 CSS 编辑技巧

    开始编辑空间样式表 一个空间的样式表是你开始对 CSS 进行自定义编辑的好的开始.在空间样式表中,包含了你所有可以进行修改的元素.当你对空间样式表进行编辑的时候,空间样式表的修改只会对你修改的空间有效 ...

  10. opencv 图像矫正

    四个坐标系的转换:https://blog.csdn.net/humanking7/article/details/44756073 标定和矫正:https://blog.csdn.net/u0134 ...