Javascript Tips & Tricks

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

妙味

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

ceshi

立即调用函数表达式(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 9var 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 9var 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 */functionisAdult(age) {if (age && age > 17) {
  returntrue;
}
?else {
  returnfalse;
  }
}
//使用 &&functionisAdult(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

声明

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