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

DAY 2

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

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

javascript 鐵人賽 man

2013-10-03 00:22:14

1907 瀏覽

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如下：

ui
jquery
animation
form
input
image)
slider
slideshow
[effect]](http://plugins.jquery.com/tag/effect/)
gallery

MVC

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

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