什么是钩子机制?使用钩子机制有什么好处? 
钩子机制也叫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. 题解-bzoj4061 CERC-2012Farm and Factory

    Problem Please contact lydsy2012@163.com! 题意概要:给定\(n\)点\(m\)边无向图,设定两个起点为\(1,2\),现要求在图中增加一个点,并将这个点与其他 ...

  2. Mysql支持哪几种索引

    从数据结构角度 1.B+树索引(O(log(n))):关于B+树索引,可以参考 MySQL索引背后的数据结构及算法原理 2.hash索引:a 仅仅能满足"=","IN&q ...

  3. 阿里云主机Nginx下配置NodeJS、Express和Forever

    https://cnodejs.org/topic/5059ce39fd37ea6b2f07e1a3 AngularJS中文社区即运行在阿里云主机上,本站使用Nginx引擎,为了AngularJS,我 ...

  4. win10:家庭版开启组策略

    1.新建一个txt文件 2.复制以下内容到txt文件 @echo off pushd "%~dp0" dir /b C:\Windows\servicing\Packages\Mi ...

  5. response.setContentType()的String参数及对应类型

    response.addHeader("Content-Disposition", "attachment;filename="+ filename); res ...

  6. windows被入侵检测

    1.net user 查看当前有哪些用户 2.net localgroup administrators 查询administrators最高权限组有哪些用户 3.net user administr ...

  7. MVVM 简介

    转:https://objccn.io/issue-13-1/ 所以,MVVM 到底是什么?与其专注于说明 MVVM 的来历,不如让我们看一个典型的 iOS 是如何构建的,并从那里了解 MVVM: 我 ...

  8. 在多任务(RTOS)环境中使用看门狗

    最近在SEGGER的博客上看到一篇有关在实时操作系统使用看门狗的文章.从一个失败的太空项目出发,分析了看门狗的作用及使用,自我感觉很有启发,特此翻译此文并推荐给各位同仁.为了阅读方便,有些航天领域名词 ...

  9. kernel_size

    kernel_size=(1,3)[flag] if flag==True:kernel_size=3 else: kernel_size=1

  10. linux之xxx 不在 sudoers 文件中,此事将被报告(转载)

    linux中创建用户命令为:useradd 用户名, eg: useradd test 指定密码:passwd test 但是有时候我们需要使用test运行执行一些root用户才有权限执行的命令,此时 ...