JavaScript基礎(chǔ)

JSON

JSON相當(dāng)于Java世界里的POJO(相當(dāng)于JavaScirpt中由List和Map組成的POJO) 基本語(yǔ)法：

var d = { prop1:"value", prop2:true };

相當(dāng)于

var d = new Object(); // 也可以寫(xiě)作 var d = {};
d.prop1 = "value";
d.prop2 = true;

相對(duì)來(lái)說(shuō)?var d= {};的寫(xiě)法更為簡(jiǎn)潔。Java程序員對(duì)上面的d.prop1="value"的實(shí)現(xiàn)不申明而直接使用的寫(xiě)法會(huì)覺(jué)得比較奇怪，但是JS中確可以這樣使用，其實(shí)我們只要把JS中的Object想成Java的Map，d.prop1="value"就相當(dāng)于d.put("prop1", "value");這樣就容易理解多了，事實(shí)上JS在客戶(hù)端的運(yùn)行機(jī)制也和這個(gè)差不多，這樣我們就可以給任意屬性賦值。 我們?cè)賮?lái)看下面這個(gè)更為復(fù)雜的例子:

{
    name: "Phone",
    propertyDefs: [
        { name: "product", label: "型號(hào)", required: true },
        { name: "manufacturer", label: "生產(chǎn)商" },
        { name: "type", label: "機(jī)型", mapValues: [
            { key: "A", value: "直板" },
            { key: "B", value: "翻蓋" },
            { key: "C", value: "滑蓋" },
            { key: "D", value: "旋蓋" },
            { key: "Z", value: "其它" }
        ]
        },
        { name: "price", label: "價(jià)格", dataType: "float" }
    ]
}

上面的代碼給我們展示了一個(gè)多層的JSON對(duì)象，首先在頂層有兩個(gè)屬性，一個(gè)叫name,還有一個(gè)是propertyDefs。propertyDefs是一個(gè)數(shù)組，內(nèi)部又放了很多個(gè)子對(duì)象，例如:

{ name: "product", label: "型號(hào)", required: true },
{ name: "manufacturer", label: "生產(chǎn)商" },

根據(jù)前面的JSON的學(xué)習(xí)我們知道申明一個(gè)對(duì)象即可以用new Object，也可以直接用{}.上面就通過(guò)這種方式申明了多個(gè)對(duì)象，且每個(gè)子對(duì)象有不同的屬性。其中第三個(gè)子對(duì)象又包含了一個(gè)數(shù)組:

{ key: "A", value: "直板" },
{ key: "B", value: "翻蓋" },
{ key: "C", value: "滑蓋" },
{ key: "D", value: "旋蓋" },
{ key: "Z", value: "其它" }

上面的JSON的分析，我們可以看出這是一個(gè)挺復(fù)雜的JSON對(duì)象，是一個(gè)樹(shù)狀結(jié)構(gòu)的JSON，通過(guò)JSON我們可以很方便的創(chuàng)建一顆樹(shù)形結(jié)構(gòu)的對(duì)象。在AJAX越來(lái)越流行的今天，JSON更容易被開(kāi)發(fā)人員所接受，也越來(lái)越多的在很多的開(kāi)發(fā)框架中有所體現(xiàn)，作為一個(gè)默認(rèn)的標(biāo)準(zhǔn)技術(shù)而存在。我們看剛才這個(gè)復(fù)雜的JSON結(jié)構(gòu)，它既是一段JavaScript，又是用來(lái)描述數(shù)據(jù)的很好的格式。它比XML更為簡(jiǎn)潔，易讀。 更詳細(xì)的內(nèi)容: http://www.w3school.com.cn/json/index.asp http://www.ibm.com/developerworks/cn/web/wa-lo-json/

閉包

關(guān)于閉包的定義非?；逎y懂，因此我們通過(guò)下面的例子簡(jiǎn)單的介紹閉包

function a() {
    var text = "Hello!"
    function b() {
        alert(text);
    }
    setTimeout(b, 500);
}

