< 期刊
跳轉(zhuǎn)到: 導(dǎo)航 , 搜索跳轉(zhuǎn)到: 導(dǎo)航 , 搜索

目錄目錄

[隱藏]

[ 編輯 ] Single Page Application [ 編輯 ] Single Page Application

[ 編輯 ] 所依賴的Web技術(shù) [ 編輯 ] 所依賴的Web技術(shù)

Ajax為Asynchorous Javascript And XML ，早期Ajax被用作來傳輸單純的HTML或是XML，並且利用DOM的innerHTML屬性來更新部分HTML內(nèi)容。 Ajax為Asynchorous Javascript And XML ，早期Ajax被用作來傳輸單純的HTML或是XML，并且利用DOM的innerHTML屬性來更新部分HTML內(nèi)容。 如今Ajax在SPA中被當(dāng)作重要的傳輸媒介(Transport)，無論範(fàn)本資料到應(yīng)用程式資料，都是利用Ajax在背景傳輸完後，再由Javascript Template來產(chǎn)生HTML。如今Ajax在SPA中被當(dāng)作重要的傳輸媒介(Transport)，無論范本資料到應(yīng)用程式資料，都是利用Ajax在背景傳輸完后，再由Javascript Template來產(chǎn)生HTML。

JSON為Javascript Simple Object Notation ，在標(biāo)準(zhǔn)的Javascript語法中，以{ }及[ ]這兩個(gè)語法，可以宣告物件與陣列，並可以使用eval函式將他轉(zhuǎn)換為Javascript物件。 JSON為Javascript Simple Object Notation ，在標(biāo)準(zhǔn)的Javascript語法中，以{ }及[ ]這兩個(gè)語法，可以宣告物件與陣列，并可以使用eval函式將他轉(zhuǎn)換為Javascript物件。 例如object=eval("({a:'b'})")，此時(shí)object物件便有一個(gè)屬性"a"其值為"b"。例如object=eval("({a:'b'})")，此時(shí)object物件便有一個(gè)屬性"a"其值為"b"。 在SPA中，JSON被運(yùn)用來作為一種資料格式，藉此取代複雜的XML，以節(jié)省頻寬。在SPA中，JSON被運(yùn)用來作為一種資料格式，借此取代復(fù)雜的XML，以節(jié)省頻寬。 而傳輸?shù)腏SON資料又可以快速還原為javascrip物件，又更節(jié)省程式執(zhí)行的時(shí)間。而傳輸?shù)腏SON資料又可以快速還原為javascrip物件，又更節(jié)省程式執(zhí)行的時(shí)間。

在SPA中， HTML DOM是一個(gè)最重要的元素，尤其是DIV及SPAN等Container的操作更是。在SPA中， HTML DOM是一個(gè)最重要的元素，尤其是DIV及SPAN等Container的操作更是。 由於絕大多數(shù)的畫面都不進(jìn)行任何換頁的動作，程式裡大部分都是在控制DOM及Container。由于絕大多數(shù)的畫面都不進(jìn)行任何換頁的動作，程式里大部分都是在控制DOM及Container。 而對於A (Anchor)而言，href裡的URL也沒有太大意義，多半都是在onclick裡寫javascript，或是用Javascript函式庫去bind onclick事件。而對于A (Anchor)而言，href里的URL也沒有太大意義，多半都是在onclick里寫javascript，或是用Javascript函式庫去bind onclick事件。 由於直接呼叫瀏覽器提供的DOM函式庫功能，會遇到像IE一樣不符合W3C規(guī)格的問題。由于直接呼叫瀏覽器提供的DOM函式庫功能，會遇到像IE一樣不符合W3C規(guī)格的問題。 要選用一個(gè)合適的Javascript擴(kuò)充函式庫，如Prototype.js或是jQuery，如此才不會有太多跨瀏覽器問題。要選用一個(gè)合適的Javascript擴(kuò)充函式庫，如Prototype.js或是jQuery，如此才不會有太多跨瀏覽器問題。

