首頁 > web前端 > js教程 > 主體

JavaScript初學者應注意的七個細節

高洛峰
發布: 2016-11-25 10:45:23
原創
935 人瀏覽過

每種語言都有它特別的地方,對於JavaScript來說,使用var就可以聲明任意類型的變量,這門腳本語言看起來很簡單,然而想要寫出優雅的程式碼​​卻是需要不斷累積經驗的。本文利列舉了JavaScript初學者應該注意的七個細節,與大家分享。

(1)簡化程式碼

JavaScript定義物件和陣列非常簡單,我們想要建立一個對象,一般是這樣寫的:

1 var
 
car = 
new
 
Object(); colour = 
red
;  
3 car.wheels = 4;  
4 car.hubcaps = 
spinning
;  5 car.age = 4;spinning
;  5 car.age = 4;5;
car = {  

2     

colour:

red

,  
3     
wheels:4,  
6 }

後面的寫法短得多,而且你不需要重複寫對象名稱。注意大括號後面不要加分號,否則IE中會出錯。

另外對於陣列同樣有簡潔的寫法,過去我們聲明數組是這樣寫的: 

1 var
 
moviesThatNeedBetterWriters = 
new
 

,

Avatar

,

Indiana Jones 4 

3 );


更簡潔的寫法是:  

1 var
 
moviesThatNeedBetterWriters = Indiana Jones 4 
3 ];

對於數組,還有關聯數組這樣一個特別的東西。 你會發現很多程式碼是這樣定義物件的:

1 var
 
car = 
new
 

Array();  

2 car[

colour

] = 
] =  
2 car[
col ;  
4 car[
hubcaps
] = 
spinning
;  
5 car[
age
] = 4;

這太瘋狂了,不要覺得自己很困惑,「一個數字組」只是困惑的關聯對象,「一個數字」只是困惑。 另外一個簡單程式碼的方法是使用三元運算符,舉個例子:

1 var
 
direction;  
2 if
(x 3 
5   
direction = -1;  
6 }

我們可以使用以下的程式碼來取代這個寫法: 

1 var
 
direction = x  
direction = x
01 var
 
band = {  02 name"
:

"The Red Hot Chili Peppers"

,  

03   

"members"
:[  
04    Anthony Kiedis"
,  
06       
"role"
:
"lead vocals" 
07     
},  
08     
{   10       
"role"
:

"bass guitar, trumpet, backing vocals" 

11

},  

12     
{  
13       

"name"

:

 "drums,percussion" 

15     
},  
16     
{  
17      "
:
"John Frusciante"
,  
18       
"role"
:
"Lead 21   
"year"
:
"2009" 
22 }

你可以使用在JavaScript中直接使用JSON,甚至作為API返回的一種格式,這就是所謂的JSON ? P,在許多的API中被應用,例如:

01 div
 
id
=
"delicious"
>
div
>script
>  
02 function delicious(o 
04   
for(var i=0;io.length
;i++){  
05     
out +=

  • a
     
    href
    =🠎 06            
    o[i].d +
    a
    >
    li
    >;  
    07  
    09   
    document.getElementById(delicious).innerHTML = out;  
    10 }  
    11
    script
    >  
    12 script
     
    src
    =
    "http://feeds.delicious.com/v2/scripto
    =
    "http://feeds.delicious.com/count
    >
    script
    >

    這裡調用delicious 的Web服務獲取最新書籤,以JSON格式返回,然後將它們顯示成無序列表的形式。 從本質上講,JSON是用來描述複雜的資料最輕量級的方式,而且直接它運行在瀏覽器中。 你甚至可以在PHP中呼叫 json_decode()函數來使用它。

    1 "FONT-FAMILY: 宋體; mso-ascii-font-family: Times New Roman; mso-hansi-font-family: Times New Roman"
    >" FONT-SIZE: 14pt"
    >(3)
    "FONT-SIZE: 14pt"
    >"FONT-FAMILY:宋體; mso-ascii-font-family: Times New Roman; mso-hansi-font-family: Times New Roman"

    >盡量使用

    "FONT-FAMILY: Times New Roman "

     
    face=
    "Times New Roman"
    >Javascript

    "FONT-FAMILY: 宋體; mso-ascii-font-family: Times New Roman; mso-hansi- font-family: Times New Roman"
    >原生函數
    "FONT-FAMILY: 宋體; mso-ascii-font-family: Times New Roman; mso-hansi-font- family: Times New Roman"
    >


     

    要找一組數字中的最大數,我們可能會寫一個循環,例如:

    1 var
     
    numbers = [3,342,23,22,124];  
    2 var
     max = 0;  

    3 for

    (

    var );

    if

    (numbers [i] > max){  
    5     
    max = numbers[i];  
    6   
    }  
    7 }  
    8 alert(}  
    7 }  
    8 alert(}  
    7 }  
    8 alert();
    numbers = [3,342,23,22,124];  
    2 numbers.sort(
    function
    (a,b){
    return
     
    b - a})  
    3return
     

    b - a})寫法是:

    1 Math.max(12,123,3,2,433,4); 

    // returns 433

    你甚至可以使用Math.max來偵測瀏覽器支援哪一個屬性:

    1 varoroll .max(  
    2  
    doc.documentElement.scrollTop,  
    3  
    doc.body.scrollTop  
    4 );

    如果你想增加一個寫法是這樣的addclass(elm,newclass){  

    2   

    var

     
    c = elm.className;  

    3   

    elm.className = (c === 

    3   

    elm.className = (c === 
    3   
    elm.className = (c === 
    3   
    法是:

    1 function
     

    addclass(elm,newclass){  

    2   

    var

     
    classes = elm.className.split(
     
    classes = elm.className.split(
     

    4   
    elm.className = classes.join(

    );  
    5 }

       

    (4)事件委託

    事件是JavaScript非常重要的一部分。我們想給一個列表中的連結綁定點擊事件,一般的做法是寫一個循環,給每個連結物件綁定事件,HTML程式碼如下:

    1

    豐富的網路資源

      
    2
  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!