讀湯姆大叔《深刻理解javascript系列》筆記一編寫高質量代碼

感受大叔的博文真的是很不錯 我打算嚴格要求本身 按照大叔說的,這樣我就會更有規範,更有思想的去工做 去寫代碼(一入代碼深似海)
 
1,儘量的少用全局變量(污染全局空間,也會和別人的代碼 發生衝突形成嚴重的後果) ---->命名空間模式或者是函數當即自動執行.
 
2.不論是不是在函數內始終用var來聲明變量, 例如:
function sum(x, y){
 result = x + y;
//這裏建立了一個隱式全局變量
 return result;
}
 
3.避免出現隱式變量 例如在函數中不經過var聲明的變量 或者是沒有聲明的變量. (部分var聲明 例如)
function foo(){
var a = b = 0;
//這裏a是局部變量,可是b是全局變量
}
就比如   var a = (b = 0); 這行代碼同樣
PS: 
(1)經過var 建立的全局變量是不能被刪除的;
(2)無var建立的隱式所有變量 是能夠被刪除的 
var  global_var1 = 1;
global_var2 = 2;
delete global_var1; //false
delete global_var2;//true
4.聲明變量 不論是局部變量仍是全局變量 使用鏈分配是比較好的作法  例如
var a, b;  (變量的聲明儘量 var  和變量名字空開)--->
5.函數中的變量的置頂解析/預解析 例如:
function(){
alert(name);//undefined 而不是報錯是由於 我們的name變量已經解析只是尚未進行表達式的賦值 因此他的值是有的 就是undefined
var name = 'zero';
}
PS: 最好的辦法就是你提早聲明你須要的全部變量 並最數值肯定的時候進行表達式賦值
 
6.for循環
 
for(var i = 0;i<myarray.length; i++){
// do something  這不是一個好循環 (每次循環都要去讀取myarray的長度 若是 myarray 是一個HTMLCollection對象的時候)
// HTMLCollections指的是DOM方法返回的對象,例如:
//document.getElementsByName()
//document.getElementsByClassName()
//document.getElementsByTagName()
//每次查詢都要實時查選dom (操做dom是比較昂貴的)
}
優化方案以下:
(1)
for (var i = 0, max = myarray.length; i < max; i++) {
   // 使用myarray[i]作點什麼
}
(2)
for (var i = 0, max = myarray.length; i < max; i+=1) {
   // 使用myarray[i]作點什麼
}
(3)
var i, myarray = [];
for (i = myarray.length; i–-;) {
   // 使用myarray[i]作點什麼
}
 
5. for-in 循環應該用在非數組對象的遍歷上  也叫作"枚舉"
 
6. hasOwnProperty()方法---->過濾掉從原型鏈上下來的屬性 例如:
  var man = {
   hands: 2,
   legs: 2,
   heads: 1
};

Object.prototype.name='zero';
//console.log(man.name);//zero  在原型中添加了一個name屬性而且賦值爲zero
 
for (var i in man) {
   if (man.hasOwnProperty(i)) { // 過濾
      console.log(i, ":", man[i]);
   }
}
控制檯打印結果爲 
hands:2
legs:2
heads:1
(已經把原型中添加的屬性過濾掉了)
 
另一種使用hasOwnProperty()的形式是取消Object.prototype上的方法。像是:
 
for (var i in man) {
   if (Object.prototype.hasOwnProperty.call(man, i)) { // 過濾
      console.log(i, ":", man[i]);
   }
}
 
其好處在於在man對象從新定義hasOwnProperty狀況下避免命名衝突。也避免了長屬性查找對象的全部方法,你可使用局部變量「緩存」它。
 
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
    if (hasOwn.call(man, i)) { // 過濾
        console.log(i, ":", man[i]);
    }
}
 
PS: 不增長內置原型是最好的。
 
7. 避免隱式類型轉換-----> 始終使用===和!==操做符
 
8.避免 eval(); 此方法接受任意的字符串,並看成JavaScript代碼來處理 例如:
// 反面示例
var property = "name";
alert(eval("obj." + property));

// 更好的
var property = "name";
alert(obj[property]);
 
9. 不要給setInterval(), setTimeout()和Function()構造函數傳遞字符串----->請傳遞函數
 
// 反面示例
setTimeout("myFunc()", 1000);
setTimeout("myFunc(1, 2, 3)", 1000);

// 更好的
setTimeout(myFunc, 1000);
setTimeout(function () {
   myFunc(1, 2, 3);
}, 1000);
 
使用function來代替eval是不錯的選擇
 
var jsstring = "var un = 1; console.log(un);";
eval(jsstring); // logs "1"

jsstring = "var deux = 2; console.log(deux);";
new Function(jsstring)(); // logs "2"

jsstring = "var trois = 3; console.log(trois);";
(function () {
   eval(jsstring);
}()); // logs "3"

console.log(typeof un); // number
console.log(typeof deux); // "undefined"
console.log(typeof trois); // "undefined"
若是你絕對必須使用eval(),你 能夠考慮使用new Function()代替。有一個小的潛在好處,由於在新Function()中做代碼評估是在局部函數做用域中運行
eval()和Function構造不一樣的是eval()能夠干擾做用域鏈,而Function()更安分守己些 例如:
 
(function () {
   var local = 1;
   eval("local = 3; console.log(local)"); // logs "3"
   console.log(local); // logs "3"
}());

(function () {
   var local = 1;
   Function("console.log(typeof local);")(); // logs undefined
}());
 
10.parseInt()下的數值轉換 該方法接受另外一個基數參數,這常常省略,但不該該---->  爲了不矛盾和意外的結果,老是指定基數參數
 
11.parseInt() 替換方法是將字符串轉換成數字,包括:
+"08" // 結果是 8
Number("08") // 8
 
12.代碼必定要進行縮進具體縮進多少 一個tab? 兩個tab? 仍是空格? 要根據團隊的規範來執行
 
13.花括號必定不要省略就算你的花括號中只有一條語句 ----->  始終把在與以前的語句放在同一行:
 
function func() {
   return {
      name : "Batman"
   };
}
 
14.空格的使用
 
var d = 0,
    a = b + 1;
if (a && b && c) {
    d = a % c;
    a += d;
}
 
15.大寫字母寫構造函數:
var adam = new Person(); 
 
16. 構造函數--> 駝峯(Camel)命名法:
MyConstructor()
17.對於函數和方法名稱,變量也可使用小駝峯式命名法
calculateArea()getFirstName()
 
18. 所有單詞大寫;
var PI = 3.14,
 
19. 使用一個下劃線前綴來表示一個私有屬性或方法會更容易些
20.你要隨時註釋你的代碼我相信一個良好的程序員都會在每一個功能模塊加上本身的註釋 不爲了別人 爲了本身也須要
相關文章
相關標籤/搜索