CSS在以往的Web應(yīng)用程式中，多半都拿來當(dāng)作畫面的修飾，布景主題或是顏色特校。 CSS在以往的Web應(yīng)用程式中，多半都拿來當(dāng)作畫面的修飾，布景主題或是顏色特校。 但在SPA中，必須要熟悉CSS的Dimentation (長寬控制)， Classification (顯示行為)， Positioning (定位)。但在SPA中，必須要熟悉CSS的Dimentation (長寬控制)， Classification (顯示行為)， Positioning (定位)。 在無法換頁的狀況下， 只能靠著移動，隱藏，顯示這些方法來控制畫面的元素。在無法換頁的狀況下，只能靠著移動，隱藏，顯示這些方法來控制畫面的元素。 如果要瞭解這些進(jìn)階CSS的主題，都可以在w3school裡的教學(xué)找到。如果要了解這些進(jìn)階CSS的主題，都可以在w3school里的教學(xué)找到。

Trimpath是Google為了SPA而開發(fā)出來的一個(gè)函式庫集合，也可以說是Rails的Javascript版。 Trimpath是Google為了SPA而開發(fā)出來的一個(gè)函式庫集合，也可以說是Rails的Javascript版。 如果要撰寫下面所說第一種SPA，就必須利用到Trimpath的全部，而第二種只需要用到Trimpath Javascript Template即可。如果要撰寫下面所說第一種SPA，就必須利用到Trimpath的全部，而第二種只需要用到Trimpath Javascript Template即可。 Javascript Template(JST)如同PHP的Smarty一樣，是標(biāo)準(zhǔn)的範(fàn)本技術(shù)，只是採用的語言是Javascript。 Javascript Template(JST)如同PHP的Smarty一樣，是標(biāo)準(zhǔn)的范本技術(shù)，只是采用的語言是Javascript。 為了撰寫SPA，必須要好好地運(yùn)用JST。為了撰寫SPA，必須要好好地運(yùn)用JST。

快取的機(jī)制在SPA也相當(dāng)?shù)闹匾瑸榱诉_(dá)到讓使用者感受到程式的反應(yīng)快速，就必須應(yīng)用多方面的快取。快取的機(jī)制在SPA也相當(dāng)?shù)闹匾瑸榱诉_(dá)到讓使用者感受到程式的反應(yīng)快速，就必須應(yīng)用多方面的快取。

  • View Cache：SPA中的View就是指已經(jīng)顯示出來的HTML，很多常用，而不需要經(jīng)常改變的HTML，就可以將放在Container(DIV或SPAN)裡。 View Cache：SPA中的View就是指已經(jīng)顯示出來的HTML，很多常用，而不需要經(jīng)常改變的HTML，就可以將放在Container(DIV或SPAN)里。 不用的時(shí)候就隱藏，需要的時(shí)候就顯示。不用的時(shí)候就隱藏，需要的時(shí)候就顯示。 而另一種方式是可以用z-index將選單或是清單的Container放在最下層，而要回到這個(gè)清單的時(shí)候就將蓋在其上的container隱藏。而另一種方式是可以用z-index將選單或是清單的Container放在最下層，而要回到這個(gè)清單的時(shí)候就將蓋在其上的container隱藏。
  • Template Cache：一般來說JST的範(fàn)本資料只要讀取一次就可以，又因?yàn)檫@些只是字串，可以直接就存在Hash裡。 Template Cache：一般來說JST的范本資料只要讀取一次就可以，又因?yàn)檫@些只是字串，可以直接就存在Hash里。
  • Javascript Cache：在我提出的SPA實(shí)做中，有一個(gè)特性是將各個(gè)JST的「行為」程式碼分開，就如同sap.net將aspx與cs檔分開的作法一樣。 Javascript Cache：在我提出的SPA實(shí)做中，有一個(gè)特性是將各個(gè)JST的「行為」程式碼分開，就如同sap.net將aspx與cs檔分開的作法一樣。 而如果採用這個(gè)作法，不需要重複讀取的javascript就必須要快取。而如果采用這個(gè)作法，不需要重復(fù)讀取的javascript就必須要快取。
  • Data Cache：資料快取是最難的一部份，牽扯到了快取一致性的問題。 Data Cache：資料快取是最難的一部份，牽扯到了快取一致性的問題。 而現(xiàn)在在javascript中並沒有對於XML或JSON的資料快取解決方案，未來如果能夠有這樣的函式庫，就能夠更提升整體的效率。而現(xiàn)在在javascript中并沒有對于XML或JSON的資料快取解決方案，未來如果能夠有這樣的函式庫，就能夠更提升整體的效率。

