javascript初學者實踐使用

1.優先使用===,而不是==

 JavaScript使用兩種相等性運算子: ===|!==和==|!=.通常認為做比較的最佳實踐是使用前一組運算符.

"若兩個運算元的類型和值相同,那麼===比較的結果為真,!==比較的結果為假."               JavaScript語言精粹

然而,如果使用==和!=,當比較不同類型的操作數時,你就會碰到問題啦.在這種情況下,這組操作符會嘗試對操作數的值做無用的強制轉換.

2.Eval就是糟糕的代名詞

#對於那些不熟悉JavaScript的人來說,函數"evel"讓我們能夠訪問JavaScript編譯器,我們可以透過傳遞一個字串參數給"eval"來得到該字串執行的結果.

這不僅會大大降低你的腳本的效能.也會造成一個巨大的安全隱患,因為這富裕傳遞進來的純文本太多的能力,要盡可能地避免eval函數的使用.

3.不要懶手

奇數上來說,你確實可能僥倖地省略多數花括號和分號.大多數瀏覽器都能夠正確的節水如下程式碼片段:

if(someVarianbleExists)
x = false

然而再考慮一下這段程式碼:

if(someVariableExists)
 
x=false
anotherFunctionCall();

可能會有人認為上一段程式碼等價於:

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

你應該也注意到了,代碼中縮進模仿了花括號的功能,毋庸置疑,這是非常恐怖的做法,無論如何都應該避免.唯一可以省略花括號的時候是在一行式的語句中,但即使這種情況,也是很有爭議的.

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

始終要想著以後

如果以後的某個時候,你需要在這種if語句中增加更多的命令,那該怎麼辦呢?沒法子,你就只能重寫這款代碼了.處理這個問題的底線是對於省略寫法保持謹慎.

#4.使用JS Lint 

JSLint是Douglas Crockford 寫的一個調試器,簡單地將你的腳本拷貝進去,它就會快速地刀面你的程式碼中任何明顯的問題和錯誤.

"JSLint取得一份JavaScript源碼，然後掃描程式碼。如果發現問題，就會回傳一條訊息描述這個問題以及這個問題在源碼中的大致位置。問題雖然經常是語法錯誤，卻不一定是。JSLint也會查看一些風格習慣以及結構問題。你不會反一些愚蠢的錯誤.

5.將腳本至於頁面的底部

