关闭

创建js hook钩子_js中的钩子机制与实现

时间: 2018-05-23阅读: 1101标签: 机制

什么是钩子机制?使用钩子机制有什么好处?

钩子机制也叫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类型。这样就实现了类型的判断。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/806

关闭

JS 引擎 V8 新机制:JIT-less 模式

V8 v7.4 现在支持无需在 runtime 阶段分配可执行内存就能执行 JavaScript 代码。在其默认配置中,V8 很大程度上依赖于在 runtime 阶段分配和修改可执行内存的能力。例如,作为一个包含优化过程的编译器

js对代码解析机制

脚本执行js引擎都做了什么呢?1.语法分析 2.预编译 3.解释执行。在执行代码前,还有两个步骤;语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误 ,查找全局变量声明(包括隐式全局变量声明,省略var声明),变量名作全局对象的属性,值为undefined

简单梳理Redux的源码与运行机制

前几天写了一篇react另一个状态管理工具Unstated的源码解析。开启了我的看源码之路。想一想用了好长时间的redux,但从没有深究过原理,遇到报错更是懵逼,所以就啃了一遍它的源码,写了这篇文章,

深入解析 Node.js 事件循环工作机制

本文从对线程、事件循环、事件循环常见的问题和错误上分别进行说明,进一步探索了 Node 的核心工作原理。每当人们谈论 Node.js 时,都会出现很多问题,比如它 究竟是什么 、这项技术有什么用、它是否 有未来 等等。

这一次,彻底弄懂 JavaScript 执行机制

javascript是一门单线程语言,Event Loop是javascript的执行机制.牢牢把握两个基本点,以认真学习javascript为中心,早日实现成为前端高手的伟大梦想!

JavaScript运行机制浅析

输出结果是undefined, 这种现象被称成“预解析”:JavaScript引擎会优先解析var变量和function定义。在预解析完成后,才会执行代码。如果一个文档流中包含多个script代码段(用script标签分隔的js代码或引入的js文件)

请介绍一下MySQL数据库的锁机制?

当多个用户并发地存取数据时,在数据库中就会产生多个事务同时存取同一数据的情况。若对并发操作不加控制就可能会读取和存储不正确的数据,破坏数据库的一致性。

JavaScript预解释是一种毫无节操的机制

js代码执行之前,浏览器首先会默认的把所有带var和function的进行提前的声明或者定义:1.理解声明和定义、2.对于带var和function关键字的在预解释的时候操作不一样的、3.预解释只发生在当前的作用域下

js执行机制

js是单线程的,为什么可以执行异步操作呢?这归结与浏览器(js的宿主环境)通过某种方式使得js具备了异步的属性。进程:正在运行中的应用程序。每个进程都自己独立的内存空间。例如:打开的浏览器就是一个进程。

理解Redis的内存回收机制

Redis的过期策略都有哪些?内存淘汰机制都有哪些?手写一下LRU代码实现?笔者结合在工作上遇到的问题学习分析,希望看完这篇文章能对大家有所帮助。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!