摘要：避免與進行比較避免推薦與進行比較的代碼，可以用以下技術進行替換如果值是一個應用類型，使用操作符，檢查其構造函數如果值是基本類型，使用檢查其類型如果是希望對象包含某個特定的方法名，則只用操作符確保指定名字的方法存在于對象上。

持續更新地址  https://wdd.js.org/js-best-pr...

一千個讀者有一千個哈姆雷特，每個人都有自己的code style。我也曾為了要不要加分號給同事鬧個臉紅脖子粗，實際上有必要嗎？ 其實JavaScript已經有了比較流行的幾個風格

JavaScript Standard Style

Google JavaScript Style Guide

Airbnb JavaScript Style Guide

我自己使用的是JavaScript Standard Style, 我之所以使用這個，是因為它有一些工具。可以讓你寫完代碼后，一旦保存，就自動幫你把你的風格的代碼修正成標準分割，而不是死記硬背應該怎么寫。看完這個頁面，你就應該立馬愛上JavaScript Standard Style , 如果你用vscode, 恰好你有寫vue, 你想在.vue文件中使用standard風格，那么你需要看看這篇文章

很多時候，我們不是從零開始，開發新代碼。而是去維護別人的代碼，以他人的工作成果為基礎。確保自己的代碼可維護，是贈人玫瑰，手留余香的好事。一方面讓別人看的舒服，另一方面也防止自己長時間沒看過自己的代碼，自己都難以理解。

可維護的代碼的一些特征

可理解易于理解代碼的用途

可適應數據的變化，不需要完全重寫代碼

可擴展要考慮未來對核心功能的擴展

可調試給出足夠的信息，讓調試的時候，確定問題所在

不可分割函數的功能要單一，功能粒度不可分割，可復用性增強

統一的縮進方式

注釋

空白行

一般使用4個空格

不用制表符的原因是它在不同編輯器里顯示效果不同

函數和方法

大段代碼

復雜的算法

hack

方法之間

方法里的局部變量和第一個語句之間

單行或者多行注釋

方法內衣個邏輯單元之間

// Good
if (wl && wl.length) {

    for (i = 0, l = wl.length; i < l; ++i) {
        p = wl[i];
        type = Y.Lang.type(r[p]);
        
        if (s.hasOwnProperty(p)) {
        
            if (merge && type == "object") {
                Y.mix(r[p], s[p]);
            } else if (ov || !(p in r)) {
                r[p] = s[p];
            }
        }
    }
}

There are only two hard problem in Computer Science cache invalidation and naming things.---Phil Karlton

駝峰式命名

變量名以名詞開頭

方法名以動詞開頭

常量全部大寫

構造函數以大寫字母開頭

jQuery對象以"$"符號開頭

自定義事件處理函數以“on”開頭

// Good
var count = 10;
var myName = "wdd";
var found = true;

// Bad: Easily confused with functions
var getCount = 10;
var isFound = true;

// Good
function getName() {
    return myName;
}

// Bad: Easily confused with variable
function theName() {
    return myName;
}

// Bad:
var btnOfSubmit = $("#submit");

// Good:
var $btnOfSubmit = $("#submit");

// Bad:給App添加一個處理聊天事件的函數，一般都是和websocket服務端推送消息相關
App.addMethod("createChat",function(res){
    App.log(res);
});
// Bad: 此處調用,這里很容易誤以為這個函數是處理創建聊天的邏輯函數
App.createChat();

// Good: 
App.addMethod("onCreateChat",function(res){
    App.log(res);
});
// Good：此處調用
App.onCreateChat();

變量命名不僅僅是一種科學，更是一種藝術。總之，要短小精悍，見名知意。有些名詞可以反應出變量的類型。

對于http請求的最常用的四種方法，get,post,put,delete，有一些常用的名詞與其對應

var MAX_COUNT = 10;
var URL = "http://www.nczonline.net/";

// Good
function Person(name) {
    this.name = name;
}
Person.prototype.sayName = function() {
    alert(this.name);
};
var me = new Person("wdd");

建議使用“_”開頭，例如App._getUsers();而對于接口函數的封裝，例如App.getUsers(),內部邏輯調用App._getUsers();

全部使用小寫字母

單詞之間的間隔使用“-”

eg：

app-main.js
app-event.js
app-user-manger.js

自己寫的js文件最好和引用的一些第三方js分別放置在不同的文件夾下。

alert的缺點

