Javascrit Tips & Tricks

前端开发规范系列文章之Javascript Tips and Tricks，本意是写成常用代码收集、常用技巧整理的文章，感觉“常用代码大全”太土、“实用代码整理”有失偏颇，“提示与技巧”不够稳重，所以使用常用的英语说法，相信广大程序员都懂得。

##妙味
Javascript美妙之处，需要我们静静体会，慢慢吸收，然后让代码在您指下曼舞。整理的这些代码我们称之为妙味，请大家细品。
博主会不断更新本文，方便大家阅读起见，我们采用倒序更新的方式，把最新更新的放最上方。

事件处理

我们知道IE和标准浏览器在事件处理方面有很大不同，所以我们在使用的时候需要首先进行统一化处理，统一处理时有两种方式，shim和polyfill。
shim将新的api引入新的环境中，例如下面的代码使用addEvent和removeEvent来添加删除事件。

// Shim for DOM Events for IE7-
// http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
// Use addEvent(object, event, handler) instead of object.addEventListener(event, handler)
window.addEvent = function(obj, type, fn) {
	if (obj.addEventListener) {
		obj.addEventListener(type, fn, false);
	} else if (obj.attachEvent) {
		obj["e" + type + fn] = fn;
		obj[type + fn] = function() {
			var e = window.event;
			e.currentTarget = obj;
			e.preventDefault = function() {
				e.returnValue = false;
			};
			e.stopPropagation = function() {
				e.cancelBubble = true;
			};
			e.target = e.srcElement;
			e.timeStamp = Date.now();
			obj["e" + type + fn].call(this, e);
		};
		obj.attachEvent("on" + type, obj[type + fn]);
	}
};

window.removeEvent = function(obj, type, fn) {
	if (obj.removeEventListener) {
		obj.removeEventListener(type, fn, false);
	} else if (obj.detachEvent) {
		obj.detachEvent("on" + type, obj[type + fn]);
		obj[type + fn] = null;
		obj["e" + type + fn] = null;
	}
};

polyfill让旧浏览器支持新功能，使用方式和标准浏览器一样，例如下面的EventListener polyfill在IE9-浏览器上实现addEventListener、removeEventListener、dispatchEvent和customEvent等。

//
this.Element && Element.prototype.attachEvent && !Element.prototype.addEventListener && (function () {
	function addToPrototype(name, method) {
		Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method;
	}
	// add
	addToPrototype("addEventListener", function (type, listener) {
		var
		target = this,
		listeners = target.addEventListener.listeners = target.addEventListener.listeners || {},
		typeListeners = listeners[type] = listeners[type] || [];

		// if no events exist, attach the listener
		if (!typeListeners.length) {
			target.attachEvent("on" + type, typeListeners.event = function (event) {
				var documentElement = target.document && target.document.documentElement || target.documentElement || { scrollLeft: 0, scrollTop: 0 };

				// polyfill w3c properties and methods
				event.currentTarget = target;
				event.pageX = event.clientX + documentElement.scrollLeft;
				event.pageY = event.clientY + documentElement.scrollTop;
				event.preventDefault = function () { event.returnValue = false };
				event.relatedTarget = event.fromElement || null;
				event.stopImmediatePropagation = function () { immediatePropagation = false; event.cancelBubble = true };
				event.stopPropagation = function () { event.cancelBubble = true };
				event.target = event.srcElement || target;
				event.timeStamp = +new Date;

				// create an cached list of the master events list (to protect this loop from breaking when an event is removed)
				for (var i = 0, typeListenersCache = [].concat(typeListeners), typeListenerCache, immediatePropagation = true; immediatePropagation && (typeListenerCache = typeListenersCache[i]); ++i) {
					// check to see if the cached event still exists in the master events list
					for (var ii = 0, typeListener; typeListener = typeListeners[ii]; ++ii) {
						if (typeListener == typeListenerCache) {
							typeListener.call(target, event);

							break;
						}
					}
				}
			});
		}

		// add the event to the master event list
		typeListeners.push(listener);
	});

	// remove
	addToPrototype("removeEventListener", function (type, listener) {
		var
		target = this,
		listeners = target.addEventListener.listeners = target.addEventListener.listeners || {},
		typeListeners = listeners[type] = listeners[type] || [];

		// remove the newest matching event from the master event list
		for (var i = typeListeners.length - 1, typeListener; typeListener = typeListeners[i]; --i) {
			if (typeListener == listener) {
				typeListeners.splice(i, 1);

				break;
			}
		}

		// if no events exist, detach the listener
		if (!typeListeners.length && typeListeners.event) {
			target.detachEvent("on" + type, typeListeners.event);
		}
	});

	// dispatch
	addToPrototype("dispatchEvent", function (eventObject) {
		var
		target = this,
		type = eventObject.type,
		listeners = target.addEventListener.listeners = target.addEventListener.listeners || {},
		typeListeners = listeners[type] = listeners[type] || [];

		try {
			return target.fireEvent("on" + type, eventObject);
		} catch (error) {
			if (typeListeners.event) {
				typeListeners.event(eventObject);
			}

			return;
		}
	});

	// CustomEvent
	Object.defineProperty(Window.prototype, "CustomEvent", {
		get: function () {
			var self = this;

			return function CustomEvent(type, eventInitDict) {
				var event = self.document.createEventObject(), key;

				event.type = type;
				for (key in eventInitDict) {
					if (key == 'cancelable'){
						event.returnValue = !eventInitDict.cancelable;
					} else if (key == 'bubbles'){
						event.cancelBubble = !eventInitDict.bubbles;
					} else if (key == 'detail'){
						event.detail = eventInitDict.detail;
					}
				}
				return event;
			};
		}
	});

	// ready
	function ready(event) {
		if (ready.interval && document.body) {
			ready.interval = clearInterval(ready.interval);

			document.dispatchEvent(new CustomEvent("DOMContentLoaded"));
		}
	}

	ready.interval = setInterval(ready, 1);

	window.addEventListener("load", ready);
})();

