标签：前端开发 规范 javascript tips tricks
前端开发规范系列文章之Javascript Tips and Tricks，本意是写成常用代码收集、常用技巧整理的文章，感觉“常用代码大全”太土、“实用代码整理”有失偏颇，“提示与技巧”不够稳重，所以使用常用的英语说法，相信广大程序员都懂得。
Javascript美妙之处，需要我们静静体会，慢慢吸收，然后让代码在您指下曼舞。整理的这些代码我们称之为妙味，请大家细品。
博主会不断更新本文，方便大家阅读起见，我们采用倒序更新的方式，把最新更新的放最上方。
立即调用函数表达式(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本文的写作过程大量参考了以下文章，大家可以仔细阅读下面文章获得更深的体会。
前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！
欢迎任何形式的转载，烦请注明装载，保留本段文字。
本文原文链接，http://blog.csdn.net/whqet/article/details/43865127
欢迎大家访问独立博客http://whqet.github.io
标签：前端开发 规范 javascript tips tricks
原文地址：http://blog.csdn.net/whqet/article/details/43865127
