實作一個 JavaScript 迷你框架 (三)

發表於 | 更新於: | 分類於 ， |

前言

這篇應該就是JavaScript 全攻略：克服 JS 的奇怪部分的最後一篇筆記了(灑花) ，如果要學好 JS這堂課真的是扎穩馬步的好課，一開始或許會覺得有點艱澀，不過比起一些書籍來說，算是對新手相對友善了的～如果影片真的有聽不懂的地方，可以google搜尋一些前輩的筆記來閱讀，會很有幫助的！

關於克服JS的奇怪部分筆記，特別推薦 PJChender和 SimonAllen這兩位大大的筆記，寫得非常清楚易懂，有些看影片還不能理解的地方，看了他們寫的筆記很快就能通了 :thumbsup:


好，到前一篇為止，我們完成的需求有：

  • 是一個可重複使用的 library/framework，也就是說，每一個安裝此 framework 的人可以直接使用，不會和它原本程式碼有所衝突。

  • 和 jQuery 只需要輸入 “$( )” 一樣，我們可以使用 “G$( )” 來建立物件。

  • 當我們告訴它我們的姓（lastname）名（firstname）還有選擇的語言（language）時，它可以用正式（formal）和非正式（informal）的方式和我們打招呼。

  • 支援英文（English）和中文（Chinese）兩種語言。

只剩下最後一個需求囉：

  • 支援 jQuery ，可以把 greetr 產生的訊息直接顯示於HTML中。

HTML

我們首先先來寫一些HTML，做出一個簡易的畫面。內容有下拉選單提供語言選擇，還有一個按鈕。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <div class="logdiv">
        <select id="lang">
            <option value="en">English</option>
            <option value="ch">中文</option>
        </select>

        <input type="button" value="login" id="login" />
    </div>
    
    <h1 id="logMsg"></h1>

    <script src="jquery.js"></script>
    <script src="greetr.js"></script>
    <script src="app.js"></script>
</body>

新增方法 - 連動 jQuery 選擇器

現在要來新增一個方法，具體功能如下

  • 可以傳入參數(如 #btn)，配合 jQuery 提供使用者選取DOM的功能。
  • 檢驗環境是否有 jQuery，如果沒有利用throw 丟出錯誤訊息。
  • 檢驗是否有傳入DOM選擇對象，如果沒有用 throw 丟出錯誤訊息。
  • 可以傳入參數，讓使用者選擇用正式或非正式，方法打招呼。
  • 將打招呼的結果，呈現在畫面上，畫面指的即使用者傳入的選擇器對象中。
  • 支援鏈式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
HTMLGreeting: function(selector, formal) {
    
    if (!$) {
        throw 'not found jQuery';
    }
    if (!selector) {
        throw 'Missing jQuery selector';
    }

    var msg;
    if (formal) {
        msg = this.formalGreetings();
    }else {
        msg = this.greeting();
    }

    $(selector).html(msg);

    return this;
}

基本上就是前一篇的一些方法綜合起來的應用，記得一樣要放在 Greetr.prototype 中。


實際來使用框架

現在要配合剛剛簡易的畫面來使用 HTMLGreeting 這個方法。

1
2
3
4
5
6
$('#login').on('click',function(){
    var person = G$('Dylan', 'Liu');
    var lang = $('#lang').val;
  
    person.setLang(lang).HTMLGreeting('#logMsg', true);
});

點選語言再按下 login ，畫面就呈現囉。



Codepen Demo


資料來源