第15页 Front-end Engineer，前端开发工程师目前是一名前端开发工程师，主要负责前端规划、框架与架构、前端性能优化。专注前端技术，关注交互体验，擅长web ajax开发。坚信前端工程师的价值是最终能把技术和设计完美结合在一起。用最新的技术方案巧妙地帮助这些设计得以实现。

javascript中对变量类型的判断 在 JavaScript 中，有 5 种基本数据类型和 1 种复杂数据类型，基本数据类型有：Undefined, Null, Boolean, Number和String；复杂数据类型是Object，Object中还细分了很多具体的类型，比如：Array, Function, Date等等。今天我们就来探讨一下，使用什么方法判断一个出一个变量的类型。在讲解各种方法之前，我们首先定义出几个测试变量，看看后面的方法究竟能把变量的类型解析成什么样子，以下几个变量差不多包含了我们在实际编码中常用的类型。var num = 123; var str = 'abcdef'; var bool = true; var arr = [1, 2, 3, 4]; var json = { name: 'wenzi', age: 25 }; var func = function () { console.log('this is function'); }; var und = undefined; var nul = null; var date = new Date(); var reg = /^[a-zA-Z]{5,20}$/; var error = new Error(); 1. 使用 typeof 检测 # 我们平时用的最多的就是用typeof检测变量类型了。这次，我们也使用typeof检测变量的类型：console.log( typeof num, typeof str, typeof bool, typeof arr, typeof json, typeof func, typeof und, typeof nul, typeof date, typeof reg, typeof error, ); // number string boolean object object function undefined object object object object 从输出的结果来看，arr, json, nul, date, reg, error 全部被检测为object类型，其他的变量能够被正确检测出来。当需要变量是否是number, string, boolean, function, undefined, json 类型时，可以使用typeof进行判断。其他变量是判断不出类型的，包括 null。还有，typeof是区分不出array和json类型的。因为使用 typeof 这个变量时，array 和 json 类型输出的都是object。 2. 使用 instance 检测 # 在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。例如：function Person() {} var Tom = new Person(); console.log(Tom instanceof Person); // true 我们再看看下面的例子：function Person(){ } function Student(){ } Student.prototype = new Person(); var John = new Student(); console.log(John instanceof Student); // true console.log(John instancdof Person); // true instanceof还能检测出多层继承的关系。好了，我们来使用instanceof检测上面的那些变量：console.log( num instanceof Number, str instanceof String, bool instanceof Boolean, arr instanceof Array, json instanceof Object, func instanceof Function, und instanceof Object, nul instanceof Object, date instanceof Date, reg instanceof RegExp, error instanceof Error, ); // num : false // str : false // bool : false // arr : true // json : true // func : true // und : false // nul : false // date : true // reg : true // error : true 从上面的运行结果我们可以看到，num, str 和 bool 没有检测出他的类型，但是我们使用下面的方式创建 num，是可以检测出类型的：var num = new Number(123); var str = new String('abcdef'); var boolean = new Boolean(true); 同时，我们也要看到，und 和 nul 是检测不成Object类型的，其他的类型也不对，因此，若要使用 instanceof 进行变量检测时，需要首先判断是否是 undefined 和 null。 3. 使用 constructor 检测 # 在使用instanceof检测变量类型时，我们是检测不到number, 'string', bool的类型的。因此，我们需要换一种方式来解决这个问题。constructor 本来是原型对象上的属性，指向构造函数。但是根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，因此，实例对象也是能使用 constructor 属性的。我们先来输出一下num.constructor的内容，即数字类型的变量的构造函数是什么样子的：function Number() { [native code] } 我们可以看到它指向了Number的构造函数，因此，我们可以使用num.constructor==Number来判断 num 是不是 Number 类型的，其他的变量也类似：function Person() {} var Tom = new Person(); // undefined和null没有constructor属性 console.log( Tom.constructor == Person, num.constructor == Number, str.constructor == String, bool.constructor == Boolean, arr.constructor == Array, json.constructor == Object, func.constructor == Function, date.constructor == Date, reg.constructor == RegExp, error.constructor == Error, ); // 所有结果均为true 从输出的结果我们可以看出，除了 undefined 和 null，其他类型的变量均能使用constructor判断出类型。不过使用 constructor 也不是保险的，因为 constructor 属性是可以被修改的，会导致检测出的结果不正确，例如：function Person() {} function Student() {} Student.prototype = new Person(); var John = new Student(); console.log(John.constructor == Student); // false console.log(John.constructor == Person); // true 在上面的例子中，Student 原型中的 constructor 被修改为指向到Person，导致检测不出实例对象 John 真实的构造函数。同时，使用 instaceof 和 construcor,被判断的 array 必须是在当前页面声明的！比如，一个页面（父页面）有一个框架，框架中引用了一个页面（子页面），在子页面中声明了一个 array，并将其赋值给父页面的一个变量，这时判断该变量，Array == object.constructor;会返回 false； 原因：1、array 属于引用型数据，在传递过程中，仅仅是引用地址的传递。2、每个页面的 Array 原生对象所引用的地址是不一样的，在子页面声明的 array，所对应的构造函数，是子页面的 Array 对象；父页面来进行判断，使用的 Array 并不等于子页面的 Array；切记，不然很难跟踪问题！ 4. 使用 Object.prototype.toString.call # 我们先不管这个是什么，先来看看他是怎么检测变量类型的：console.log( Object.prototype.toString.call(num), Object.prototype.toString.call(str), Object.prototype.toString.call(bool), Object.prototype.toString.call(arr), Object.prototype.toString.call(json), Object.prototype.toString.call(func), Object.prototype.toString.call(und), Object.prototype.toString.call(nul), Object.prototype.toString.call(date), Object.prototype.toString.call(reg), Object.prototype.toString.call(error), ); // '[object Number]' '[object String]' '[object Boolean]' '[object Array]' '[object Object]' // '[object Function]' '[object Undefined]' '[object Null]' '[object Date]' '[object RegExp]' '[object Error]' 从输出的结果来看，Object.prototype.toString.call(变量)输出的是一个字符串，字符串里有一个数组，第一个参数是 Object，第二个参数就是这个变量的类型，而且，所有变量的类型都检测出来了，我们只需要取出第二个参数即可。或者可以使用Object.prototype.toString.call(arr)=="object Array"来检测变量 arr 是不是数组。我们现在再来看看 ECMA 里是是怎么定义Object.prototype.toString.call的： Object.prototype.toString( ) When the toString method is called, the following steps are taken: Get the [[Class]] property of this object. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”. Return Result (2) 上面的规范定义了 Object.prototype.toString 的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于"[object Array]"的字符串作为结果（看过 ECMA 标准的应该都知道，[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为“内部属性”）。利用这个方法，再配合call，我们可以取得任何对象的内部属性[[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。 5. jQuery 中$.type 的实现 # 在 jQuery 中提供了一个$.type的接口，来让我们检测变量的类型：console.log( $.type(num), $.type(str), $.type(bool), $.type(arr), $.type(json), $.type(func), $.type(und), $.type(nul), $.type(date), $.type(reg), $.type(error), ); // number string boolean array object function undefined null date regexp error 看到输出结果，有没有一种熟悉的感觉？对，他就是上面使用Object.prototype.toString.call(变量)输出的结果的第二个参数呀。我们这里先来对比一下上面所有方法检测出的结果，横排是使用的检测方法， 竖排是各个变量： 类型判断 typeof instanceof constructor toString.call $.type num number false true [object Number] number str string false true [object String] string bool boolean false true [object Boolean] boolean arr object true true [object Array] array json object true true [object Object] object func function true true [object Function] function und undefined false - [object Undefined] undefined nul object false - [object Null] null date object true true [object Date] date reg object true true [object RegExp] regexp error object true true [object Error] error 优点 使用简单，能直接输出结果 能检测出复杂的类型 基本能检测出所有的类型 检测出所有的类型 - 缺点 检测出的类型太少 基本类型检测不出，且不能跨 iframe 不能跨 iframe，且 constructor 易被修改 IE6 下 undefined,null 均为 Object - 这样对比一下，就更能看到各个方法之间的区别了，而且Object.prototype.toString.call和$type输出的结果真的很像。我们来看看 jQuery（2.1.2 版本）内部是怎么实现$.type 方法的：// 实例对象是能直接使用原型链上的方法的 var class2type = {}; var toString = class2type.toString; // 省略部分代码... type: function(obj) { if ( obj == null ) { return obj + ""; } // Support: Android