以上說明的都是Client Side所必須要使用到的技術(shù)，而Server Side的技術(shù)多半與Service Design息息相關(guān)。以上說明的都是Client Side所必須要使用到的技術(shù)，而Server Side的技術(shù)多半與Service Design息息相關(guān)。

REST為Representational State Transfer ，他比較像是一種設(shè)計(jì)樣式(Design Pattern)，而不是Web技術(shù)。 REST為Representational State Transfer ，他比較像是一種設(shè)計(jì)樣式(Design Pattern)，而不是Web技術(shù)。 在以往Web應(yīng)用程式的規(guī)劃中，URL並不完全具有意義，傳輸?shù)膬?nèi)容型態(tài)多半是HTML，而HTTP的各種動作也並未完全利用。在以往Web應(yīng)用程式的規(guī)劃中，URL并不完全具有意義，傳輸?shù)膬?nèi)容型態(tài)多半是HTML，而HTTP的各種動作也并未完全利用。 在SPA中，由於需要在不同時(shí)間傳輸各種資料，如HTML範(fàn)本，JS範(fàn)本，或是XML及JSON資料。在SPA中，由于需要在不同時(shí)間傳輸各種資料，如HTML范本，JS范本，或是XML及JSON資料。 此時(shí)REST的設(shè)計(jì)技巧就可以節(jié)省下很多重複的命名，而讓程式碼整體更有意義。此時(shí)REST的設(shè)計(jì)技巧就可以節(jié)省下很多重復(fù)的命名，而讓程式碼整體更有意義。 支援REST設(shè)計(jì)樣式的Web Framework如Ruby On Rails，讓整體設(shè)計(jì)較為簡單。支援REST設(shè)計(jì)樣式的Web Framework如Ruby On Rails，讓整體設(shè)計(jì)較為簡單。

[ 編輯 ] SPA的架構(gòu) [ 編輯 ] SPA的架構(gòu)

SPA就分類而言，算是RIA的一種，只是不採用任何的sandbox而已。 SPA就分類而言，算是RIA的一種，只是不采用任何的sandbox而已。 典型的SPA是不需要任何的後端的Web Service或是Offline Database，只需要一個(gè)htm檔或是一個(gè)網(wǎng)頁就能夠運(yùn)作，如微軟的HyperText Application(HTA)就是，但還是缺乏完善的資料儲存能力。典型的SPA是不需要任何的后端的Web Service或是Offline Database，只需要一個(gè)htm檔或是一個(gè)網(wǎng)頁就能夠運(yùn)作，如微軟的HyperText Application(HTA)就是，但還是缺乏完善的資料儲存能力。

spa_01.png

第一種SPA程式，如同著名的Google Reader離線版，具有一個(gè)離線資料庫與一個(gè)同步管理程式，在有網(wǎng)路連線的時(shí)候，會將資料同步回線上的資料庫。第一種SPA程式，如同著名的Google Reader離線版，具有一個(gè)離線資料庫與一個(gè)同步管理程式，在有網(wǎng)路連線的時(shí)候，會將資料同步回線上的資料庫。 這個(gè)最大的優(yōu)點(diǎn)就是完全利用了Client的CPU資源，使用者雖然看見的是網(wǎng)頁，但卻是在使用在本機(jī)執(zhí)行的獨(dú)立應(yīng)用程式，因此速度是相當(dāng)流暢。這個(gè)最大的優(yōu)點(diǎn)就是完全利用了Client的CPU資源，使用者雖然看見的是網(wǎng)頁，但卻是在使用在本機(jī)執(zhí)行的獨(dú)立應(yīng)用程式，因此速度是相當(dāng)流暢。 比起一般的動態(tài)網(wǎng)頁，這樣子的使用體驗(yàn)更能夠顛覆一般人對於「網(wǎng)頁」的看法，而逐漸瞭解何謂Web應(yīng)用程式。比起一般的動態(tài)網(wǎng)頁，這樣子的使用體驗(yàn)更能夠顛覆一般人對于「網(wǎng)頁」的看法，而逐漸了解何謂Web應(yīng)用程式。 另一個(gè)例子是使用Trimpath函式庫撰寫成的NextAction，是一個(gè)多功能的ToDo List。另一個(gè)例子是使用Trimpath函式庫撰寫成的NextAction，是一個(gè)多功能的ToDo List。

