在上一篇 [筆記] 親手打造屬於你自己的 JavaScript Framework/Library（中），我們初步建立了好了自己的 framework ，並且可以成功運用它。最後，我們要來試著讓我們所做的 Framework 和 jQuery 做更多的結合，並且開始應用它。
我們的目標是希望能夠利用我們所做的這個 library 做一個簡單的登入呈現頁面，現在就讓我開始吧！
HTML部分
首先 HTML 的部分我們先寫一個很簡單的登入視窗，像是這樣：
<body>
<div id="app">
<div id="login">
<select id='Lang'>
<option value="en" selected>English</option>
<option value="zh">中文</option>
</select>
<button>登入</button>
</div>
<h1 id="logMsg"></h1>
</div>
<script src="jquery-3.1.1.js"></script>
<script src="greetr.js"></script>
<script src="app.js"></script>
</body>
JS 部分（greetr.js）
接下來，我們要在之前做的 Library 中加入 jQuery 的方法，一樣放在 Greetr.prototype 裡面，我們加入一個方式叫做 greetHTML ，這個方法可以直接幫我們把 greet 輸出的文字，寫入 HTML 當中：
greetHTML: function(selector, formal) {
if (!$) throw "jQuery not loaded";
if (!selector) throw "no seletor";
let msg = "";
if (formal) {
msg = this.formalGreeting();
} else {
msg = this.greeting();
};
$(selector).html(msg);
return this;
}
於是我們就做好我們的 Library 了，順便把完整的 Library Code (greetr.js) 放一份在下面：
;
(function(global, $) {
var Greetr = function(firstname, lastname, language) {
return new Greetr.init(firstname, lastname, language);
}
let supportedLangs = ['en', 'zh'];
let greetings = {
en: 'Hello',
zh: '你好'
};
let formalGreetings = {
en: 'Greetings',
zh: '您好'
};
let logMessages = {
en: 'Logged',
zh: '登入'
};
Greetr.prototype = {
fullName: function() {
return this.firstname + ' ' + this.lastname;
},
validate: function() {
if (supportedLangs.indexOf(this.language) === -1) {
throw 'Invalid Language';
}
},
greeting: function() {
return greetings[this.language] + ' ' + this.firstname;
},
formalGreeting: function() {
return formalGreetings[this.language] + ', ' + this.fullName();
},
greet: function(formal) {
let msg;
// if undefined or null, it will coerced to 'false'
if (formal) {
msg = this.formalGreeting();
} else {
msg = this.greeting();
}
if (console) {
console.log(msg);
}
// 'this' refers to the calling object at execution time
// makes method chainable
return this;
},
log: function() {
if (console) {
console.log(logMessages[this.language] + ' ' + this.fullName());
}
return this;
},
setLang: function(lang) {
this.language = lang;
this.validate();
return this;
},
greetHTML: function(selector, formal) {
if (!$) throw "jQuery not loaded";
if (!selector) throw "no seletor";
let msg = "";
if (formal) {
msg = this.formalGreeting();
} else {
msg = this.greeting();
};
$(selector).html(msg);
return this;
}
};
Greetr.init = function(firstname, lastname, language) {
let self = this;
self.firstname = firstname || '';
self.lastname = lastname || '';
self.language = language || 'zh';
self.validate();
}
Greetr.init.prototype = Greetr.prototype;
global.Greetr = global.G$ = Greetr;
}(window, jQuery))
接著，我們就可以實際應用我們的 Library 了。
Library 應用（app.js）
實際應用的時候，我們會寫在另外一支 app.js 中，現在我們希望當我按下登入之後，就會在網頁上出現打招呼，因此，我們可以在 app.js 中這樣寫：
$('#login').on('click', 'button', function() {
let pj = G$("Po-Jung", "Chen");
pj.setLang($("#Lang").val()).greetHTML('#logMsg', true);
})
透過這樣的方式，當我們按下按鈕之後，就會出現相對應的打招呼文字：
看起來是相當簡單的原理，但只要再加上一些 CSS 的修飾，就可以是一個相當出色的登入頁面，可以參考看看這個頁面！
→回到此系列文章目錄
0 意見:
張貼留言