jquery弹窗插件dialog 这几天工作上比较轻松，就想起了要写一个 jQuery 弹窗插件练练手。倒是实现了一些基本的功能，不过依然还有很多不完善的地方。源码可以在我的 github 上进行查看：【github-dialog】使用new $.wz.Dialog()即能调用出默认的窗口，同时，还对外提供了多个参数进行定制化：{ "width": "400", // 宽度 "height": "300", // 高度 "location": "center", // center, topleft(lefttop), topright(righttop), bottomleft(leftbottom), bottomright(rightbottom) "shade": true, // 是否需要遮罩 "shadeClose": true, // 点击遮罩是否关闭弹窗 "btn": [], // 要显示的按钮 {name:"确定" //按钮名称, close:false //点击后是否关闭弹窗, action:function(){} // 点击按钮要执行的方法} "ease": "fade", // 显示和隐藏形式 "title": "提示框", // 弹窗标题 "content": "内容加载中...", // 弹窗内容 "countdown": 0 // 倒计时的时间，若小于等于0则表示不启动倒计时 } 我们来看下面的几个例子： 例子 1 # 创建一个弹窗，内容是“hello world”，同时还有两个按钮，确定按钮不能关闭弹窗，取消按钮可以关闭弹窗。new $.wz.Dialog({ content: "hell world", btn: [ { name: "确定", close: false, // 不关闭弹窗 action: function () { alert("确定按钮"); }, }, { name: "取消", action: function () { alert("取消按钮"); }, }, ], }); 运行 例子 2 # 创建一个弹窗，不要遮罩，右上角弹出new $.wz.Dialog({ content: "hell world", shade: false, location: "topright", // 'righttop' btn: [ { name: "确定", }, ], }); 运行 例子 3 # 创建一个弹窗，点击遮罩时不能关闭弹窗，采用倒计时关闭弹窗new $.wz.Dialog({ content: "hell world", shadeClose: false, countdown: 5, // 大于0则启动倒计时，否则关闭 }); 运行 总结 # 在编写这个插件的过程中学到了很多的东西，没写的时候觉得写插件挺容易，可是真写起来发现就不是那么回事了。既然是插件，那就要考虑到通用的情况，把各种可能使用到的情况都考虑进去。不过依然还有很多改进的地方，比如： 在没有传入 title 的情况，应该默认隐藏 title 没有考虑IE6的兼容性 可能造成全局变量的污染，插件里是直接对.wz_dialog的 jQuery 元素进行操作的，若页面中存在相同的元素，则会受到这个插件的影响。 我会持续完善的，也希望各位能提出意见或建议。

jQuery中的工具方法$.isFunction, $.isArray(), $.isWindow() 在javascript 中对变量类型的判断中，我们讲解了了 jQuery 中$.type()实现的原理。当然，jQuery 除了提供$.type的工具方法外，还提供了几个其他的工具方法：$.isFunction(), $.isArray(), $.isWindow(), $.isNumeric()等。这几个方法从方法名上就能看出其用途来，下面我们来一一讲解这几个方法在 jQuery(2.1.2)中实现的内部细节。 1. $.isFunction() # $.isFunction()是用来判断变量是否为 function 类型，我们通过几个例子来看看：$.isFunction(123); // false $.isFunction(true); // false $.isFunction([1, 2]); // false $.isFunction(function () {}); // true function func() {} var sfunc = function () {}; $.isFunction(func); // true $.isFunction(sfunc); // true 从上面的例子中能够看到，在$.isFunction(param)中，若传入的 param 是 function 类型，则返回 true；其他的类型则返回 false。查看 jQuery 的源码我们可以看到，$.isFunction()也是通过$.type()实现的：isFunction: function(obj) { return jQuery.type(obj) === "function"; } 2. $.isArray() # $.isArray()是用来判断变量是否为 array 类型。同样，我们也通过几个例子来看看$.isArray 的用法：$.isArray(123); // false $.isArray(true); // false $.isArray([1, 2]); // true $.isArray(new Array(3, 4)); // true 无论是 array 的字面量还是使用new关键词创建的变量，都能使用$.isArray()判断其是 array 类型。在 jQuery 源码中，$.isArray 调用的就是原生 Array 提供的 isArray 方法。因为在高版本的浏览器中，已经给原生 JavaScript 提供了一个isArray方法用来判断变量是否为 array 类型。isArray: Array.isArray; 3. $.isWindow() # $.isWindow()是用来判断当前变量是否为window，如：$.isWindow(window); // true $.isWindow([]); // false $.isWindow(null); // false 在 jQuery 源码中：isWindow: function(obj) { return obj != null && obj === obj.window; } 他是通过判断 obj 是否有 window 属性，来判断 obj 是否为 window 对象。因为 window 对象里有一个属性 window，就是他自己，因此：window.window===window，同样的：window.window.window.window === window; 可以一直循环下去。而代码里为什么要先判断一下 obj 是否为 null 呢？因为在判断 null 或 undefined 是否有 window 属性时，代码会抛出异常：Uncaught TypeError: Cannot read property 'window' of null。因此，为了防止代码错误，首先判断变量是否为 null，若为 null，则它肯定不是 window 对象，直接返回 false；否则再判断这个变量有没有 window 属性。 4. $.isNumeric() # $.isNumeric()是用来判断当前变量是否为数字类型，可是为什么我不使用$.type()=="number"来判断呢。我们先来看几个官方的例子：$.isNumeric('-10'); // true $.isNumeric(16); // true $.isNumeric(0xff); // true $.isNumeric('0xFF'); // true $.isNumeric('8e5'); // true (exponential notation string) $.isNumeric(3.1415); // true $.isNumeric(+10); // true $.isNumeric(0144); // true (octal integer literal) $.isNumeric(''); // false $.isNumeric({}); // false (empty object) $.isNumeric(NaN); // false $.isNumeric(null); // false $.isNumeric(true); // false $.isNumeric(Infinity); // false $.isNumeric(undefined); // false 使用$.isNumeric()能够判断出**"-10"**, **"0xFF"**这样字符串类型的数字，而$.type()则会将其解析为 string 类型。在 jQuery 源码中，是这样判断变量类型的：isNumeric: function(obj) { // parseFloat NaNs numeric-cast false positives (null|true|false|"") // ...but misinterprets leading-number strings, particularly hex literals ("0x...") // subtraction forces infinities to NaN // adding 1 corrects loss of precision from parseFloat (#15100) return !jQuery.isArray( obj ) && (obj - parseFloat( obj ) + 1) >= 0; } 首先判断其变量是否为 array 类型，若是则直接返回 false。可是为什么要先判断变量是否为 array 类型呢？因为**[123]**这样类型的数组是可以直接进行减法运算的，同时也能通过 parseFloat(["123"])转换为数字：[100] - (60)[100] - // 40 [60]; // 40 parseFloat([123]); // 123 parseFloat(['345']); // 345 因此不能直接通过 parseFloat()转换，然后判断。首先得判断这个变量是否为数组；若不是才进行下一步的判断：obj - parseFloat(obj) + 1 >= 0; 纯数字，字符串类型的数字，0 开头的数字（8 进制），0x 开头的数组（16 进制）等，都能通过 parseFloat()正常进行转换为 10 进制的数字。经过上面表达式的运算，肯定是大于 0 的。可是为什么要加上 1 呢？代码里也解释了，通过 parseFloat()转换到，会造成精度丢失的问题，因此+1 后，运算结果更加的准确。而其他类型的通过 parseFloat()转换后得到的是NaN，NaN 无论通过怎样的运算，都是不能跟 0 比较的，返回 false。在 jQuery 之前的版本（如 2.0.2）中：isNumeric: function(obj) { return !isNaN( parseFloat(obj) ) && isFinite( obj ); } 我们可以发现，使用这样的代码$.isNumeric([123])运行后，得到的 true，而实际上，它是个数组类型。不过还好，在后续的版本已经修复了。 5. $.isEmptyObject() # $.isEmptyObject()不是用来判断变量的类型了，而是判断一个 object 类型是否为空，不包含任何属性。从 jQuery 1.4 开始，这个方法既检测对象本身的属性，也检测从原型继承的属性（因此没有使用 hasOwnProperty）。参数应当是一个普通的 JavaScript 对象， 对于其他类型的对象（DOM 元素，原始 strings/numbers，host 对象）在跨浏览器中可能无法提供一致的结果。$.isEmptyObject({ name: 'wenzi' }); // false $.isEmptyObject({}); // true function Person() { this.name = 'wenzi'; } $.isEmptyObject(new Person()); // false function Student() {} Student.prototype.name = 'wenzi'; $.isEmptyObject(new Student()); // false 我们能够看到，不论是对象本身的属性，还是 prototype 上的属性，只要存在，都会返回 false。isEmptyObject: function(obj) { var name; for ( name in obj ) { return false; } return true; } 在 jQuery 中，是通过for~in进行检测的。因为 for~in 也是能循环到 prototype 上的属性的，若进入到循环中，则说明 obj 存在属性，发挥 false；否则返回 true。 6. 总结 # jQuery 中还提供了很多各种各样的工具方法，让我们在编写 js 代码时更加的方便。以后有机会时再总结其他的工具方法。

使用CSS3实现圆形进度条 一般我们见到的进度条通常都是矩形的，从左往右开始推进，直到 100%；但是很少有圆形的进度条，本篇文章稍微讲解下如何使用 CSS3 实现圆形进度条。若是只要实现一个圆环的话，我们都能写出来，用border和border-radius就能画出来：.demo { width: 200px; height: 200px; border: 20px solid green; box-sizing: border-box; border-radius: 50%; } 但是这样的圆环不能动啊，而且能产生进度条效果的一个重要的因素就是得从 0 开始变化，而不是一个完整的圆环在旋转，这是没有意义的。首先说下我实现的思路： 把整个圆环分成左右两部分； 左右两部分都有半个圆环在旋转，比如先让右边的半圆环，旋转到正好接住了左半部分，然后左边的半圆环开始旋转。 1. 画右半圆环 # 我们先来设计下右半部分吧，html 结构如下： 里面的.rightcircle是半个圆环，样式如下：.right { position: relative; width: 100px; height: 200px; overflow: hidden; } .rightcircle { width: 200px; height: 200px; border: 20px solid transparent; border-radius: 50%; position: absolute; box-sizing: border-box; top: 0; right: 0; border-top: 20px solid green; border-right: 20px solid green; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); /* 旋转45度 */ } 当我们把这些样式写完的时候，看到的是这个样子的，因为使用的是 div 的上半边界和右半边界，因此需要旋转一下，才能正好是我们看到的半圆环： 因为外层的 div 有一个overflow:hidden属性，我们先把这个半圆旋转到 div 的另一边隐藏了，然后再慢慢改变这个半圆环的角度，让它显示出来不就行了。稍微计算下就可以知道，-135deg正好能隐藏在外层 div 的左半部分，即：.rightcircle { width: 200px; height: 200px; border: 20px solid transparent; border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; right: 0; border-top: 20px solid green; border-right: 20px solid green; transform: rotate(-135deg); /* 旋转45度时正好能显示半个圆，旋转-135度，正好能隐藏半个圆 */ } 20160226 更新这个-135deg 是怎么得出来的呢，我们来看下面的这张图：矩形的上边界和右边界正好是对应这上图圆形的上半部分和右半部分，旋转到左侧正好隐藏的话，那就是逆时针旋转-135deg 2. 为半圆添加动画 # 好了，半个圆已经隐藏住了，那么我们应该让它慢慢出来了，给.rightcircle添加一个动画：animation。/* 这里仅考虑webkit内核的情况，您可以写完整了 */ .rightcircle { -webkit-animation-name: circle_right; /* 动画名称 */ -webkit-animation-duration: 5s; /* 完成一个动画需要的时间 */ -webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */ -webkit-animation-iteration-count: infinite; /* 动画播放的次数，infinite是无限次数 */ } @-webkit-keyframes circle_right { 0% { transform: rotate(-135deg); } 100% { transform: rotate(45deg); } } 那么左半部分就正好相反喽，这里我就不写了，你可以尝试着写一下。 3. 大功告成 # 好了，让我们把左半部分和右半部分拼接起来：.circle_process { position: relative; width: 199px; height: 200px; } .circle_process .wrapper { width: 100px; height: 200px; position: absolute; top: 0; overflow: hidden; } .circle_process .right { right: 0; } .circle_process .left { left: 0; } .circle_process .circle { width: 200px; height: 200px; border: 20px solid transparent; border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; transform: rotate(-135deg); } .circle_process .rightcircle { border-top: 20px solid green; border-right: 20px solid green; right: 0; -webkit-animation: circle_right 5s linear infinite; } .circle_process .leftcircle { border-bottom: 20px solid green; border-left: 20px solid green; left: 0; -webkit-animation: circle_left 5s linear infinite; } @-webkit-keyframes circle_right { 0% { -webkit-transform: rotate(-135deg); } 50%, 100% { -webkit-transform: rotate(45deg); } } @-webkit-keyframes circle_left { 0%, 50% { -webkit-transform: rotate(-135deg); } 100% { -webkit-transform: rotate(45deg); } } 大功告成。 4. 额外功能 # 我们已经实现了一个圆形进度条，利用这个，我们可以实现一个小闹钟：function getTime() { var date = new Date(); var second = date.getSeconds(); var rightcircle = document.getElementById("rightcircle"); var leftcircle = document.getElementById("leftcircle"); var show = document.getElementById("show"); show.innerHTML = second; if (second