如果你用alert來顯示提醒消息，那么用戶除了點擊alert上的的確定按鈕外，就只能點擊上面的關閉，或者選擇禁止再選擇對話框，除此以外什么都不能操作。

有些瀏覽器如果禁止了alert的選項，那么你的alert是不會顯示的

如果你在try catch語句里使用alert，那么console里將不會輸出錯誤信息，你都沒辦法查看錯誤的詳細原因，以及儲出錯的位置。

更優雅的提醒方式

console.log() 普通提示消息

console.error() 錯誤提示消息

console.info() 信息提示消息

console.warn() 警告提示消息

html文件中盡可能避免寫js語句

盡量避免在js更改某個css類的屬性，而使用更改類的方法

不要在css中寫js的表達式

解耦應用邏輯和事件處理程序

//一般事件訂閱的寫法，以jQuery的寫法為栗子
$(document).on("click","#btn-get-users",function(event){
    event.stopPropagation();
    
    //下面的省略號表示執行獲取所有用于并顯示在頁面上的邏輯
    // Bad
    ...
    ...
    ...
    //
});

如果增加了需求，當點擊另外一個按鈕的時候，也要執行獲取所有用戶并顯示在頁面上，那么上面省略的代碼又要復制一份。如果接口有改動，那么需要在兩個不同的地方都要修改。
所以，應該這樣。

$(document).on("click","#btn-get-users",function(event){
    event.stopPropagation();
    
    //將應用邏輯分離在其他個函數中
    // Good
    App.getUsers();
    App.renderUsers();
});

不要將event對象傳給其他方法，只傳遞來自event對象中的某些數據

任何事件處理程序都應該只處理事件，然后把處理轉交給應用邏輯。

// Bad
ReqApi.tenant.queryUsers({},function(res){
    if(!res.success){
        console.error(res);
        return;
    }
    
    //對數據的處理
    ...
    ...
    ...
});    

上面代碼對數據的處理直接寫死在異步請求里面，如果換了一個請求，但是數據處理方式是一樣的，那么又要復制一遍數據處理的代碼。最好的方式是將數據處理模塊化成為一個函數。

// Good
ReqApi.tenant.queryUsers({},function(res){
    if(!res.success){
        console.error(res);
        return;
    }
    
    //對數據的處理
    App.renderUsers(res.data);
}); 

異步請求只處理請求，不處理數據。函數的功能要專一，功能粒度不可分割。

如果你需要一個函數去驗證輸入框是否是空，如下。這種方式就會綁定死了這個只能驗證id為test的輸入框，換成其他的就不行

// bad
function checkInputIsEmpty(){
    var value = $("#test").val();
    if(value){
        return true;
    }
    else{
        return false;
    }
}

// good 
function isEmptyInput(id){
    var value = $("#"+id).val();
    if(value){
        return true;
    }
    else{
        return false;
    }
}

javascript動態性質是的幾乎任何東西在任何時間都能更改，這樣就很容易覆寫了一些默認的方法。導致一些災難性的后果。如果你不負責或者維護某個對象，那么你就不能對它進行修改。

不要為實例或原型添加屬性

不要為實例或者原型添加方法

不要重定義存已存在的方法

// Bad 兩個全局變量
var name = "wdd";
funtion getName(){
    console.log(name);
}

// Good 一個全局變量
var App = {
    name:"wdd",
    sayName:funtion(){
        console.log(this.name);//如果這個函數當做回調數使用，這個this可能指向window,
    }
};

單一的全局變量便是命名空間的概念，例如雅虎的YUI,jQuery的$等。

funtion sortArray(values){
    // 避免
    if(values != null){
        values.sort(comparator);
    }
}

function sortArray(values){
    // 推薦
    if(values instanceof Array){
        values.sort(compartor);
    }
}

如果值是一個應用類型，使用instanceof操作符，檢查其構造函數

如果值是基本類型，使用typeof檢查其類型

如果是希望對象包含某個特定的方法名，則只用typeof操作符確保指定名字的方法存在于對象上。

代碼中與null比較越少，就越容易確定代碼的目的，消除不必要的錯誤。

配置數據是一些硬代碼(hardcoded)，看下面的栗子

function validate(value){
    if(!value){
        alert("Invalid value");
        location.href = "/errors/invalid.php";
    }
}

上面代碼里有兩個配置數據，一個是UI字符串("Invalid value"),另一個是一個Url("/error/invalid.php")。如果你把他們寫死在代碼里，那么如果當你需要修改這些地方的時候，那么你必須一處一處的檢查并修改，而且還可能會遺漏。

