1.使用全等===比較符

if (zeroAsAString === 0) { // 判斷為false }
在和null進行比較的時候，允許使用 == 比較符

2.使用 .parseInt() 的時候，總是指定第二個 'radix' 參數

parseInt("08", 10)

3.避免比較true 和 false

if (foo === true) { // 用了 === 倒是不錯，可這是多余的 } if (foo) { // 贊！ }

4.避免污染全局命名空間

// 用 settings 作為對象命名 var settings = { settingA: true, settingB: false, settingC: "test" }

5.駝峰法變量命名

var xPosition = obj.scrollLeft;

6.循環的性能 - 緩存數組長度

?

var toLoop = new Array(1000); for (var i = 0; i < toLoop.length; i++) { // 敗家玩意 - 長度會反復算 1000 次你知道不？ } for (var i = 0, len = toLoop.length; i < len; i++) { // 會過日子 - 長度只計算一次，然后緩存了 }

例外

如果你對一個數組做循環來查找并刪除某個元素，這就會改變數組長度。任何時候你只要會在循環內部增加或刪除元素來改變數組的長度，你就給自己帶來了麻煩。這種情況下，你要么每次改變后重新設置數組長度，要么就別緩存它了。
7.循環的性能 - 使用 'break;' 和 'continue;'

　　break 直接跳出 不再往下執行
　　continue 跳出本次 接著執行

var bigArray = new Array(1000); for (var i = 0, len = bigArray.length; i < len; i++) { if (i === 500) { break; } console.log(i); // 這樣只會輸出 0 - 499 }

8.函數調用不要傳輸太多的參數

下面的例子預先構建了一個對象作為參數，或者把內聯對象傳遞過去，這樣就好多了。

function greet(user) { alert(user.name); } greet({ name: "Bob", gender: "male" });

9.盡量減少重新繪制和重新布局

var myList = document.getElementById("myList"); for (var i = 0, len = arr.length; i < len; i++) { myList.innerHTML += "<li>" + arr[i].title + "</li>"; //重新布局 -- 增加到元素 }

在上面的?for?循環里，每次迭代會觸發一次重新布局。10次迭代就是10次重新布局。

現在考慮下面的代碼：

var constructedHTML = ""; for (var i = 0, len = arr.length; i < len; i++) { constructedHTML += "<li>" + arr[i].title + "</li>"; //沒有重新布局 - 增加到字符串 } document.getElementById("myList").innerHTML = constructedHTML; //在這里重新布局

10.設置ID

function S4() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } function guid() { return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); }

11.使用 data-* 屬性

<div id="test" data-is-bool="true" data-some-number="123"></div>

?

轉載于:https://www.cnblogs.com/hzx-5/p/9372806.html

總結

以上是生活随笔為你收集整理的前端技巧-w3c的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。