實作一個 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


資料來源