!this.CustomEvent && (function() {
	// CustomEvent for browsers which don't natively support the Constructor method
	window.CustomEvent = function CustomEvent(type, eventInitDict) {
		var event;
		eventInitDict = eventInitDict || {bubbles: false, cancelable: false, detail: undefined};

		try {
			event = document.createEvent('CustomEvent');
			event.initCustomEvent(type, eventInitDict.bubbles, eventInitDict.cancelable, eventInitDict.detail);
		} catch (error) {
			// for browsers which don't support CustomEvent at all, we use a regular event instead
			event = document.createEvent('Event');
			event.initEvent(type, eventInitDict.bubbles, eventInitDict.cancelable);
			event.detail = eventInitDict.detail;
		}

		return event;
	};
})();

置乱数组

Javascript中置乱数组的一种方式，sort方法可以接受一个 函数为参数，当函数返回值为1的时候就交换两个数组项的顺序，否则就不交换。如下代码所示。

yourArray.sort(function() { return 0.5 - Math.random() });

但是这种方式执行效率比较低，我还需探索更为高效的置乱方式。

/* 添加原型方法的方式 */
Array.prototype.shuffle = Array.prototype.shuffle || function(){
	for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
    return this;
};

这种方式已经比较高效，但是可控性不强，不能指定随机方法，我们又进行了改进。

/* 带参数的置乱数组原型方法 * copy默认值为false，copy为true时 ，返回置乱的数组，不影响数组本身 * rng为置乱函数，默认为Math.random * */
 * copy默认值为false，copy为true时 ，返回置乱的数组，不影响数组本身
 * rng为置乱函数，默认为Math.random
 * */
Array.prototype.shuffle = Array.prototype.shuffle || function(copy, rng){
	var that = this,                  //保证原数组不受影响
		i = this.length,              //循环指针，初始值为数组长度
	    r,                            //随机数
	    t;                            //交换时的临时变量
	
	copy = copy || false;             //参数默认值
	rng = rng || Math.random;
	copy&&(that=this.slice());        //copy为true时，生成新的数组that
	while(i){
		r = Math.floor(rng() * i);    //生成随机数
		t=that[--i];                  //交换数值
		that[i]=that[r];
		that[r]=t;
	}
	return that;                      //返回置乱后数组
}

删除字符串中的空格(Trim String)

es5中具有删除空格的原生方法String.trimLeft()、 String.trimRight()和 String.trim()，这些方法在标准浏览器中兼容性良好，trim方法在ie 9+兼容良好，trimLeft和trimRight在IE中不兼容，不兼容的浏览器我们需要使用polyfill。

/* e5中trim方法的polyfill */
String.prototype.trim = String.prototype.trim || function () {
    return this.replace(/^\s+|\s+$/g, "");
};
String.prototype.trimLeft = String.prototype.trimLeft || function () {
    return this.replace(/^\s+/, "");
};
String.prototype.trimRight = String.prototype.trimRight || function () {
    return this.replace(/\s+$/, "");
};
String.prototype.trimFull = String.prototype.trimFull || function () {
    return this.replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g, "").replace(/\s+/g, " ");
};

//使用
"  hello   world   ".trimRight();    //"  hello   world"
"  hello   world   ".trimLeft();     //"hello   world   "
"  hello   world   ".trim();         //"hello   world"
"  hello   world   ".trimFull();     //"hello world"

检测html标签属性

有的时候我们想知道某个元素是否具备某属性，我们可以使用该函数检测。

//检测属性
function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
}
//简化版检测属性
function elementSupportsAttribute(element, attribute) {
    return !!(attribute in document.createElement(element));
};
//使用,检测textarea元素的placeholder属性
elementSupportsAttribute("textarea", "placeholder")?alert("ok"):alert("not");