spa_02.png

另一種就是較簡單的SPA，不具有離線瀏覽的能力，但是承襲了使用javascript的高效能。另一種就是較簡單的SPA，不具有離線瀏覽的能力，但是承襲了使用javascript的高效能。 必須提及的是Server Side並不是採用XML，而是可以快速轉(zhuǎn)換為Javascript物件的JSON，來當(dāng)作Web Service。必須提及的是Server Side并不是采用XML，而是可以快速轉(zhuǎn)換為Javascript物件的JSON，來當(dāng)作Web Service。 如此Server Side的語言只需要具備能夠快速將物件serialize成JSON的能力即可。如此Server Side的語言只需要具備能夠快速將物件serialize成JSON的能力即可。

[ 編輯 ] Rails與SPA [ 編輯 ] Rails與SPA

這個(gè)小節(jié)所要說明的是相當(dāng)技術(shù)性的部分，無法說明的太詳細(xì)，有興趣的讀者可以寫mail一起討論。這個(gè)小節(jié)所要說明的是相當(dāng)技術(shù)性的部分，無法說明的太詳細(xì)，有興趣的讀者可以寫mail一起討論。 為了簡化觀念，我使用Sequence Diagram來說明Rails要如何應(yīng)用在SPA上：為了簡化觀念，我使用Sequence Diagram來說明Rails要如何應(yīng)用在SPA上：

  • URLRequester是一個(gè)javascript函式，主要的工作就是以REST方式對一個(gè)URL進(jìn)行不同Content-Type的Request，並且將回傳的資料產(chǎn)生HTML，並填到container裡顯示出來。 URLRequester是一個(gè)javascript函式，主要的工作就是以REST方式對一個(gè)URL進(jìn)行不同Content-Type的Request，并且將回傳的資料產(chǎn)生HTML，并填到container里顯示出來。
  • HTTPRequest在這裡作為進(jìn)行Ajax呼叫的傳輸媒介。 HTTPRequest在這里作為進(jìn)行Ajax呼叫的傳輸媒介。
  • RailsController表示伺服器端對應(yīng)至特定URL的程式，在這裡也必須使用REST方式來回應(yīng)。 RailsController表示伺服器端對應(yīng)至特定URL的程式，在這里也必須使用REST方式來回應(yīng)。 也因此如果要求content-type為HTML的時(shí)候就傳JST範(fàn)本，要求JSON的時(shí)候就傳資料，要求javascript的時(shí)候就傳javascript文件。也因此如果要求content-type為HTML的時(shí)候就傳JST范本，要求JSON的時(shí)候就傳資料，要求javascript的時(shí)候就傳javascript文件。
  • RailsModel代表伺服器端的資料庫，在要求資料的時(shí)候，勢必定要連資料庫來取得資料的。 RailsModel代表伺服器端的資料庫，在要求資料的時(shí)候，勢必定要連資料庫來取得資料的。 而回傳的時(shí)候，就將ruby物件serialize成JSON。而回傳的時(shí)候，就將ruby物件serialize成JSON。

