iT邦幫忙

DAY 2
2

用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列 第 2

[4]用MAN架構打造超人般的網頁應用程式:[課前準備]淺談JavaScript與MVC開發介紹

JavaScript 是個跨平台、物件導向、輕小型的腳本語言。他的核心是基於ECMAScript標準,而該標準在最近一次更新(2009年)更新為第五版。
而JavaScript 和 Java 是不同一樣東西, 其實它們在技術上是有很大分別的,只是名字相似而已
用MAN架構打造超人般的網頁應用程式系列文章
用MAN架構打造超人般的網頁應用程式系列文章

JavaScript 是個跨平台、物件導向、輕小型的腳本語言。他的核心是基於ECMAScript標準,而該標準在最近一次更新(2009年)更新為第五版。

而JavaScript 和 Java 是不同一樣東西, 其實它們在技術上是有很大分別的,只是名字相似而已,差別如下:

from

JavaScript有三個明顯的特性

  • 大小寫有別 (Case sensitve)
    宣告一個變數test與一個變數Test是兩個不同的變數

  • 物件導向 (Object-Oriented)
    物件導向可以說是一種思考方法, 它把任何東西都視作一個物件, 當你想做某些工作時, 只要想想該件工作與什麼物件有關, 就可以很容易去表示它, 而不用硬記一些沒有關聯的指令名稱。

  • 寬鬆型態 (Loosely Typed)
    即支援不需任何特殊宣告的函式,函式可以是物件的屬性的特性。

JavaScript 使用

如同CSS一樣,在HTML使用JavaScript也可以透過外部載入連結檔案或是直接文件內部宣告的方式,如下:

<meta charset="utf-8">
<title></title>
<!--1. 引入指定的js檔案-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--2. 直接宣告js內容-->
<script type="text/javascript">
/*
這邊故意不先宣告變數testStr直接使用
*/
testStr="123";
alert(testStr);
</script>

而由於Loosely Typed的特性在使用變數上我們不用先宣告變數來做操作,如上述就沒有先透過var testStr;的方式來產生變數,而是直接使用testStr來給予他值,而這樣的特性雖然方便但會造成使用上的誤會,所以就有了stric mode這樣的設定來讓使用JavaScript需要更加嚴謹,避免在大型開發上會有錯失,對stric mode有興趣的可以看我之前寫的[JavaScript]use strict(嚴格模式)-strict mode 介紹

JavaScript CallBack Function

這邊要獨立出來講一下JavaScript CallBack Function,因為這在物件導向的JS當中這根本是要學的跟呼吸ㄧ樣的東西你才能把JS用到淋漓盡致。

這邊我們先直接看範例1:

<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function callback(){
console.log("callback");
}
$("#btn_1").click(function() {
console.log("Btn 1 Clicked");
callback();
console.log("finish");
});
});
</script>


<button id="btn_1">click me</button>

結果1:

這是我們一般期望程式在運作的時候的結果,當按下按鈕後跑到按鈕的click function,接者是執行callback的結果,與最後這個function結束時的回傳。在一般沒有延遲時看似正常,但網頁常常要遇到傳輸或取得資料的情況,如下範例2我們透過取得一個flickr的資料來顯示內容的流程就跟上面不太一樣了。

範例2:

<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function callback(){
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
$.getJSON( flickerAPI, {
tags: "mount rainier",
tagmode: "any",
format: "json"
})
.done(function( data ) {
console.log(data);
});
}
$("#btn_1").click(function() {
console.log("Btn 1 Clicked");
callback();
console.log("finish");
});
});
</script>


<button id="btn_1">click me</button>

結果2:

很好,出現意外了,finish出現在flickr的回傳前,因為任何服務在抓取一定會有延遲,而程式依序執行時為了避免卡死,所以它會透過callback funtion的模式,在你執行成功或失敗之後再去執行你所指定的下一個動作,而原先在callback()的下一行就會直接掀執行,所以才會產生我們上方的結果。

而這個callback function在JS中是一個很特別的存在,這讓我們透過callback的方式來層層呼叫對應的function而不被等待。

jQuery

jQuery是一套跨瀏覽器的JavaScript Framework,他簡化了HTML與JavaScript之間的操作,最棒的是透過jQuery的選擇器能夠很方便地挑出你所希望修改或處理的DOM物件,而基於jQuery為基礎所開發的plugin更是豐富與多樣,可以大幅簡化我們開發上所花費的時間與撰寫的程式碼,下面是一個簡單的使用,點tap it就會hide起來的範例:

<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>


<p>tap it</p>

從上面的例子可以看到透過jQuery的一些function我們可以用更短更容易解讀的程式碼來快速做到一些功能,簡化了一些基礎DOM物件的操作,而官方收錄的plugin如下:

MVC

MVC架構並不是新玩意而是在開發上讓各部分盡量拆離,MVC最的目的是將運算邏輯從UI呈現邏輯中抽離,再將分離出來的UI羅集中分離出流程邏輯,依照此需求會達到Model、View、Controller三部分來分類完成開發上各部分的互動或是畫面呈現,在此架構下可以更簡單的釐清問題與修改範圍,達到開發架構上更好的擴充性與維護性。

http://msdn.microsoft.com/zh-tw/library/dd381412(v=vs.108).aspx

  • 模型(Model)

模型物件屬於實作應用程式資料網域邏輯之應用程式的一部分。 通常,模型物件會擷取和儲存資料庫中的模型狀態。 例如,Product 物件可能從資料庫擷取資訊、操作該資訊,然後將更新的資訊寫回 SQL Server 資料庫的 Products 資料表。

  • 呈現(View)

呈現是顯示應用程式中使用者介面 (UI) 的元件。 通常此 UI 是從模型資料建立。 例如 Products 資料表的編輯檢視,它會根據 Product 物件目前的狀態顯示文字方塊、下拉式清單和核取方塊。

  • 控制器(Controller)

控制器可以處理使用者互動、使用模型並且在最後選擇可以轉譯要顯示 UI 的檢視。 在 MVC 應用程式中,呈現只會顯示資訊;控制器則會處理和回應使用者輸入和互動。 例如,控制器會處理查詢字串值,並且將這些值傳遞至模型,接著模型可能會使用這些值查詢資料庫。

結語

在此系列後續的文章將以AngularJS為主去介紹,它可以算是前端上的一個JS MVC的實作,透過此一技術我們可以更加的分離我們的邏輯與呈現上面,遠離傳統的義大利麵格式(邏輯與呈現切不乾淨或是邏輯與模型架構沒有獨立不好維護等問題)。

from

但必須先說的是筆者的使用經驗裡面可能無法完全脫離義大利麵格式,但會盡量讓它變成沾麵,讓他稍為好維護些,Day-4 over!


上一篇
[3]用MAN架構打造超人般的網頁應用程式:[課前準備]淺談CSS
下一篇
[5]用MAN架構打造超人般的網頁應用程式:AngularJS - Intro & Architecture
系列文
用MAN架構打造超人般的網頁應用程式:復仇者聯盟7

尚未有邦友留言

立即登入留言