章節連結
若要建立自己的框架，可以先從瀏覽知名的框架系統開始，jQuery 是個很好用的工具，自然旗寫法是可以好好觀摩的。最後，可以試著建立一個自己的框架(可以模仿 jQuery)，做出一個 Greetr 的框架，內含多種方法可供調用。
課程對應章節
Course 69 ~ Course 80 (全部一共有 85 Courses)
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/w7vrql6
內容
預期功能
1.當使用者選擇語言並點擊按鈕時，就顯示對應語言的招呼語。
2.要能相容 jQuery
3.要能每種方法間可以串聯(chain)使用
程式碼
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <html> <div id="logindiv"> <select id="lang"> <option value="en">English</option> <option value="de">German</option> </select> <input type="button" value="Login" id="login" /> </div> <h1 id='greeting'></h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script> <script src="greetr.js"></script> <script src="app.js"></script> </body> </html> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
/*greetr.js*/ (function (global, $) { // 1. to initialize a new Object for each time let Greetr = function (firstName, lastName, language) { return new Greetr.init(firstName, lastName, language) } // 5. variables are used in the closure let supportedLangs = ['en', 'de']; let greetings = { en: 'Hello', de: 'Hallo' } let formalGreetings = { en: 'Greetings', de: 'Guten Tag' } let logMessages = { en: 'Logged in', de: 'loggen ein' } // 2-1. to get initial prototype // 6. write methods 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() }, // 7. to call a series of methods through the chain greet: function (formal) { let msg = '' if (formal) { msg = this.formalGreeting() } else { msg = this.greeting() } if (console) { console.log(msg) } // this refers to the calling object at the execution time, which makes the 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 }, // capability with jQuery HTMLGreeting: function (selector, formal) { let msg = '' if (!$) { throw 'jQuery is not loaded' } if (!selector) { throw 'Missing jQuery selector' } if (formal) { msg = this.formalGreeting() } else { msg = this.greeting() } $(selector).html(msg) return this } } // 2-2. init function Greetr.init = function (firstName, lastName, language) { let self = this self.firstName = firstName || '' self.lastName = lastName || '' self.language = language || 'en' } // 3. change Greetr.init.prototype to Greetr.prototype // methods should be set on 'Greetr.prototype' Greetr.init.prototype = Greetr.prototype // 4. to call by global or G$ global.Greetr = global.G$ = Greetr }(window, jQuery)) let a = G$('John', 'Doe') //Hello John! a.greet() //Hello John! Greetings, John Doe a.greet().greet(true) //Hello John! Guten Tag, John Doe a.greet().setLang('de').greet(true) /*app.js*/ $('#login').click(function () { let loginGreeting = G$('Andy', 'Lau') $('#logindiv').hide() loginGreeting.setLang($('#lang').val()) .HTMLGreeting('#greeting', true) // formal //.HTMLGreeting('#greeting') // daily .log() }) |