顯示在UI元素中的字符串

URL

一些重復的唯一值

一些設置變量

任何可能改變的值

var Config = {
    "MSG_INVALID_VALUE":"Invalid value",
    "URL_INVALID":"/errors/invalid.php"
}

在開發過程中，可能隨處留下幾個console.log,或者alert語句，這些語句在開發過程中是很有價值的。但是項目一旦進入生產環境，過多的console.log可能影響到瀏覽器的運行效率，過多的alert會降低程序的用戶體驗。而我們最好不要在進入生產環境前，一處一處像掃雷一樣刪除或者注釋掉這些調試語句。

最好的方式是設置一個開關。

//全局命令空間
var App = {
    debug:true,
    log:function(msg){
        if(debug){
            console.log(msg);
        }
    },
    alert:function(msg){
        if(debug){
            alert(msg);
        }
    }
};

//使用
App.log("獲取用戶信息成功");
App.alert("密碼不匹配");

//關閉日志輸出與alert
App.debug = false;

沒使用promise之前的回調函數寫法

// bad：沒使用promise之前的回調函數寫法
function sendRequest(req,successCallback,errorCallback){
    var inputData = req.data || {};
    inputData = JSON.stringify(inputData);
    $.ajax({
        url:req.base+req.destination,
        type:req.type || "get",
        headers:{
            sessionId:session.id
        },
        data:inputData,
        dataType:"json",
        contentType : "application/json; charset=UTF-8",
        success:function(data){
            successCallback(data);
        },
        error:function(data){
            console.error(data);
            errorCallback(data);
        }
    });
}

//調用
sendRequest(req,function(res){
    ...
},function(res){
    ...
});

使用promise之后

function sendRequest(req){
    var dfd = $.Deferred();
    var inputData = req.data || {};
    inputData = JSON.stringify(inputData);
    $.ajax({
        url:req.base+req.destination,
        type:req.type || "get",
        headers:{
            sessionId:session.id
        },
        data:inputData,
        dataType:"json",
        contentType : "application/json; charset=UTF-8",
        success:function(data){
            dfd.resolve(data);
        },
        error:function(data){
            dfd.reject(data);
        }
    });
    
    return dfd.promise();
}

//調用
sendRequest(req)
.done(function(){
    //請求成功
    ...
})
.fail(function(){
    //請求失敗
    ...
});

假如前端要去接口獲取用戶信息并顯示出來，如果你的請求格式是正確的，但是接口返回400以上的錯誤，你必須通過提醒來告知測試，這個錯誤是接口的返回錯誤，而不是前端的邏輯錯誤。

對資源的操作包括獲取、創建、修改和刪除資源，這些操作正好對應HTTP協議提供的GET、POST、PUT和DELETE方法。

對應方式

說明

有些接口雖然是獲取某一個資源，但是它使用的卻是POST請求，所以建議使用.get比較好

示例：

// 與用戶相關的接口
App.api.user = {};

// 獲取一個用戶: 一般來說是一個指定的Id，例如userId
App.api.user.getUser = function(){
    ...
};

// 獲取一組用戶: 一般來說是一些條件，獲取條件下的用戶，篩選符合條件的用戶
App.api.user.getUsers = function(){
    ...
};

// 創建一個用戶
App.api.user.createUser = function(){
    
};

// 創建一組用戶
App.api.user.createUsers = function(){
    
};

// 更新一個用戶
App.api.user.updateUser = function(){
    
};

// 更新一組用戶
App.api.user.updateUsers = function(){
    
};

// 更新一個用戶
App.api.user.updateUser = function(){
    
};

// 更新一組用戶
App.api.user.updateUsers = function(){
    
};

// 刪除一個用戶
App.api.user.deleteUser = function(){
    
};

// 刪除一組用戶
App.api.user.deleteUsers = function(){
    
};

避免全局查找

避免with語句

優化循環

減值迭代：從最大值開始，在循環中不斷減值的迭代器更加高效

簡化終止條件：由于每次循環過程都會計算終止條件，所以必須保證它盡可能快。也就是避免其他屬性查找

簡化循環體：由于循環體是執行最多的，所以要確保其最大限度地優化。

展開循環

避免雙重解釋：

// **Bad** 某些代碼求值
eval("alert("hello")");

// **Bad** 創建新函數
var sayHi = new Function("alert("hello")");

// **Bad** 設置超時
setTimeout("alert("hello")");

性能的其他注意事項

原生方法較快

