往期回顾:

jQuery的XX如何实现?——1.框架

jQuery的XX如何实现?——2.show与链式调用

jQuery的XX如何实现?——3.data与cache机制

--------------------------

源码链接:内附实例代码

jQuery使用许久了,但是有一些API的实现实在想不通。于是抽空看了jQuery源码,现在把学习过程中发现的一些彩蛋介绍给大家(⊙0⊙)。

下面将使用简化的代码来介绍,主要关注jQuery的实现思想~>_<~

相较于第一篇(与第二、三篇无相关性),代码更新了:26~40

本章主要通过isFunction、isWindow、isNumberic三个的工具方法来学习类型检测和工具方法的定义。

 (function(window, undefined){

     function jQuery(sel){
return new jQuery.prototype.init(sel);
} jQuery.prototype = {
constructor: jQuery,
init: function(sel){
if(typeof sel === 'string'){
var that = this;
var nodeList = document.querySelectorAll(sel);
Array.prototype.forEach.call(nodeList, function(val, i){
that[i] = val;
})
this.selector = sel;
this.length = nodeList.length;
}
}
} jQuery.prototype.init.prototype = jQuery.prototype; window.$ = jQuery; jQuery.isFunction = function(obj) {
return typeof obj === 'function';
} //window.window 有点意思
jQuery.isWindow = function(obj) {
return obj && obj === obj.window;
} jQuery.isNumberic = function(obj) {
//return typeof obj === 'number';
//return Object.prototype.toString.call(obj) === '[object Number]'; //发现情况一模一样
//return !isNaN(obj) && isFinite(obj); //漏了null
return !isNaN(parseFloat(obj)) && isFinite(obj);
} })(window);

--------------------------

类型检测属于工具方法里的一种。可以看出,工具方法是直接绑定在jQuery对象下的。

isFunction的方法实现起来非常简单,内部使用typeof检测一下就ok了o(≧v≦)o~~

jQuery.isFunction = function(){
return typeof obj === 'function';
} //外部调用
$.isFunction(fun1);

 --------------------------

isWindow实现起来需要点技巧:全局变量都绑定在window下,window本身也在全局变量中,所以可以通过window访问window。

//(⊙0⊙) 有点意思
window.window.window

使用这个小技巧,可以写出代码:

jQuery.isWindow = function(obj) {
return obj && obj === obj.window;
//觉得可以简化成
//return window === obj;
}

--------------------------

最后来个稍复杂点的isNumberic(isNumber),我们先列出所有可能的验证数据:

1, '1', '1cm', 'cm1', 2e64, '2e64', NaN, Infinity, null

先试试用typeof检测一下

jQuery.isNumberic = function(obj) {
return typeof obj === 'number';
}

看完结果,怒吼一声,typeof你个垃鸡ψ(╰_╯):

突然灵机一动,可以试一下用Object.prototype.toString来检测,说干就干:

jQuery.isNumberic = function(obj) {
return Object.prototype.toString.call(obj) === '[object Number]';
}

发现,结果一模一样(⊙0⊙)。

没办法,只能得先回到typeof。只差这四个没检测过了,分析一下,立马想到isNaN和isFinite两个函数。

'1', '2e64', NaN, Infinity

假装写了代码,然后发现isNaN和isFinite两者一结合,把typeof的事情也干了。于是顺理成章地删掉typeof,得到:

【不知道这两个函数的作用,直接拉到最下面,有贴心的小例子╰( ̄▽ ̄)╮】

jQuery.isNumberic = function(obj) {
return !isNaN(obj) && isFinite(obj);
}

运行一下,看完有点小激动,只剩下null了o(≧v≦)o~~:

分析后,是因为isFinite(null)返回true。

最后代码可修改为注释那行,jQuery源码中为未注释那行,目测效果都一样(⊙0⊙):

jQuery.isNumberic = function(obj) {
return !isNaN(parseFloat(obj)) && isFinite(obj);
//return obj!=null && !isNaN(obj) && isFinite(obj)
}

最后发现漏检查了undefined,测试之后发现没问题~>_<~+

--------------------------

附录

isFinite函数的功能

isNaN函数的功能:

jQuery的XX如何实现?——4.类型检查的更多相关文章

  1. 编程笔记:JavaScript 中的类型检查

    在Badoo的时候我们写了大量的JS脚本,光是在我们的移动web客户端上面就有大概60000行,可想而知,维护这么多JS可是相当具有挑战性的.在写如上规模js脚本客户端应用的时候我们必须对一件事保持警 ...

  2. 细说Typescript类型检查机制

    上一篇文章我介绍了Typescript的基础知识,回顾一下,有基础数据类型.数组.函数.类.接口.泛型等,本节内容将述说一下Typescript为方便我们开发提供了一些类型检查机制. 类型检查机制 类 ...

  3. 编译器开发系列--Ocelot语言6.静态类型检查

    关于"静态类型检查",想必使用C 或Java 的各位应该非常熟悉了.在此过程中将检查表达式的类型,发现类型不正确的操作时就会报错.例如结构体之间无法用+ 进行加法运算,指针和数值之 ...

  4. Java中静态类型检查是如何进行的

    以下内容来自维基百科,关于静态类型检查和动态类型检查的解释: 静态类型检查:基于程序的源代码来验证类型安全的过程: 动态类型检查:在程序运行期间验证类型安全的过程: Java使用静态类型检查在编译期间 ...

  5. jQuery的XX如何实现?——3.data与cache机制

    往期回顾: jQuery的XX如何实现?——1.框架 jQuery的XX如何实现?——2.show与链式调用 -------------------------- 源码链接:内附实例代码 jQuery ...

  6. jQuery的XX如何实现?——2.show与链式调用

    往期回顾: jQuery的XX如何实现?——1.框架 -------------------------- 源码链接:内附实例代码 jQuery使用许久了,但是有一些API的实现实在想不通.于是抽空看 ...

  7. jQuery的XX如何实现?——1.框架

    源码链接:内附实例代码 jQuery使用许久了,但是有一些API的实现实在想不通.于是抽空看了jQuery源码,现在把学习过程中发现的一些彩蛋介绍给大家(⊙0⊙). 下面将使用简化的代码来介绍,主要关 ...

  8. Flow: JavaScript静态类型检查工具

    Flow: JavaScript静态类型检查工具 Flow是Facebook出品的,针对JavaScript的静态类型检查工具.其代码托管在github之上,并遵守BSD开源协议. 关于Flow 它可 ...

  9. Swift类型检查与转换

    继承会发生在子类和父类中,如图所示,是一系列类的继承关系类图,Person是类层次结构中的根类,Student是Person的直接子类,Worker是Person的直接子类.这个继承关系类图的具体实现 ...

随机推荐

  1. CRC

    #define POLY 0x1021 /** * Calculating CRC-16 in 'C' * @para addr, start of data * @para num, length ...

  2. flex4.0密钥及破解方式

    输入下面的序列号: 1424-4507-0757-7016-8907-6937 1424-4785-4428-8084-6314-8733 1424-4794-9281-8063-2338-9079 ...

  3. js中的单体对象

  4. SVM1 线性SVM

    一.Linear Support Vector Machine 接下来的讨论假设数据都是线性可分的. 1.1 SVM的引入:增大对测量误差的容忍度 假设有训练数据和分类曲线如下图所示: 很明显,三个分 ...

  5. machine learning----->学习成绩

    斯坦福大学机器学习公开课学习成绩:

  6. detection reading

    1512.07729v1 G-CNN an Iterative Grid Based Object Detector,先基于空间金字塔生成很多矩形框,然后把这些矩形框作为regions,进行fast ...

  7. ZT 理解 Android 上的安全性

    理解 Android 上的安全性 http://www.ibm.com/developerworks/cn/xml/x-androidsecurity/ 利用沙箱.应用程序签名和权限增强应用程序安全性 ...

  8. iOS7.0适配问题

    self.navigationController.navigationBar.translucent = YES,导航栏透明 extendedLayoutIncludesOpaqueBars = Y ...

  9. C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位

    使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...

  10. android中掩码的使用

    掩码是一串二进制代码对目标字段进行位与运算,屏蔽当前的输入位,所以有时又称为屏蔽码. 在Android中常使用这种技巧设置flag来判断标记,具体实现可参考framework层的WindowManag ...