[MAN鐵人賽]Day 04-[課前準備]淺談JavaScript與MVC開發介紹

2013-09-19

6041
0
Javascript
2013-09-20

摘要:[MAN鐵人賽]Day 04:[課前準備]淺談JavaScript與MVC開發介紹

[課前準備]淺談JavaScript與MVC開發介紹

MVC

JavaScript

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

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

from 比較表

JavaScript有三個明顯的特性

大小寫有別 (Case sensitve) 宣告一個變數test與一個變數Test是兩個不同的變數
物件導向 (Object-Oriented) 物件導向可以說是一種思考方法，它把任何東西都視作一個物件，當你想做某些工作時，只要想想該件工作與什麼物件有關，就可以很容易去表示它，而不用硬記一些沒有關聯的指令名稱。
寬鬆型態 (Loosely Typed) 即支援不需任何特殊宣告的函式，函式可以是物件的屬性的特性。

JavaScript 使用

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

<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body>
</body>
</html>

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

JavaScript CallBack Function

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

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

<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body>
    <button id="btn_1">click me</button>
</body>
</html>

結果1：

callback

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

範例2:

<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body>
    <button id="btn_1">click me</button>
</body>
</html>

結果2:

callback2

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

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

jQuery

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

<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body>
    <p>tap it</p>
</body>
</html>

從上面的例子可以看到透過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 資料表。