基于 API驅動的 Web APP 的 JavaScript 連接一

前面我們已經實現了 Web App 外觀設計的實現，但其實該應用現在還不能做任何事。所以現在可以加一些 JavaScript代碼來實現 App 的交互互動了。

本章特別需要您集中注意力了。但是也不用太擔心，即使您不是一個很資深的程序員，我也能保證您可以完成這段代碼，同時學到很多有價值的技巧。

初始化安裝

首先，我們來建一個 JavaScript文件（ asset/js/main.js), 在該文件里創建一個對象為 Gimmie(這名字就和我們的應用是一樣的)。 該 JS文件被用來儲存我們要使用的那些變量和功能，而這些變量和功能是不屬于Windows 的對象。下面這段代碼我們就放在 “ Document Ready(文檔準備)” 回調函數后面，這段代碼我們前面已經用到過。

var Gimmie = {
    $content: $('.content'),
    $form: $('form'),
};
 
$(document).ready(function(){
    // On page load, execute this...
});

在這段代碼中，我們加了幾個變量在我們的 Gimmie 對象里： $content, $form. 這些都是 JQuery的對象，所以我們在命名的時候都以 $ 開頭做一個特別的標識。因為他們都是特別指定的文檔對象模型的節點，我們在程序代碼里面要調用不止一次，所以我們把他們做為變量儲存在這里，以備將來調用。

表單提交

首先我們要處理的事情就是用戶在文本框里輸入了相關的信息并且點按了提交按鈕。所以在我們的“ Document Ready(文檔準備)” 的回調函數里會加一個監聽器來監聽表單的事件。這段代碼我們可以寫成 $(‘form’).on(), 但因為我們已經把表單元素做為變量儲存起來了，所以我們只需要調用他的引用即可：Gimmie.$fomr.on(). 通過這監聽我們就可以屏蔽掉那些默認的不被監聽的表單行為了（所以表單也不會被不斷刷新）：

$(document).ready(function(){
    Gimmie.$form.on('submit', function(e){
        e.preventDefault();
        // Do more stuff here...
    });
});

加載

現在，當用戶提交表單的時候，我們就應該給用戶顯示 加載 的狀態了。用這種方式讓用戶了解到程序現在其實是在干活的。如果您還記得，我們的設計是這樣的：

要實現這個效果，得在 Gimmie對象內創建一個函數，名字叫 toggleLoading. 用戶提交表單的時候，我們就通過調用表單任務監聽里的 Gimmie.toggleLoading()函數執行。只所以我們稱這個函數為 toggleLoading，是因為執行這段代碼的時候，頁面上會顯示出那相棒形鈕扣狀的加載提示符。我們在提交的時候，該段代碼會執行一次，然后我們再執行一大段其他代碼，當我們的任務完成以后，得再運行一次，以便于把那個加載狀態的圖標去掉。

var Gimmie = {
    /* our other code here */
 
    toggleLoading: function(){
        // Toggle loading indicator
        this.$content.toggleClass('content--loading');
         
        // Toggle the submit button so we don't get double submissions
        // http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery
        this.$form.find('button').prop('disabled', function(i, v) { return !v; });
    },
}
$(document).ready(function(){
    Gimmie.$form.on('submit', function(e){
        e.preventDefault();
        Gimmie.toggleLoading(); // call the loading function
    });
});

注意我們需要在 .content 元素里面再創建一個 toggling 類，就叫他 content—loading吧。 先讓我們在 CSS文件里面加上如下的代碼，以給這個加載過程加上樣式美化。

.content--loading:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .9;
    z-index: 10;
}
 
.content--loading:after {
    content: url('../img/loading.gif');
    position: absolute;
    left: 50%;
    top: 3em;
    margin-left: -16px;
    margin-top: -16px;
    z-index: 11;
}

我們利用了些偽元素在內容區域創建好了加載狀態。 Before 元素被用來在內容展示區域創建一個半透明的白色覆蓋層。然后，我們用 after 元素來展示那個從程序里加載過來的應用的圖標文件。當這個類被加到內容章節里時，在程序執行的時候就會讓用戶感覺到有什么東西正在被加載。

現階段，如果您在輸入框輸入任何文件并點按提交按鈕，一個加載的狀態就會顯示出來了。當然您也就被卡在這里了，因為我們并沒有后續代碼可以執行下去。

表單校驗

在我們把請求提交給iTunes API 之前，先來檢查一下用戶輸入的文本以保證他們的輸入是有效的。

所以首先什么才是正確的數據構成？ 好吧，當您在檢查 iTunes API 文檔庫時，這里有幾個方法可以幫您獲得您想要的內容。比方根據關鍵字進行檢索。我想用的方式是直接在文檔里面查找。

您也可以通過 iTunes ID 直接在蘋果商店里面查找您想要的內容。

現在我們舉點例子，比方我們現在通過iTunes ID來查找 Yelp 軟件應用程序：https://itunes.apple.com/lookup?id=284910350. 特別注意一下這些鏈接里面的應用程序ID 數字。這些鏈接就是我們需要客戶在輸入框中輸入的。

