Javascript 需要註意的細節

来源:http://www.cnblogs.com/iflygofy/archive/2017/07/07/7133279.html
-Advertisement-
Play Games

1.使用 代替 ==JavaScript 使用2種不同的等值運算符: |!== 和 ==|!=,在比較操作中使用前者是最佳實踐。“如果兩邊的操作數具有相同的類型和值, 返回true,!==返回false。”——JavaScript:語言精粹然而,當使用==和!=時,你可能會遇到類型不同的情況,這種情 ...


1.使用 === 代替 ==
JavaScript 使用2種不同的等值運算符:===|!== 和 ==|!=,在比較操作中使用前者是最佳實踐。
如果兩邊的操作數具有相同的類型和值,===返回true,!==返回false。”——JavaScript:語言精粹
然而,當使用==和!=時,你可能會遇到類型不同的情況,這種情況下,操作數的類型會被強制轉換成一樣的再做比較,這可能不是你想要的結果。

2.Eval == 邪惡
起初不太熟悉時,“eval”讓我們能夠訪問JavaScript的編譯器(譯註:這看起來很強大)。從本質上講,我們可以將字元串傳遞給eval作為參數,而執行它。
這不僅大幅降低腳本的性能(譯註:JIT編譯器無法預知字元串內容,而無法預編譯和優化),而且這也會帶來巨大的安全風險,因為這樣付給要執行的文本太高的許可權,避而遠之。

3.省略未必省事
從技術上講,你可以省略大多數花括弧和分號。大多數瀏覽器都能正確理解下麵的代碼:

if(someVariableExists) 
    x = false 

然後,如果像下麵這樣:

if(someVariableExists) 
   x = false 
   anotherFunctionCall(); 

有人可能會認為上面的代碼等價於下麵這樣:

if(someVariableExists) { 
   x = false; 
   anotherFunctionCall(); 
}

不幸的是,這種理解是錯誤的。實際上的意思如下:

if(someVariableExists) { 
   x = false; 
} 
anotherFunctionCall();

你可能註意到了,上面的縮進容易給人花括弧的假象。無可非議,這是一種可怕的實踐,應不惜一切代價避免。僅有一種情況下,即只有一行的時候,花括弧是可以省略的,但這點是飽受爭議的。

if(2 + 2 === 4) return 'nicely done'; 

未雨綢繆
很可能,有一天你需要在if語句塊中添加更多的語句。這樣的話,你必須重寫這段代碼。底線——省略是雷區。

4.將腳本放在頁面的底部
記住——首要目標是讓頁面儘可能快的呈獻給用戶,腳本的夾在是阻塞的,腳本載入並執行完之前,瀏覽器不能繼續渲染下麵的內容。因此,用戶將被迫等待更長時間。
如果你的js只是用來增強效果——例如,按鈕的單擊事件——馬上將腳本放在body結束之前。這絕對是最佳實踐。

5.避免在For語句內聲明變數
當執行冗長的for語句時,要保持語句塊的儘量簡潔,例如:
糟糕:

for(var i = 0; i < someArray.length; i++) { 
   var container = document.getElementById('container'); 
   container.innerHtml += 'my number: ' + i; 
   console.log(i); 
} 

註意每次迴圈都要計算數組的長度,並且每次都要遍歷dom查詢“container”元素——效率嚴重地下!
建議:

var container = document.getElementById('container'); 
for(var i = 0, len = someArray.length; i < len;  i++) { 
   container.innerHtml += 'my number: ' + i; 
   console.log(i); 
} 


6.構建字元串的最優方法
當你需要遍曆數組或對象的時候,不要總想著“for”語句,要有創造性,總能找到更好的辦法,例如,像下麵這樣。

var arr = ['item 1', 'item 2', 'item 3', ...]; 
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

我不是你心中神,但請你相信我(不信你自己測試)——這是迄今為止最快的方法!
使用原生代碼(如 join()),不管系統內部做了什麼,通常比非原生快很多。

7.減少全局變數
只要把多個全局變數都整理在一個名稱空間下,擬將顯著降低與其他應用程式、組件或類庫之間產生糟糕的相互影響的可能性。”——Douglas Crockford

var name = 'Jeffrey'; 
var lastName = 'Way'; 
function doSomething() {...} 
console.log(name); // Jeffrey -- 或 window.name
// 更好的做法
var DudeNameSpace = { 
   name : 'Jeffrey', 
   lastName : 'Way', 
   doSomething : function() {...} 
} 
console.log(DudeNameSpace.name); // Jeffrey 

註:這裡只是簡單命名為 "DudeNameSpace",實際當中要取更合理的名字。

8.給代碼添加註釋
似乎沒有必要,當請相信我,儘量給你的代碼添加更合理的註釋。當幾個月後,重看你的項目,你可能記不清當初你的思路。或者,假如你的一位同事需要修改你的代碼呢?總而言之,給代碼添加註釋是重要的部分。

// 迴圈數組,輸出每項名字(譯者註:這樣的註釋似乎有點多餘吧)
for(var i = 0, len = array.length; i < len; i++) {
   console.log(array[i]); 
}  


9.擁抱漸進增強
確保javascript被禁用的情況下能平穩退化。我們總是被這樣的想法吸引,“大多數我的訪客已經啟用JavaScript,所以我不必擔心。”然而,這是個很大的誤區。
你可曾花費片刻查看下你漂亮的頁面在javascript被關閉時是什麼樣的嗎?(下載 Web Developer 工具就能很容易做到(譯者註:chrome用戶在應用商店裡自行下載,ie用戶在Internet選項中設置)),這有可能讓你的網站支離破碎。作為一個經驗法則,設計你的網站時假設JavaScript是被禁用的,然後,在此基礎上,逐步增強你的網站。