switch語句較快：可以適當的替換ifelse語句case 的分支不要超過128條

位運算符較快

// 方式1：Bad
var count = 5;
var name = "wdd";
var sex = "male";
var age = 10;

// 方式2：Good
var count = 5,
    name = "wdd",
    sex = "male",
    age = 10;

2017-03-07 理論上方式2可能要比方式1性能高一點。但是我在實際使用中，這個快一點幾乎是沒什么感受的。就像你無法感受到小草的生長一樣。反而可讀性更為重要。所以，每行最好只定義一個變量，并且每行都有一個var,并用分號結尾。

// Good
var name = values[i++];

// Good
var values = ["a","b","c"];

var person = {
    name:"wdd",
    age:10
};

只要有可能，盡量使用數組和對象字面量的表達式來消除不必要的語句

在JavaScript各個方面中，DOM無疑是最慢的一部分。DOM操作與交互要消耗大量的時間。因為他們往往需要重新渲染整個頁面或者某一部分。進一步說，看似細微的操作也可能花很久來執行。因為DOM要處理非常多的信息。理解如何優化與DOM的交互可以極大的提高腳本完成的速度。

使用dom緩存技術

最小化現場更新

使用innerHTML插入大段html

使用事件代理

調用頻率非常高的dom查找，可以將DOM緩存在于一個變量中

// 最簡單的dom緩存

var domCache = {};

function myGetElement(tag){
    return domCache[tag] = domCache[tag] || $(tag);
}

// 先看下面的極端情況
app.user.mother.parent.home.name = "wdd"
app.user.mother.parent.home.adderess = "上海"
app.user.mother.parent.home.weather = "晴天"

// 更優雅的方式
var home = app.user.mother.parent.home;
home.name = "wdd";
home.address = "上海",
home.weather = "晴天"

注意
使用上面的方式是有前提的，必須保證app.user.mather.parent.home是一個對象，因為對象是傳遞的引用。如果他的類型是一個基本類型，例如：number,string,boolean，那么復制操作僅僅是值傳遞，新定義的home的改變，并不會影響到app.user.mather.parent.home的改變。

+"4.1" === 4.1

4.1+"" === "4.1"

"4.99" | 0 === 4

建議讀者自行擴展