spa_03.png

  1. Client呼叫URLRequester函式，例如http://servername/controller/action/id。 Client呼叫URLRequester函式，例如http://servername/controller/action/id。
  2. HTTPRequest送出一個(gè)要求，並指定Content-Type為HTML。 HTTPRequest送出一個(gè)要求，并指定Content-Type為HTML。
  3. RailsController接到指定的URL，並執(zhí)行controller#action。 RailsController接到指定的URL，并執(zhí)行controller#action。 我將JST寫在rhtml裡面，JST基本上也是html，不過是範(fàn)本的標(biāo)籤換成{}而已。我將JST寫在rhtml里面，JST基本上也是html，不過是范本的標(biāo)簽換成{}而已。 因?yàn)镽EST設(shè)計(jì)方式會因?yàn)橹付ǖ腸ontent-type回傳對應(yīng)的型態(tài)，此時(shí)直接將內(nèi)容的JST文件傳回。因?yàn)镽EST設(shè)計(jì)方式會因?yàn)橹付ǖ腸ontent-type回傳對應(yīng)的型態(tài)，此時(shí)直接將內(nèi)容的JST文件傳回。
  4. 在前面我有提及快取的重要性，所以這裡就快取住這個(gè)JST，下次要求同樣的內(nèi)容就可以直接使用而不用重複傳輸。在前面我有提及快取的重要性，所以這里就快取住這個(gè)JST，下次要求同樣的內(nèi)容就可以直接使用而不用重復(fù)傳輸。
  5. 對於同一個(gè)URL，使用HTTPRequest送出要求，並指定Content-Type為JSON。對于同一個(gè)URL，使用HTTPRequest送出要求，并指定Content-Type為JSON。
  6. 因?yàn)镽EST的特性，這次會執(zhí)行到content-type為JSON時(shí)的程式碼，接著就可以照一般方式使用Rails Model讀取資料庫。因?yàn)镽EST的特性，這次會執(zhí)行到content-type為JSON時(shí)的程式碼，接著就可以照一般方式使用Rails Model讀取資料庫。
  7. Model傳回的Ruby物件，當(dāng)然就要轉(zhuǎn)換成JSON回傳。 Model傳回的Ruby物件，當(dāng)然就要轉(zhuǎn)換成JSON回傳。 而在ruby中相當(dāng)簡單地便是呼叫to_json就可以轉(zhuǎn)換了。而在ruby中相當(dāng)簡單地便是呼叫to_json就可以轉(zhuǎn)換了。
  8. 回傳的JSON，併和剛剛快取的JST，使用trimpath javascript template函式庫產(chǎn)生成HTML，並更新至container裡。回傳的JSON，并和剛剛快取的JST，使用trimpath javascript template函式庫產(chǎn)生成HTML，并更新至container里。
  9. 在這裡我採用行為javascript程式碼與範(fàn)本分離的方式，所以還是以HTTPRequest再次傳送要求，並將Content-Type指定為Javascript。在這里我采用行為javascript程式碼與范本分離的方式，所以還是以HTTPRequest再次傳送要求，并將Content-Type指定為Javascript。
  10. 同樣地根據(jù)要求的content-type，會回傳javascript文件。同樣地根據(jù)要求的content-type，會回傳javascript文件。
  11. 快取，並呼叫eval執(zhí)行回傳的javascript。快取，并呼叫eval執(zhí)行回傳的javascript。
  12. 將container顯示在想要放置的畫面區(qū)域。將container顯示在想要放置的畫面區(qū)域。

[ 編輯 ] 結(jié)論 [ 編輯 ] 結(jié)論

許多人都在說Web 2.0可能又是另一次的泡沫化，這個(gè)熱潮怎樣開始的，又怎樣消退的，也是相當(dāng)明顯。許多人都在說Web 2.0可能又是另一次的泡沫化，這個(gè)熱潮怎樣開始的，又怎樣消退的，也是相當(dāng)明顯。 網(wǎng)路上對於各種新技術(shù)名詞的炒作，將不同應(yīng)用層次的技術(shù)，全部攪和在一起說明或稱做是最終解決方案，也模糊了使用者的眼睛。網(wǎng)路上對于各種新技術(shù)名詞的炒作，將不同應(yīng)用層次的技術(shù)，全部攪和在一起說明或稱做是最終解決方案，也模糊了使用者的眼睛。 那麼，在這個(gè)時(shí)代，到底還有什麼可以相信，可以學(xué)習(xí)的？那么，在這個(gè)時(shí)代，到底還有什么可以相信，可以學(xué)習(xí)的？

唯一能夠做的就是重新審視這些技術(shù)，瞭解因果。唯一能夠做的就是重新審視這些技術(shù)，了解因果。 就可以知道哪些作法是適合用在自己現(xiàn)在的專案，那些是本質(zhì)相同的，哪些是跨大其詞的。就可以知道哪些作法是適合用在自己現(xiàn)在的專案，那些是本質(zhì)相同的，哪些是跨大其詞的。 根本的觀念正確，就不需要擔(dān)心這些延伸的技術(shù)是否會有誤解或誤用。根本的觀念正確，就不需要擔(dān)心這些延伸的技術(shù)是否會有誤解或誤用。