javascript編程小技巧

testbird 發布于2019-08-20 13:43 / 3292人閱讀

摘要：源碼的代碼質量很高，非常值得我等小輩學習。上面的技巧，若有任何不對，歡迎指正，也歡迎補充過段時間一定要寫源碼閱讀筆記好怕打臉逃

其實主要是性能小技巧。

循環優化

循環體是執行最多的，所以要確保其被最大限度的優化.

//提前計算好終止條件，存到局部變量中
for(var i=0, j = document.getElementsByTagName("a").length; i
避免 for-in 循環
for(in)的效率極差，因為它需要查詢散列鍵，只要可以，就應該盡量少用
//要遍歷一個集合內的元素，用for,while,do..while代替
//這是vue源碼中的一段，作者用for(;;)循環代替了for...in
var keys = Object.keys(obj);
  for (var i = 0, l = keys.length; i < l; i++) {
    this.convert(keys[i], obj[keys[i]]);
  }
多個類型一起聲明
var option="option";
var event="event";
var method="method";

//可替換為 
var option="option",
    event="event",
    method="method";
    

類型轉換
+"010" === 10; //+可以把字符串變成整數
Number("010") === 10;
parseInt("010", 10) === 10;
10 + "" === "10";//也可以把整數變成字符串

+new Date() // timestamp
+new Date;
使用三目運算符替代條件分支
//將條件從最可能到最不可能進行排列,減少探測次數
 if (a > b) {
    num = a;
} else {
    num = b;
}
//可以替換為：
num = a > b ? a : b;
巧用||和&&布爾運算符
//源碼中這種運算符操作很多，尤其是jQuery源碼
item && item.$value || item;
var id = typeof asset === "function" ? asset.options && asset.options.name || asset.id : asset.name || asset.id;

用局部變量代替全局變量
無論是DOM節點，普通變量，還是對象屬性，若需重復使用，通通存成局部變量，避免多次取值的調用開銷
 //vue源碼
var p = Cache.prototype;
p.put = function (key, value) {}

//jquery源碼
var deletedIds = [];
var slice = deletedIds.slice;
var concat = deletedIds.concat;
var push = deletedIds.push;
var indexOf = deletedIds.indexOf;
DOM節點鏈式操作
//鏈式操作會自動緩存
$(".test").find(".btn").css("backgroundColor","#f30").click();
修改CSS類，而不是樣式
尤其是在修改多個樣式時，修改css類只會引起一次回流，而修改樣式會引起多次回流。
插入迭代器
var name=values[i]; 
i++;

//替換為
var name=values[i++]
使用字面量
var aTest = new Array(); 
var aTest = new Object; 
var reg = new RegExp(); 
var oFruit = new O;
oFruit.color = "red";
oFruit.name = "apple";

//分別替換為
var aTest = []; 
var aTest = {}; 
var reg = /d/i; //只在有變量時才用new RegExp()
var oFruit = { color: "red", name: "apple" };
使用一次innerHTML賦值代替構建dom元素
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement("p");
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);
//可以替換為：
var html = [];
for (var i = 0; i < 1000; i++) {
    html.push("" + i + "");
}
document.body.innerHTML = html.join("");
盡量使用原生方法
var container = document.createElement("div");
container.appendChild(el.cloneNode(true));
避免with語句
with語句會創建自己的作用域，因此會增加其中執行的代碼的作用域鏈的長度，所以能不用的時候就不要用。
with (a.b.c.d) {
    property1 = 1;
    property2 = 2;
}
//可以替換為：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;
ps:有些代碼性能雖高，但是可能會降低閱讀性與可維護性，或者與團隊的規范沖突，所以這個需要自己在可讀性，團隊規范性與代碼性能之間權衡。
感言
上面羅列的都是我覺得經常會用到的，看一遍，用心記一下，很easy～～可能以后會不定時更新，看自己get到的情況～～
我也是最近才注意到這些“潛規則”，正巧最近也在看vue的源碼，然后就發現:基本上網上能查到的性能優化的方面，或者編程的技巧都能在vue源碼中找到佐證。vue源碼的代碼質量很高，非常值得我等小輩學習。
上面的技巧，若有任何不對，歡迎指正，也歡迎補充～～
過段時間一定要寫源碼閱讀筆記（好怕打臉～～逃）

云服務器 GPU云服務器小技巧 JAVASCRIPT技巧小技巧全集 javascript七大技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81203.html

19+ 個 JavaScript 快速編程技巧 — SitePoint

摘要：常規寫法速記法判斷變量是否存在速記法這可能會有些瑣碎，但是值得一提。常規寫法速記法注意這兩個例子并不是完全相等，只要變量是一個真值，該表達式就是成立的。 19+ 個 JavaScript 快速編程技巧 — SitePoint 這確實是一篇針對于基于 JavaScript 語言編程的開發者必讀的文章。在過去幾年我學習 JavaScript 的時候，我寫下了這篇文章，并將其作為 JavaS...

RobinTang 2019-08-20 18:00 評論0 收藏0
19+ 個 JavaScript 快速編程技巧 — SitePoint

摘要：常規寫法速記法判斷變量是否存在速記法這可能會有些瑣碎，但是值得一提。常規寫法速記法注意這兩個例子并不是完全相等，只要變量是一個真值，該表達式就是成立的。 19+ 個 JavaScript 快速編程技巧 — SitePoint 這確實是一篇針對于基于 JavaScript 語言編程的開發者必讀的文章。在過去幾年我學習 JavaScript 的時候，我寫下了這篇文章，并將其作為 JavaS...

wow_worktile 2019-08-01 17:10 評論0 收藏0
學Java編程需要注意的地方

摘要：學編程真的不是一件容易的事不管你多喜歡或是多會編程，在學習和解決問題上總會碰到障礙。熟練掌握核心內容，特別是和多線程初步具備面向對象設計和編程的能力掌握基本的優化策略。　　學Java編程真的不是一件容易的事,不管你多喜歡或是多會Java編程，在學習和解決問題上總會碰到障礙。工作的時間越久就越能明白這個道理。不過這倒是一個讓人進步的機會，因為你要一直不斷的學習才能很好的解決你面前的難題...

leanxi 2019-08-14 17:48 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0