做為一個用戶體驗的愿景考慮，問用戶要求輸入一個應用做為ID 的獨立標示符確實有難度，特別對于新手來說。 所以與其指導用戶如何拿到該應用的ID,不如考慮讓用戶直接輸入該 app的鏈接地址。每個人都知道如何拷貝粘貼地址。 任何人也都可能從該應用的介紹詳情頁面直接得到該應用的地址。（在 iTunes, 頁豐上，或者是在Mac App商店里）。

所以當用戶輸入一個鏈接時，我們就需要驗證以下兩點：

1. 確定他輸入的是以 http://itunes 開頭的有效鏈接。
2. 確定該鏈接里面包含了應用的ID.

要完成這個功能，我們得在 Gimmie 對象里面創建一個校驗函數，當用戶一提交請求時，就先調用該函數進行校驗。

var Gimmie = {
    /* our prior code here */
    userInput: '',
    userInputIsValid: false,
    appId: '',
    validate: function(input) {
        // validation happens here
    },
}
 
Gimmie.$form.on('submit', function(e){
    /* our previous code here */
    Gimmie.userInput = $(this).find('input').val();
    Gimmie.validate();
    if( Gimmie.userInputIsValid ) {
        /* make API request */
    } else {
        /* throw an error */
    }
});

在上面的這段代碼，我們做了如下的工作：

我們在 Gimmie里面加了幾個變量和一個函數：

• userInput 是一個字符串變量，被設置用來接收用戶在輸入框中輸入的文本信息。
• userInputIsValid: 是一個布爾變量，根據判斷用戶所輸入的字符值有效來決定為其賦值為真或假。（接下來我們就會寫這個測試了）。
• appId: 是一個數字字符串，該變量的值將會從判斷為有效的鏈接中抽取出來的。
• Validate: 是一個函數，我們調用該函數來判斷用戶的輸入是否有效。

在表單提交時

• 給變量 Gimmie.userInput 賦值為用戶在輸入框輸入的值。
• 調用 Gimmie.validate()函數來校驗該輸入是否有效。
• 執行判斷語句。如果用戶的輸入是有效的（這個有函數 Gimmie.validate 來決定），那程序就可以把該請求遞交給 iTunes API 了。 如果無效，程序會給用戶展示一個出錯信息，告訴用戶剛才的輸入是不正確的。

現在我們可以開始寫校驗代碼了。在HTML頁面中把輸入類型設置為 URL. 設置該屬性可以讓有些瀏覽器直接校驗該輸入是否為鏈接了，但該屬性并不是所有的瀏覽器都支持，在很多瀏覽器，該功能甚至不工作。這也就意味著在某些瀏覽器里面，即使用戶就是隨便輸入點東西，例如 “blah”,瀏覽器也會接受，并且提交該請求，而在部分瀏覽器，在提交該請求之前至少會要求客戶所輸入的內容是以 http:// 開頭的。但我們要校驗的是用戶所提交的是不是以 http://itunes 開頭的，所以我們必須寫 javascript 來處理這事兒。

var Gimmie = {
    /* our prior code */
    validate: function() {
        // Use regex to test if input is valid. It's valid if:
        // 1. It begins with 'http://itunes'
        // 2. It has '/id' followed by digits in the string somewhere
        var regUrl = /^(http|https):\/\/itunes/;
        var regId = /\/id(\d+)/i;
        if ( regUrl.test(this.userInput) && regId.test(this.userInput) ) {
            this.userInputIsValid = true;
            var id = regId.exec(this.userInput);
            this.appId = id[1];
        } else {
            this.userInputIsValid = false;
            this.appId = '';
        }
    }
}

在這我們采用正則表達式來測試用戶的輸入是否滿足校驗條件。讓我們更詳細的看看正則表達式的寫法吧：

var regUrl = /^(http|https):\/\/itunes/i;
var regId = /\/id(\d+)/i;

這是我們所定義的兩條正式表達式語法。（您也可以在這個鏈接了解更多的關于正則表達式的內容）。 我簡要說一下這個正則表達式可以用來做什么：

regId 主要是為了校驗用戶所輸入的鏈接里面是否包含了應用的 ID. 所有有效的iTunes 商店應用鏈接都會帶有/id,然后在這個標識后面跟著一大串數字。

/\/id 表明：在這個字串里面任何地方找到 /id 子串。（前面的例子我們已經講過了 \ 的功能）。

（\d+）表示是在尋找一個數字序列 （0-9之間的），把他們全部抓取出來。括號里面的內容表示我們需要把抓取到的數字序列保存下來，應該這個抓取到數字序列就是我們所需要的應用ID.  /d是一個特別的符號表示這個字串是用來收集數字的，(+)表示匹配所有的（0-9)的數字一次或多次。

/i 表示正則表達式的結束，同時 i 表明該正則表達式不用關注大小寫字母的問題。（所以 /ID938491 也都是有效 ID鏈接。）

未完待續。。。

不深思則不能造于道。不深思而得者，其得易失。

名人名言- 曾國藩

• By 優聯實達(譯)
• 2015-10-13
• 2285
• 公司新聞，網站開發，網站設計，UI