2017年1月18日 星期三

[筆記] 親手打造屬於你自己的 JavaScript Framework/Library(下)




在上一篇 [筆記] 親手打造屬於你自己的 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 的修飾,就可以是一個相當出色的登入頁面,可以參考看看這個頁面





→回到此系列文章目錄



Share:

0 意見:

張貼留言