DRY(dont"t repeat yoursele: 不要重復你自己)

高內聚低耦合

開放閉合

最小意外

單一職責(single responsibility)

javascript內置類型檢測并不可靠

safari某些版本（<4）typeof正則表達式返回為function

建議使用Object.prototype.toString.call()方法檢測數據類型

function isArray(value){
    return Object.prototype.toString.call(value) === "[object Array]";
}

function isFunction(value){
    return Object.prototype.toString.call(value) === "[object Function]";
}

function isRegExp(value){
    return Object.prototype.toString.call(value) === "[object RegExp]";
}

function isNativeJSON(){
    return window.JSON && Object.prototype.toString.call(JSON) === "[object JSON]";
}

對于ie中一COM對象形式實現的任何函數，isFunction都返回false，因為他們并非原生的javascript函數。

在web開發中，能夠區分原生與非原生的對象非常重要。只有這樣才能確切知道某個對象是否有哪些功能

以上所有的正確性的前提是：Object.prototype.toString沒有被修改過

function Person(name){
    this.name = name;
}

//使用new來創建一個對象
var one = new Person("wdd");

//直接調用構造函數
Person();

由于this是運行時分配的，如果你使用new來操作，this指向的就是one。如果直接調用構造函數，那么this會指向全局對象window,然后你的代碼就會覆蓋window的原生name。如果有其他地方使用過window.name, 那么你的函數將會埋下一個深藏的bug。

那么，如何才能創建一個作用域安全的構造函數？

function Person(name){
    if(this instanceof Person){
        this.name = name;
    }
    else{
        return new Person(name);
    }
}

假設有一個方法X，在A類瀏覽器里叫A,在b類瀏覽器里叫B,有些瀏覽器并沒有這個方法,你想實現一個跨瀏覽器的方法。

惰性載入函數的思想是：在函數內部改變函數自身的執行邏輯

function X(){
    if(A){
        return new A();
    }
    else{
        if(B){
            return new B();
        }
        else{
            throw new Error("no A or B");
        }
    }
}

換一種寫法

function X(){
    if(A){
        X = function(){
            return new A();
        };
    }
    else{
        if(B){
            X = function(){
                return new B();
            };
        }
        else{
            throw new Error("no A or B");
        }
    }
    
    return new X();
}

// 下面代碼在谷歌瀏覽器中執行
> var person = {name: "wdd"};
undefined
> Object.preventExtensions(person);
Object {name: "wdd"}
> person.age = 10
10
> person
Object {name: "wdd"}
> Object.isExtensible(person)
false

密封對象不可擴展，并且不能刪除對象的屬性或者方法。但是屬性值可以修改。

> var one = {name: "hihi"}
undefined
> Object.seal(one)
Object {name: "hihi"}
> one.age = 12
12
> one
Object {name: "hihi"}
> delete one.name
false
> one
Object {name: "hihi"}

最嚴格的防篡改就是凍結對象。對象不可擴展，而且密封，不能修改。只能訪問。

函數節流的思想是：某些代碼不可以沒有間斷的連續重復執行

var processor = {
    timeoutId: null,

    // 實際進行處理的方法
    performProcessing: function(){
        ...
    },

    // 初始化調用方法
    process: function(){
        clearTimeout(this.timeoutId);

        var that = this;

        this.timeoutId = setTimeout(function(){
            that.performProcessing();
        }, 100);
    }
}

// 嘗試開始執行
processor.process();

頁面如果有十個區域要動態顯示當前時間，一般來說，可以用10個定時來實現。其實一個中央定時器就可以搞定。

中央定時器動畫 demo地址：http://wangduanduan.coding.me...

var timers = {
        timerId: 0,
        timers: [],
        add: function(fn){
            this.timers.push(fn);
        },
        start: function(){
            if(this.timerId){
                return;
            }

            (function runNext(){
                if(timers.timers.length > 0){
                    for(var i=0; i < timers.timers.length ; i++){
                        if(timers.timers[i]() === false){
                            timers.timers.splice(i, 1);
                            i--;
                        }
                    }

                    timers.timerId = setTimeout(runNext, 16);
                }
            })();
        },
        stop: function(){
            clearTimeout(timers.timerId);
            this.timerId = 0;
        }
    };

推薦閱讀：JS函數式編程中文版

使用input的時候，一定要加上maxlength屬性。（你以為只需要輸入一個名字的地方，用戶可能復制一篇文章放進去。）

從input取值的時候，最好去除一下首尾空格

ajax在使用的時候，例如點擊按鈕，獲取某個列表。需要注意以下方面

ajax請求還沒有結束時，按鈕一定要disabled，防止多次點擊。請求結束時，才去掉按鈕的disabled屬性。

請求沒結束的時候，一定要顯示一個gif的動畫，告訴用戶請求還在loading。不要讓用戶以為這垃圾程序又卡死了。

請求的結果如果是空的，一定要告訴用戶: 很抱歉，暫時沒有查詢到相關記錄之類的話語。不要給一個空白頁面給用戶。

最好考慮到請求報錯的情況，給出友好的錯誤提醒。

盡量將所有代碼封裝在函數中，不要暴露全局變量

每個函數的函數體中，代碼行越少越好，最好一個函數中就一句代碼

如果你認為前端不需要關于協議的知識，那么你就是大錯特錯了。其實不僅僅是前端，所有的開發者都應該學習底層的協議。因為他們是互聯網通信的基石。

推薦三本必讀的書籍

HTTP權威指南

圖解TCP/IP : 第5版

圖解HTTP

或者你一也可以看看關于協議方面的一些問題，以及如果你遇到過，你是否知道如何解決：

可能被遺漏的https與http的知識點

啞代理 - TCP鏈接高Recv-Q，內存泄露的罪魁禍首

編寫可讀代碼的藝術

編寫可維護的JavaScript

JavaScript忍者秘籍（第2版）

JavaScript語言精粹

HTTP權威指南

圖解TCP/IP : 第5版

圖解HTTP

代碼整潔之道

Writing Fast, Memory-Efficient JavaScript

JavaScript 秘密花園

You-Dont-Know-JS

關于緩存，你應該鏈接的一切

JS函數式編程中文版

筑巢引鳳-高黏度社會化網站設計秘訣

黑客與畫家

JavaScript高級程序設計(第3版) 【美】尼古拉斯·澤卡斯

Maintainable JavaScript (英文版) Nicholas C. Zakas(其實和上邊那本書應該是同一個人)

JavaScript忍者秘籍 John Resig / Bear Bibeault （John Resig 大名鼎鼎jQuery的創造者）

百度前端研發部 文檔與源碼編寫風格

js函數式編程指南

JavaScript SDK Design Guide: JavaScript-sdk設計指南