尽量使用“===”

在javascript中，==和===都表示相等，但是==会在需要的时候进行类型转换，而===则不会进行类型转换，会比较数据类型和数据数值，比==执行速度快。

[10] === 10    // is false
[10] ==  10    // is true
'10' === 10    // is false
'10' ==  10    // is true
 []  === 0     // is false
 []  ==  0     // is true
 ''  === false // is false 
 ''  ==  false // is true but true == "a" is false

悬挂(Hoisting)

首先来看段代码，大家先猜下运行结果。

var a = 1;
function go(){
    console.log(a);
    var a = 2;
}
go();

运行结果为： undefined，你猜对了吗？我们接下来看看为啥？
悬挂，也即所有函数体内的变量声明（注意，仅仅是声明）都将被提到函数体开头进行。所以上面这段代码实际上是这样执行的。

var a;
a = 1;
function go(){
    var a;
    console.log(a);
    a = 2;
}
go();

立即调用函数表达式(IIFE)

立即调用函数表达式(IIFE, Immediately Invoked Function Expressions)是Javascript里面常用特性，我们可以利用它“避免污染全局变量”、“解决闭包冲突”、“只执行一次的函数”、“减少重复创建比较大的对象的开销（常见在一些工具函数内部，保存正则对象，数组，长字符串等对象”等。

/*简化版的IIFE*/
(function(){
	//您的代码
})();

模拟块作用域，避免污染全局变量，常见的插件即是如此。

/* jquery1.9.0的写法 */
(function( window, undefined ) {
	//非常长的代码
})( window );

解决闭包冲突，我们知道闭包可以让“函数内部所定义的函数持有外层函数的执行环境”，然而也有可能有些问题，例如下面的代码。

var f1 = function() {
    var res = [];
    var fun = null;
    for(var i = 0; i < 10; i++) {
        fun = function() { console.log(i);};//产生闭包
        res.push(fun);
    }
    
    return res;
}
// 会输出10个10，而不是预期的0 1 2 3 4 5 6 7 8 9
var res = f1();
for(var i = 0; i < res.length; i++) {
    res[i]();
}

我们可以使用IIFE解决这个问题，修正过的代码如下。

var f1 = function() {
    var res = [];
    for(var i = 0; i < 10; i++) {
        // 添加一个IIFE，立即执行
        (function(index) {
            fun = function() {console.log(index);};
            res.push(fun);
        })(i);
    }

    return res;
}

// 输出结果为0 1 2 3 4 5 6 7 8 9
var res = f1();
for(var i = 0; i < res.length; i++) {
    res[i]();
}

模拟单例，javascript中我们可以使用IIFE实现OOP。

var counter = (function(){
    var i = 0; 
    return {
        get: function(){
            return i;
        },
        set: function( val ){
            i = val;
        },
        increment: function() {
            return ++i;
        }
    };
}());

counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5

配合逻辑运算符使用，例如addEventListener的polyfill可以这么写。

/*把IIFE和逻辑运算符配合使用，检测是否需要运行polyfill*/
this.Element && 
Element.prototype.attachEvent && !Element.prototype.addEventListener && 
(function () {
	//polyfill
}

逻辑运算符妙用

使用&&和||条件运算符，我们可以达到简化操作的目的，来看下面代码。

/* code one */
​if (!theTitle) {
  theTitle  = "Untitled Document";
}
//使用||
theTitle  = theTitle || "Untitled Document";

/* code two */
function isAdult(age) {
  if (age && age > 17) {
  return true;
}
​else {
  return false;
  }
}
//使用 &&
function isAdult(age) {
   return age && age > 17 ;
}

/* code three*/
if (userName) {
  logIn (userName);
}
 else {
   signUp ();
}
//混合使用&&、||
userName && logIn (userName) || signUp ();

/*code four*/
var userID;
​if (userName && userName.loggedIn) {
  userID = userName.id;
}
​else {
  userID = null;
}
//使用&&、||
var userID = userName && userName.loggedIn && userName.id

##深入
本文的写作过程大量参考了以下文章，大家可以仔细阅读下面文章获得更深的体会。

• 45 Useful JavaScript Tips, Tricks and Best Practices
• 12 Simple (Yet Powerful) JavaScript Tips
• 13 JavaScript Tips & Tricks
• 21 JavaScript Tips And Tricks For JavaScript Developers
• CSS-Tricks Javascript Snippets
• JavaScript Snippets
• JavaScript Snippets
• 5 Array Methods That You Should Be Using Now
• JS-Tricks
• ten-useful-javascript-tips-best-practices
• javascript-performance-tips-tricks
• Superpower your JavaScript with 10 quick tips - For Beginners

##声明
前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！
欢迎任何形式的转载，烦请注明装载，保留本段文字。
本文原文链接，http://blog.csdn.net/whqet/article/details/43865127
欢迎大家访问独立博客http://whqet.github.io