上述代碼定義了一個(gè)funciton a,但是a并不是我們要介紹的閉包，我們關(guān)注一下其內(nèi)部的定義，首先它申明了一個(gè)text的變量，之后又定義了一個(gè)function b，在function b中使用了這個(gè)變量，function b中自己沒(méi)有定義這個(gè)變量，而是直接使用了function外的text變量。但是在代碼結(jié)束的地方并沒(méi)有直接調(diào)用function b，而是采用了一個(gè)延時(shí)500毫秒再執(zhí)行function b的寫(xiě)法，對(duì)于Java程序員可能會(huì)很奇怪text變量的使用，很容易得出如下的結(jié)論:“500毫秒的延時(shí)，function的調(diào)用應(yīng)該已經(jīng)結(jié)束了，如果結(jié)束的話(huà)私有變量text變量就應(yīng)該已經(jīng)被釋放，從而導(dǎo)致function b無(wú)法訪(fǎng)問(wèn)到變量text”。你推測(cè)的沒(méi)錯(cuò)，在Java的世界確實(shí)是這樣，但是在JavaScript的世界就允許你這樣使用。并且對(duì)這種用法中的function b在JavaScript中就被稱(chēng)為閉包函數(shù)。在JS中閉包函數(shù)可以訪(fǎng)問(wèn)所處環(huán)境中的局部變量。并且瀏覽器中的GC對(duì)于變量的回收處理也會(huì)有所差別，當(dāng)它判斷到一個(gè)局部變量被某一個(gè)閉包函數(shù)所引用時(shí)，JS引擎就會(huì)阻止該變量被GC回收。直到這個(gè)變量沒(méi)有被引用。 閉包函數(shù)不一定需要命名，也可以是匿名函數(shù)，如:

setTimeout(function(){
    alert(text);
}, 500);

更多文檔參考: http://developer.51cto.com/art/200907/139159.htm http://www.jb51.net/article/25737.htm http://www.csser.com/dev/42.html

回調(diào)函數(shù)

回調(diào)函數(shù)最常見(jiàn)于Ajax操作和延時(shí)操作（如前面的例子）。通常都是利用閉包完成的。也就是說(shuō)回調(diào)函數(shù)就是閉包的一種使用場(chǎng)景。在Dorado開(kāi)發(fā)中會(huì)有較多地方使用到回調(diào)函數(shù)，如示例：

$ajax.request("data/phones.js", function(result) {
    grid.set("items", result.getJsonData());
});

上面的$ajax是Dorado中ajax調(diào)用的一個(gè)基本的工具類(lèi)，我們調(diào)用其提供的request方法，方法找中的參數(shù)是一個(gè)URL。當(dāng)這個(gè)URL請(qǐng)求結(jié)束后，$ajax工具類(lèi)就會(huì)自動(dòng)的觸發(fā)內(nèi)部的回調(diào)函數(shù)，由于是異步的，因此內(nèi)部代碼的執(zhí)行是要等到ajax請(qǐng)求結(jié)束后才能進(jìn)行。其中的grid等都是閉包機(jī)制中的局部變量，我們放心使用，不用擔(dān)心局部變量被釋放的問(wèn)題。 如果是同步操作，代碼往往是如下形式的：

var result = $ajax.requestSync("data/phones.js");
grid.set("items", result.getJsonData());

看得出，同步代碼的格式更容易被程序員接受，代碼似乎也更為簡(jiǎn)單。但是采用同步的運(yùn)算方法和異步運(yùn)算方法在瀏覽器中的執(zhí)行效果會(huì)有很大差別，例如一個(gè)耗時(shí)5秒的http請(qǐng)求,如果采用同步處理機(jī)制，在這5秒內(nèi)用戶(hù)是不能做任何事情的，整個(gè)瀏覽器會(huì)完全卡住，使用戶(hù)無(wú)法進(jìn)行包括頁(yè)面上的按鈕單擊，查詢(xún)，表單輸入等動(dòng)作，必須等到ajax請(qǐng)求結(jié)束后才能進(jìn)行，而采用異步處理方式，瀏覽器就允許在ajax執(zhí)行的同時(shí)，還接受用戶(hù)在界面上做的各種操作。而在5秒之后，回調(diào)函數(shù)依然會(huì)被觸發(fā)進(jìn)行正常的數(shù)據(jù)邏輯處理。AJAX技術(shù)本身強(qiáng)調(diào)就是要盡可能的采用異步技術(shù)。盡可能的確保界面的友好性，和更有效率的界面操作。 更多文檔參考: http://www.ityoudao.com/Web/Html_JS_646_1736.html http://www.iteye.com/topic/301453 http://luxiao1223.blog.51cto.com/2369118/482885 http://bbs.51js.com/thread-85825-1-1.html