Rain Thinks

在当前项目中，圆角和线性渐变用得是越来越广泛了，并且常常同时使用。 总所周知，IE9目前还不支持`background`的`linear-gradient`属性，要通过IE私有滤镜来实现：

.gradient-bg { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#0091d2', endColorstr = #09415b, GradientType = 0); /* IE6-9 */ /* Other vendors here */ background: linear-gradient(top, #0091d2 0%, #09415b 100%); /* W3C*/ }

但在IE9在同时使用border-radius和渐变滤镜时，会有如下bug：

.gradient-bg { height:300px; width:300px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#0091d2', endColorstr = #09415b, GradientType = 0); /* IE6-9 */ background: -webkit-linear-gradient(top, #0091d2, #09415b); /* Chrome */ background: linear-gradient(top, #0091d2 0%, #09415b 100%); /* W3C */ border-radius: 5em; border:3px solid red; }

<div class="gradient-bg"></div>​

#### IE9  #### Chrome  [Demo 1](http://jsfiddle.net/rainthinks/JF8AJ/) 目前只找到一个不算完美的解决方案：

.wrapper { width:300px; border-radius: 5em; border:3px solid red; overflow:hidden; /* Key */ } .gradient-bg { height:300px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#0091d2', endColorstr = #09415b, GradientType = 0); /* IE6-9 */ background: -webkit-linear-gradient(top, #0091d2, #09415b); /* Chrome */ background: linear-gradient(top, #0091d2 0%, #09415b 100%); /* W3C */ }​

<div class="wrapper"><div class="gradient-bg"></div></div>​

### 1.Strict Mode简介 Strict Mode是ECMAScript 5中引入的新特性。使得ECMAScript 5在向后兼容ECMAScript 3的同时，允许显式地声明不兼容ECMAScript 3中Deprecated的语法。 ### 2.使用Strict Mode： 有两种方式来声明使用Strict Mode： 1.在Script开头声明全局使用Strict Mode

"use strict"; // your code here ...

2.在函数开头声明局部使用Strict Mode：

// non-strict code... function strictInside(){ "use strict"; // your code here... } // non-strict code...

3.最佳实践 在实践中，通常不使用全局的Strict Mode，因为在Script合并、压缩之后，Strict Mode会应用到所有Script，容易导致第三方的非Strict Mode脚本出错。所以通常采用局部Strict Mode：

// non-strict code... (function(){ "use strict"; // define your lib here. })(); // non-strict code...

### 3.Strict Mode中的限制 1.不能隐式的声明全局变量。

(function() { "use strict"; foo = "bar"; //Error //ReferenceError: foo is not defined })();

2.不能删除局部变量、函数或函数参数。

(function() { "use strict"; var foo = "test"; function bar(){} delete foo; // Error delete bar; // Error function test(arg) { delete arg; // Error } })(); //SyntaxError: Delete of an unqualified identifier in strict mode.

3.对象字面量中，不能重复定义属性。

(function() { "use strict"; var foo = { bar: true, bar: false } //Error })(); //SyntaxError: Duplicate data property in object literal not allowed in strict mode

3.不能覆盖eval、arguments。

(function() { "use strict"; var eval = function() {}; // Error var arguments = ['foo', 'bar']; //Error })(); //SyntaxError: Variable name may not be eval or arguments in strict mode (function(eval, arguments) { "use strict"; })(); //SyntaxError: Parameter name eval or arguments is not allowed in strict mode

4.函数参数不能重名。

"use strict"; function foo(bar, bar) {} //Error //SyntaxError: Strict mode function may not have duplicate parameter names

5.不能访问arguments.caller和arguments.callee

(function() { "use strict"; var caller = arguments.caller; //Error var callee = arguments.callee; //Error })(); //TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

6.不能使用with语句。

function() { "use strict"; var foo = {bar : "bar"}; with(foo) { console.log(bar); }; //SyntaxError: Strict mode code may not include a with statement }

###1. DateParser中的一个Bug 这是工作中遇到的一个真实案例，是一个DatePicker的parser里的bug。 需求很简单，就是将字符串转换成一个自定义的DateTime对象， DateTime中各字段分别以数字的形式存储Year, Month, Day, Hour, Minute, Second，Timezone等信息。 DateTime对象可以转化为JS中的Date对象。 所以刨去和本主题无关的细节，这个过程简化为：将日期的字符串分解成数字表示的Year, Month, Date，然后用来构造JS Date对象。代码如下：

/** * 将形如"MM-DD-YYYY"格式的字符串解析成Date实例。 */ function parseDate(date_str) { var date_arr = date_str.split('-'); return new Date(parseInt(date_arr[2]), //Year parseInt(date_arr[0])-1, //Month parseInt(date_arr[1]) //Date ); }

一些测试数据：

parseDate('10-01-2012'); //Correct: Mon Oct 01 2012 parseDate('10-07-2012'); //Correct: Mon Oct 07 2012 /* Alert !! */ parseDate('10-08-2012'); //Incorrect: Sun Sep 30 2012 parseDate('10-10-2012'); //Correct: Mon Oct 10 2012

奇怪的事随后就发生了。'10-08-2012'被解析成了2012年9月30号。而其他的都是对的。这个问题让大家头疼了好一阵，因为压根都没人发现选了日期之后，存入数据库的竟然不是自己选的。 经过一系列排查，最后发现root cause正是parseInt。 这里要回顾一下parseInt的函数声明：

/* * 将字符串解析成数字时，从左向右依此解析，解析到第一个非法字符即停止。 * 若指定radix为2-36之间的数字，则按相应的进制进行解析； * 若radix指定为1，或大于36的数字，则直接返回NaN * 若指定radix为0，或未指定radix，则根据字符串开头字符确定: * 以'1-9'开头的字符串，按10进制解析； * 以'0'开头的字符串，按8进制解析； * 以'0x'或'0X'开头的字符串，按16进制解析。 * * @param string 要被解析的字符串。 * @param radix 表示要解析的数字的基数。该值介于 2 ~ 36 之间。 */ parseInt(string, radix)

由此可见，当Month, Date在'01'到'09'之间，都是按8进制解析，之后则按10进制解析。 '01'到'07'，按8进制或10进制解析会得到相同的结果。 而'08'，'09'按8进制解析会得到'0'，因为'8'、'9'在8进制中是非法字符，不会被解析。 由此导致上述的bug。 找到问题根源，修复就变得很简单了，显示指定radix为10：

function parseDate(date_str) { var date_arr = date_str.split('-'); return new Date(parseInt(date_arr[2], 10), //Year parseInt(date_arr[0], 10)-1, //Month parseInt(date_arr[1], 10) //Date ); } //Fixed parseDate('10-08-2012'); //Correct: Mon Oct 08 2012

### 替代`setInterval`: setInterval（callback, interval)的本意为：每隔interval毫秒，执行一次回调函数。 但因为JS单线程的缘故，setInterval只能保证每隔interval毫秒，将回调函数*插入到执行队列*，而不能保证*按时执行*。 当执行线程被阻塞，回调函数执行时间会被推迟。这会导致回调函数不再是每间隔interval执行一次。更极端的情况下，若执行间隔较小，执行线程阻塞较多时，会导致回调函数被堆积起来，导致页面假死。 此时可采用递归的setTimout替代setInterval。使用递归的setTimeout可以保证回调函数在上一次执行后的interval毫秒后插入执行队列。以次改善上述情况。

//before setInterval(function() { process(); }, interval); //after setTimeout(function() { process(); setTimeout(arguments.callee, interval); }, interval);

### 数组分段处理 由于浏览器中JS是单线程执行，为了避免因脚本死循环而使浏览器失去响应，在JS执行时间过长时，浏览器通常会弹出提示框，让用户选择是否终止脚本: - IE： 500万条JS语句 - Firefox：10s - Safari： 5s - Opera： 不会提示 - Chrome： 5～10s **弹出alert， confirm一类的对话框时，暂停计时。* 数据来自： [What determines that a script is long-running?](http://www.nczonline.net/blog/2009/01/05/what-determines-that-a-script-is-long-running/) 通常用户对浏览器失去相应的时间的忍受能力会更小。通常阻塞超过100ms，用户即可感觉到卡顿；超过1s则会打断用户的连续操作；超过3s用户会觉得难以忍受。 通常在针对大数组的复杂运算是，会导致较长的阻塞。针对这种情况，应该对数组进行分块处理。 分块处理有两种做法：按数量分组和按时间分组。

//before while(array.length>0) { this.process(array.shift()); } //by quantity function byQuantity(array, process, context, batchSize) { var items = array.slice(0); setTimeout(function() { var count = batchSize; while(items.length && count--) { process.call(context, items.shift()); } if (items.length>0) { setTimeout(arguments.callee, 25); } }, 25); } //by time throttle function byTime(array, process, context, throttle) { var items = array.slice(0); setTimeout(function(){ var start = new Date(); while (items.length > 0 && (new Date() - start < throttle)) { process.call(context, items.shift()); } if (items.length>0) { setTimeout(arguments.callee, 25); } }, 25); }

### 函数节流 有时会遇到事件被不断触发，进行一堆处理，但其实最后的结果只取决于最后那一次事件。我们可以通过忽略掉最后一个之前的部分事件，甚至全部事件，来避免不必要的计算。 onresize和onmousemove事件的handler就是很典型的例子：