10.不要給"setInterval"或"setTimeout"傳遞字元串參數
考慮下麵的代碼:

setInterval( 
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000 
);

不僅效率低下,而且這種做法和"eval"如出一轍。從不給setInterval和setTimeout傳遞字元串作為參數,而是像下麵這樣傳遞函數名。

setInterval(someFunction, 3000);


11.不要使用"with"語句
乍一看,"with"語句看起來像一個聰明的主意。基本理念是,它可以為訪問深度嵌套對象提供縮寫,例如……

with (being.person.man.bodyparts) { 
   arms = true; 
   legs = true; 
}

而不是像下麵這樣:

being.person.man.bodyparts.arms = true; 
being.person.man.bodyparts.legs= true; 

不幸的是,經過測試後,發現這時“設置新成員時表現得非常糟糕。作為代替,您應該使用變數,像下麵這樣。

var o = being.person.man.bodyparts; 
o.arms = true; 
o.legs = true; 


12.使用{}代替 new Ojbect()
在JavaScript中創建對象的方法有多種。可能是傳統的方法是使用"new"加構造函數,像下麵這樣:

ar o = new Object(); 
o.name = 'Jeffrey'; 
o.lastName = 'Way'; 
o.someFunction = function() { 
   console.log(this.name); 
}

然而,這種方法的受到的詬病不及實際上多。作為代替,我建議你使用更健壯的對象字面量方法。
更好的做法

var o = { 
   name: 'Jeffrey', 
   lastName = 'Way', 
   someFunction : function() { 
      console.log(this.name); 
   } 
};

註意,果你只是想創建一個空對象,{}更好。

13.使用[]代替 new Array()
這同樣適用於創建一個新的數組。
例如:

var a = new Array(); 
a[0] = "Joe"; 
a[1] = 'Plumber';

// 更好的做法:
var a = ['Joe','Plumber'];

“javascript程式中常見的錯誤是在需要對象的時候使用數組,而需要數組的時候卻使用對象。規則很簡單:當屬性名是連續的整數時,你應該使用數組。否則,請使用對象”——Douglas Crockford

14.定義多個變數時,省略var關鍵字,用逗號代替

var someItem = 'some string'; 
var anotherItem = 'another string'; 
var oneMoreItem = 'one more string';
// 更好的做法
var someItem = 'some string', 
    anotherItem = 'another string', 
    oneMoreItem = 'one more string';

應而不言自明。我懷疑這裡真的有所提速,但它能是你的代碼更清晰。

15.使用Firebug的"timer"功能優化你的代碼
在尋找一個快速、簡單的方法來確定操作需要多長時間嗎?使用Firebug的“timer”功能來記錄結果。

function TimeTracker(){ 
 console.time("MyTimer"); 
 for(x=5000; x > 0; x--){} 
 console.timeEnd("MyTimer"); 
} 


16.閱讀,閱讀,反覆閱讀
雖午餐之餘或上床睡覺之前,實在沒有什麼比一本書更合適了,堅持放一本web開發方面書在你的床頭櫃。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 第五章 引用類型(四) 對於我們開發人員來說,JavaScript有種引用類型一定很陌生!那就是基本包裝類型:Boolean、Number和String。這也不是我們的錯,主要這些我們平時根本都用不到。這些都是JavaScript內部自動調用。這麼說,你可能有點懵。下麵,我來舉個例子。 對於上面的代 ...
  • 頁面中的輸入框預設的提示文字一般使用placeholder屬性就可以了,即: 最多加點樣式控制下預設文字的顏色 但是在低版本的瀏覽器卻不支持這個placeholder屬性,那麼真的要在低版本瀏覽器也要實現跟placeholder一樣的效果,就需要寫個插件來相容下,下麵就細講一下怎樣用jquery來實 ...
  • json(JavaScript Object Notation):輕量級的數據交換(交換的數據轉換成與平臺無關的)格式 1. java對象轉換成json字元串,使用ObjectMapper類的writeValueAsString(java對象); 2. 將json字元串或者json對象組成的數組字元 ...
  • css權重 指的是樣式的優先順序,有兩條或多條樣式作用於一個元素,權重高的那條樣式對元素起作用,權重相同的後寫的樣式會覆蓋前面寫的樣式。 權重的等級 可以把樣式的應用方式分為幾個等級,按照等級來計算權重 a、!important 加在樣式屬性後,權重值為10000(慎用) b、內聯樣式(style=" ...
  • jQuery為開發插件提拱了兩個方法,分別是: jQuery.fn 原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。 雖然 javascript 沒有明確的類的概念,但是用類來理解它,會更方便。 jQuery便是一個封裝得非常好的類,比如我們用 語 ...
  • 一 歷史 二 實現 a. javascript三個部分: ECMAScript:由ECMA-262定義,提供核心語言功能; DOM:提供HTML的應用程式編程介面/提供訪問和操作網頁內容的方法和介面; BOM:提供與瀏覽器交互的方法和介面; 三 版本 ...
  • 更新於(2017.07.07)會總結項目中比較常用的有些CSS屬性 偽類選擇器 超鏈接狀態順序: ...
  • (function (window) { var arr = []; var VP = function (selector, context) { return new VP.fn.init(selector, context); } VP.fn = VP.prototype = { constr ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...