這條技巧在本系列前面的文章中也推薦過.因為它在此處也非常合適(As it's highly appropriate though),所以我將那段信息直接粘貼在這裡.

記住--這條最佳實踐的主要目標是近可能快速地為用戶加載頁面.當加載一個腳本時,瀏覽器直到整個腳本文件全部加載完畢才能繼續.因此,用戶必須等上更長的時間才能注意到任何的進度.

如果JS文件的目的僅僅是增加功能--例如.在點擊某個按鈕後--那麼就將那些文件放在底部,body結束標籤之前吧,這絕對是一個最佳實踐.

更好的做法

<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js?1.1.11">
</script> <script type="text/javascript" src="path/to/anotherFile.js?1.1.11"></script> </body> </html>

6.在For語句之外宣告變數

當執行一個冗長的'for'語句之時,僅僅讓解釋引擎做必須幹的活吧.  

例如:

糟糕的做法:

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

注意上面程式碼片段中的每次迭代都需要檢查數組的長度.並且每次都要遍歷DOM樹找到'container'元素--效率多低啊!! !

更好的做法

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

 7.建立字串的最快方式

當需要遍歷一個數組或物件之時,不要總是使用你信手拈來的'for'語句,創造性地找個能夠完成工作的最快速的方案.

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

“我不會以測試基準來煩你；你只須相信我（或者自己去測試一下）—這是目前為止最快的方式！ 」

使用原生方法（例如join()），不用管抽象層面背後發生了什麼，通常會比任何非原生方法快得多。

  8.減少全域變數

 透過將全域的東西封裝進單一命名空間,能夠大幅降低與其他應用程式,元件,程式碼庫互動混亂的機率.

 var name = 'jeffrey';
var lastname = 'way';
function doSomething(){...}
console.log()

更好的做法

var DudeNameSpace = {
name:'Jeffrey';
lastname:'way',
doSometing: function(){...}
}
console.log(DudeNameSpace.name);

 9 .註解你的程式碼

 一開始看起來似乎沒有必要,但請相信我,你將會想盡可能好地註解你的程式碼.當你幾個月後再次回到專案,會發生什麼呢?發現你根本沒法輕鬆的及其當初對每一行代碼的想法.或者,如果你的某個同事需要修改你的代碼,那又會怎麼樣呢?始終,一直記著註釋你代碼的重要部分吧.

10.擁抱漸進增強

總是考慮到如何處理JavaScript禁用的情況.也許你會想"大多數我網頁的閱讀器都是啟用JavaScript的,因此我不擔心這個問題.然而,這回事一個巨大的錯誤.

你曾花时间去看过关闭JavaScript后你的漂亮的花动态哦是什么样么?也许他会完全破坏你的站点.按照以往经验,设计你的站点是应假设将会禁用JavaScript,那么,一旦你这样做了,那么开始渐进的增强你的网页布局吧!

11.不要传递字符串给"SetInterval"或"SetTimeout"

考虑一下如下代码:

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

 这段代码不仅抵消,而且其行为与"eval"函数相同.永远不要传给字符串给SetInterval和SetTimeout.相反,颍川地一个函数名.

setInterval(someFunction, 3000);

12.不要使用"with"语句

乍一看,'with'语句似乎是个聪明的想法.基本概念是他们能够为深度嵌套对象提供一种简写方式,例如...

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

取代如下写法

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

很不幸,经过一些测试,会发现这种简写在设置新成员时表现非常糟糕.作为替代.你应该使用var.

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

13 使用{}而不是new Object()

JavaScript中有很多种穿件对象的方式.也许更传统的方式是使用''new''构造器.像这样:

var o = new Object(); o.name = 'Jeffrey'; o.lastname = 'Way'; o.someFuncion = function() {     console.log(this.name); }

然而,这种方式因其行为并不是我们所想的那样而被认为是"糟糕的实践".相反,我推荐你使用更健壮的对象字面方法.

更好的写法 

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

注意如果你只是想简单地创建个空对象,{}就派上用场了.

var o = {};

对象字面量使我们能够编写支持很多特性的代码,并对代码的实现者来说代码仍然相对直观,不需要直接调用构造器或维护传递给函数的参数的正确顺序,等等.

14.使用[]而不是New Array()

这同样适用于创建一个新数组

过去的写法

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

更好的写法 var a = ['Joe', 'Plumber'];

Javascript中一个常见的错误是需要数组时使用对象或需要对象时使用数组,规则很简单:当属姓名是小的连续整数时,你应该使用数组,否则,使用对象

15.一长串变量? 省略''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';

相当的不言自明,我不知道这里是否有任何真正的速度提升,但是它使你的代码更加简洁了.

16.始终,始终使用分号

技术上来说,大多数浏览器都允许你省略一些分号

var someItem = 'some string' function doSomething() {     return 'something' }

话虽如此,但这是一种非常糟糕的做法,可能导致更大的问题,问题查找起来也更困难

更好的写法

var someItem = 'some string'; function doSomething() {     return 'something'; }

 18.For in 语句

遍历对象内的成员时,你也会得到方法函数,为了解决这个问题,应始终将你的代码包装在一个if语句中来过滤信息

for(key in object) {     if(object.hasOwnProperty(key)) {         ... then do something...     } }

19.使用firebug的''Timer''特性来优化代码

需要一种快速简单地方法来检测一个操作花费多长时间么?

使用Firebug的timer特性记录结果

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

20.读书 面向对象的JavaScript

•               JavaScript：语言精粹

•                学习jQuery 1.3

•               学习JavaScript

 

 21.自执行函数(self-executing functions)

相比调用函数,当页面加载或调用父函数时,让函数自动执行会简单些.简单地将你的函数包装在圆括号内,并添加额外的一对圆括号,其本质上就调用了这个函数

(function doSomething() {     return {         name: 'jeff',         lastName: 'way'     };  })();

22.原始(raw)javascript代码的执行速度始终快于使用代码库

 Javascript代码库,如jQuery和mootools,能够为你节省大量的编码时间--特别是使用ajax操作.话虽如此,适中谨记代码库的执行速度适中是比不上原始JavaScript代码的(假设了代码的正确性)

jQuery的each方法来做遍历非常赞,但使用原生for语句适中会快一些

23.crockford的json.parse

虽然JavaScript 2 应该有一个内置的json解析器,但我们仍旧需要自己实现.Douglas Crockford，JSON的创造者，已经实现了一个解析器供你使用。可以从这里下载。

简单地导入该脚本,你就能获得一个新的json全局对象,用于解析你的.json文件.

var response = JSON.parse(xhr.responseText); 
var container = document.getElementById('container'); 
for(var i = 0, len = response.length; i < len; i++) {     
container.innerHTML += &#39;<li>&#39; + response[i].name + &#39; : &#39; + response[i].email + &#39;</li>&#39;;
 }

24.删除''language''

在script标签内最常见的language属性,现在已经不用了  

以上是javascript初學者實踐使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！