適用於多種JavaScript 框架系統的既有網頁內容之重構與元件化 - 政大學術集成

全文

(1)國立政治大學資訊科學系 Department of Computer Science National Chengchi University. 碩士論文 Master’s Thesis. 立. 政治大. ‧ 國. 學. ‧. 適用於多種 JavaScript 框架系統的既有網頁內容之重構與元件化 The Refactor and Componentization of Legacy Web Contents for use in Modern JavaScript Frameworks. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 研究生：江太ㄧ指導教授：陳正佳博士中華民國 108 年 5 月 25 日. 1. DOI:10.6814/NCCU201900017.

(2) 摘要網頁內容元件化是現今網頁發展的主流，許多目前的前端網頁設計框架的設計理念均是以模組化元件方式將內容置於網頁之中。為了經由這些框架再次利用既有網頁的一些有用內容，我們因此計劃將它們提取並重構為基於 W3C Web 組件規格為基礎的客製化 Web 元件，並在三個領先的 JavaScript 框架：Angular，React 和 Vue 中實現這些元件。網頁內容元件化使得開發者可以更容易重複使用與維護網頁內容。在製作成客製化網頁元件之前我們通常需要對選定網頁內容進行萃取與重構。所謂萃取是指由瀏覽網頁中識別並擷取選定部分的對應原始碼。而重構則是指在保有原有功能與效果的前提之下，對萃取的網頁內容進行重組或增刪。至於元件化，除了封裝萃取的網頁內容使其成為客製化元素的內容範本之外，尚需抽象化範本內容以擴增其應用範圍。具體作法是選擇和參數化內容模板中的一些可變項目，而前端框架將允許未來使用該元件的. 政治大目。為方便使用者達成上述任務，我們還提供一套方法與輔助工具，可以幫助使用者立開發人員能夠通過設置屬性和元素內容的方式傳遞他們自己的內容來替換這些可變項有效的將網頁內容轉換為客製化元件。. ‧ 國. 學. 本論文針對兩個主題具體實作。其一是由一些網頁中選取具有重複使用價值的內容並將其製作為三個網頁框架 (Angular、Vue、React) 下的網頁元件。這些元件均提供可. ‧. 客製化的參數調整，如顏色、字型等等。我們實際完成的網頁元件有 Footer 元件、圖. y. Nat. 片幻燈片元件、JSON 資料表格化元件、查詢郵遞區號和縣市人口的地圖元件等。其次. sit. 則是提供一套方便萃取與重構網頁內容的編輯工具。由於 Google Chrome 是目前的主. al. er. io. 流瀏覽器，此工具因而實作為 Chrome Extension。它可和瀏覽網頁互動，具體功能包含. n. 呈現當前網頁的 DOM 結構，以及醒目標示特定選取 DOM 節點在渲染頁面中的對應區. Ch. i n U. v. 塊。此外也提供預覽功能，可彈跳一個獨立頁面顯示特定 DOM 節點的對應渲染畫面。. engchi. 2. DOI:10.6814/NCCU201900017.

(3) Abstract The componentization of web contents is the mainstream of present web development. Nowadays one of the most important features found on modern leading front-end web development frameworks is letting developers place webpage content in the form of modular web component. In order to reuse some useful contents of legacy web pages by these frameworks, we thus plan to extract and refactor them into custom web components, which are proposed by W3C’s Web Component specification, and implement these components in three leading JavaScript frameworks: Angular, React and Vue. Componentization makes it easier for developers to reuse and maintain web contents. Before making a custom web component, however, we usually need to extract and refactor selected web content. The so-called extraction refers to the identification and acquisition of corresponding source code of the selected content from the browsed webpage. Refactor refers to the re-. 政治大 functions and effects. As for componentization, besides encapsulating the extracted content to 立. organization and mutation of extracted web content under the premise of retaining the original make it the template content of a customized element, we need to abstract the content as well. ‧ 國. 學. in order to enlarge its application range. The actual action of abstraction is to select and parameterize some variable items in the content template, and the adopted front-end framework will. ‧. allow the developers who use the component in the future to replace these items by their own contents passed in through the setting of attributes or element content. In order to facilitate users. y. Nat. sit. to achieve the above tasks, we also provide a suite of methods and tools to help users effectively. al. er. io. convert web content into customized components.. n. There are two concrete tasks we completed in this thesis. The first is to construct useful. Ch. i n U. v. web components by selecting some webpage contents with reusable value and then refactor. engchi. and componentize them under the three web frameworks: Angular, Vue and React. All these components allow customization of properties such as color, font type, and more via setting of attributes and element content. The web components we have completed include footer, image slideshow, tabular component for JSON data, map components for querying postal code and population, and visual components for linear data etc. The second is to provide an editing tool that facilitates the extraction and refactor of web content. Since Google Chrome is the leading browser, implemented as a Chrome Extension is this tool, which can always interact with the browsed webpage.Its functions include the display of the DOM structure for the current browsed webpage, and the highlight in the rendered page of the area corresponding to any node selected through the tool. In addition, every DOM node selected by the tool can be previewed by a seperate popup page.. 3. DOI:10.6814/NCCU201900017.

(4) 目錄. 2. 論文簡介. 8. 1.1. 動機 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 8. 1.2. 實現方式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 9. 1.3. 論文貢獻與特色 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 10. 相關研究. 11. 2.1. Web Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 11. 2.1.1. HTML imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 11. 2.1.2. Shadow DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 12. 2.1.3 2.1.4. Web Component 實作 . . . . . . . . . . . . . . . . . . . . . . . . . .. ‧. JavaScript 框架 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 15. 2.3.1. Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 15. 2.3.2. React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 19. 2.3.3. Vue. 20. 軟體工程的元件化和網頁元件化. Nat. er. io. sit. . . . . . . . . . . . . . . . . . . .. al. 21. 架構下各個元素間怎麼做互動 . . . . . . . . . . . . . . . . . . . . .. 22. n. Chrome Extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 實作方法 3.1. 3.2. 15. iv . . . . . . . . .C . . . . . . . . . . . . .n . . . . . . . . . . . . . . hengchi U. 2.4.1 3. 13 14. 2.2.1. 2.4. 13. 基於元件的軟體工程 [1, 2, 3] (Component-based software engineering) . . . . . . . . . . . . . . . . . . . .. 2.3. 12. y. 2.2. Customized Elements . . . . . . . . . . . . . . . . . . . . . . . . . . .. 學. 2.1.5. 政治大 Templates . . . 立 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. ‧ 國. 1. 26. 重構既有網頁 (Angular 版本元件) . . . . . . . . . . . . . . . . . . . . . . .. 26. 3.1.1. W3CSS table 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 27. 3.1.2. Footer 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 29. 3.1.3. JSAV 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 30. 3.1.4. Slide Show 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 31. 3.1.5. JSON 表格元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 32. 3.1.6. 透過地圖輸入方式呈現郵遞區號元件 . . . . . . . . . . . . . . . . .. 33. 3.1.7. 台灣行政區資料元件 . . . . . . . . . . . . . . . . . . . . . . . . . .. 34. 重構既有網頁 (Vue 版本元件) . . . . . . . . . . . . . . . . . . . . . . . . .. 35. 4. DOI:10.6814/NCCU201900017.

(5) JSAV 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 35. 3.2.2. Footer 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 36. 3.2.3. Slide Show 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 36. 3.2.4. JSON 表格元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 36. 3.2.5. 透過地圖輸入方式呈現郵遞區號. . . . . . . . . . . . . . . . . . . .. 36. 3.2.6. 台灣行政區資料元件 . . . . . . . . . . . . . . . . . . . . . . . . . .. 37. 重構既有網頁 (React 版本元件) . . . . . . . . . . . . . . . . . . . . . . . . .. 38. 3.3.1. JSAV 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 38. 3.3.2. Footer 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 39. 3.3.3. Slide Show 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 39. 3.3.4. JSON 表格元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 39. 3.3.5. 透過地圖輸入方式呈現郵遞區號. . . . . . . . . . . . . . . . . . . .. 40. 政治 ............... Chrome Extension 網頁萃取工具 . . . . . . . . . 大立 ......................... 3.4.1 網頁萃取工具系統架構. 41. 3.4.2. 產生中間格式 (Pre-format) . . . . . . . . . . . . . . . . . . . . . . .. 44. 3.4.3. 透過中間格式產生 Angular 元件 . . . . . . . . . . . . . . . . . . . .. 45. 3.4.4. 透過中間格式產生 Vue 元件 . . . . . . . . . . . . . . . . . . . . . .. 46. 3.4.5. 透過中間格式產生 React 元件 . . . . . . . . . . . . . . . . . . . . .. 46. 將元件打包為 NPM 套件 . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 48. ‧. y. 44. v. . . . . . . . . . . . i Chrome Extension 網頁萃取工具操作展示 . . . . . . . n Ch engchi U. 49. 5.1. 結論 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 53. 5.2. 未來研究方向 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 53. 4.2 5. al. 42. 49. Chrome Extension 網頁萃取工具操作流程 . . . . . . . . . . . . . . . . . . .. n. 4.1. 學. 操作流程與展示. io. 4. Nat. 3.5. sit. 3.4. 台灣行政區資料元件 . . . . . . . . . . . . . . . . . . . . . . . . . .. er. 3.3.6. ‧ 國. 3.3. 3.2.1. 結論與未來研究方向. 參考文獻. 49 53. 54. 5. DOI:10.6814/NCCU201900017.

(6) 圖目錄 2.1. Shadow DOM 概念圖 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 12. 2.2. template 樣板 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 13. 2.3. 透過 JavaScript 使用 template . . . . . . . . . . . . . . . . . . . . . . . . . .. 13. 2.4. template 範例結果 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 14. 2.5. Angular 架構圖 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 16. 2.6. Angular 元件結構 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 17. 2.7. Angular Lifecycle sequence . . . . . . . . . . . . . . . . . . . . . . . . . . .. 17. 政治 ............... 2.9 Vue 資料傳遞 . . . . . . . . . . . . . . . . . . . . 大 2.10 Chrome Extension 圖示立 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 20. 2.11 Hello world 專案資料夾 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 22. 2.12 Hello world manifest.json . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 23. 2.13 popup.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 23. Vue 架構圖 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 學. ‧. ‧ 國. 2.8. 21 21. 23. 2.15 manifest.json 與 popup.html . . . . . . . . . . . . . . . . . . . . . . . . . . .. 24. 2.16 background.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 24. 2.17 content.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 24. n. al. er. io. sit. y. Nat. 2.14 執行 popup.html 畫面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. v. 2.18 顯示頁面標題的 Chrome Extension 範例 . . . . . . . . . . . . . . . . . . . .. Ch. engchi. i n U. 25. 3.1. 重構網頁內容轉換為元件之通用過程流程圖 . . . . . . . . . . . . . . . . .. 27. 3.2. W3CSS Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 27. 3.3. 元件基本架構 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 28. 3.4. 在 App Component 使用客製化元件 . . . . . . . . . . . . . . . . . . . . . .. 28. 3.5. data.ts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 28. 3.6. w3css-table 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 29. 3.7. Footer 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 29. 3.8. Footer 元件使用方式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 30. 3.9. JSAV Angular Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 30. 3.10 元件性質綁定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 30. 3.11 Binary Search Component . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 31. 3.12 Binary Search Component . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 31. 3.13 Image Slide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 31. 6. DOI:10.6814/NCCU201900017.

(7) 3.14 Image Slide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 32. 3.15 使用 JSON 表格元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 32. 3.16 以表格形式呈現 JSON 資料 . . . . . . . . . . . . . . . . . . . . . . . . . . .. 32. 3.17 地圖輸入呈現郵遞區號元件 . . . . . . . . . . . . . . . . . . . . . . . . . .. 33. 3.18 台灣各行政區人口數資料 . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 34. 3.19 台灣行政區資料元件以人口為例 . . . . . . . . . . . . . . . . . . . . . . . .. 34. 3.20 元件使用方式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 34. 3.21 引入相關函式庫 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 35. 3.22 JSAV 樣板 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 35. 3.23 Binary Search 客製化元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 35. 3.24 引入相關函式庫 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 38. 3.25 App 元件使用 BinarySearch 元件 . . . . . . . . . . . . . . . . . . . . . . . .. 38. 政治 ............... 3.27 Footer 元件程式碼 . . . . . . . . . . . . . . . . . 大 3.28 Slide Show 元件使用 . 立 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 38 39. 3.29 JSON 表格元件使用方式 . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 39. 3.30 郵遞區號元件程式碼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 40. 3.31 Chrome Extension 顯示目前網頁 DOM 結構 . . . . . . . . . . . . . . . . . .. 42. 3.26 Binary Search 客製化元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 學. ‧. ‧ 國. 39. 42. 3.33 視覺化選取的 DOM 節點 . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 43. 3.34 獨立顯示選取的 DOM 節點在新的頁面 . . . . . . . . . . . . . . . . . . . .. 43. 3.35 編輯擷取畫面的文字 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 43. er. io. sit. y. Nat. 3.32 Chrome Extension 顯示目前網頁 DOM 結構 . . . . . . . . . . . . . . . . . .. al. 3.38 設定元素標籤 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 45. 3.39 中間格式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 45. 3.40 轉換為 Angular 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 46. 3.41 轉換為 Vue 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 47. 3.42 轉換為 React 元件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 47. 4.1. 操作流程 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 49. 4.2. Chrome 擴充功能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 49. 4.3. 顯示目前網頁的 DOM 結構 . . . . . . . . . . . . . . . . . . . . . . . . . . .. 50. 4.4. 標記網頁中 DOM 節點 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 51. 4.5. 擷取網頁中的 DOM 節點並加上標籤 . . . . . . . . . . . . . . . . . . . . .. 51. 4.6. 擷取網頁中的 DOM 節點 . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 52. n. v i n 設定元素標籤種類 . . . . .C . h . . . . . . . . . . .U. . . . . . . . . . . . . . . engchi. 3.36 網頁萃取工具系統架構 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 44. 3.37. 44. 7. DOI:10.6814/NCCU201900017.

(8) 第一章 1.1. 論文簡介. 動機由於網頁前端技術在最近幾年快速蓬勃發展，因而衍生出許多更新的網頁前端框. 架，例如 react[4], angular[5], Aurelia[6] 與 vue[7] 等，可以更容易的讓開發者迅速開發客戶端網頁。然而舊有的既有網頁應用，已經累積了龐大的程式碼與網頁。如何在新型網頁前端框架上，善用這些既有的，透過較舊的標準和技術完成的產製，以避免以往投資付諸流水，顯然是一個非常值得關注的議題。因此我們希望能夠重新改造與翻修部分舊有但卻有用的網頁內容，使其符合當前的網頁標準並能置入於最新的前端網頁. 治政的技術，將原來網頁中好用的組件轉換成各種最新框架下的元件。這些元件不但比原大立組件具有更好的模組結構，更能保留並擴大其原有功能。框架之中，以避免既有投資的浪費。我們採用的策略是透過網頁內容重構以及元件化. ‧ 國. 學. 目前最新的網頁前端框架均有以網頁元件 (Web Components) 組成網頁應用的想法，而各自也有其實現元件的不同做法。元件化有三個優點，第一次是可組合性：讓一個. ‧. 網頁由多個子元件 (component) 組成，每一個元件只負責一小部份功能, 可以更方便的加入和移除元件。第二是重複利用性 [8]：元件只需開發一次，就能使用在多個地方。. sit. y. Nat. 最後是可維護性：由於每一個元件均模組化且功能明確，其與周邊元件的耦合程度低，因此在除錯和維護上會相對容易。若是沒有使用元件化開發，所有的功能都耦合在一. io. er. 起，功能和功能之間可能會互相影響，在除錯和維護上會比較困難。. al. n. v i n Ch 重組或改寫，以達到某些軟體品質的改善或適應新的需求。例如新程式可能是透過其 engchi U 程式重構 (Program Refactoring)[9] 是指在不改變功能與語意的情況下，將原有程式. 它語言或是以更簡潔的寫法完成，或者新程式可能具有更模組化的結構，以便於後續的維護與更新擴充等。重構的概念同樣值得並應該應用於現有網路上的千千萬萬既有網頁內容。其動機是這些網頁歷經一二十年不斷累積改造演化至今，其內容及人機介面必然有相當部分是符合或滿足現今大部分訪客的使用需求。因此如何輕易而快速的重複使用這些完善網頁內容與介面，使其重現於新設計網頁，顯然是一值得討論與研究的課題。而我們的做法，即是網頁內容重構 (Web content refactoring): 我們針對選取的部分網頁內容，重新改寫重組並擴充其 HTML, CSS 與 Javascript 實作，一方面使新內容具有與舊內容相同或類似的視覺效應，但另一方面新內容又可得以下好處: 其一是新內容允許抽象化舊網頁內容使原網頁的特定固定項目 (例如字體，顏色，表格的行列數等) 參數化，因而當在使用新內容時，可以經由設定不同的參數值，客製化新網頁內容的視覺效應，使其與原網頁具有相當的變異，而不完全等同於原網頁。其二是新內容將以元件的方式實作於現有主流網頁前端框架，因此當以這些框架開發網頁時，可. 8. DOI:10.6814/NCCU201900017.

(9) 輕易方便的將這些重構元件，置於新設計的網頁之中。傳統上一個開發者如果看上既有網頁中部分內容的視覺效果，希望可以在自己設計的網頁上重現類似效果，一般的做法是查看網頁的原始碼，在茫茫程式碼中尋找對應的實作，並且還需要確定是否使用了某些相依的函式庫才能夠使用。若是在元件化開發的情形下，一個元件可能就包含了頁面的一個區塊，使用者只需要找到所需內容包含的元件，並且做載入元件的動作就可以使用該元件，省下許多拼湊程式碼的功夫。本研究將一些既有的網頁或是網頁中好用的功能做重構和元件化，讓使用者能夠在各個 JavaScript 框架之下仍能使用這些既有的網頁與功能。另外也提供一套系統化的方法與工具將目前瀏覽的網頁中的部分內容轉換為 JavaScript 框架如 Angular、React 和 Vue 的網頁元件。此系統方法與工具能夠讓使用者用較容易的操作方式來擷取網頁部分內容與製作客製化的網頁元件。. 1.2. 實現方式. 治政本論文針對兩個主題具體實作。其一是由一些網頁中選取具有重複使用價值的內大容並將其製作為三個網頁框架立 (Angular、Vue、React) 下的網頁元件。這些元件均提供 ‧ 國. 學. 可客製化的參數調整，如顏色、字型等等。我們實際完成的網頁元件有 W3CSS Table、 Footer 元件、圖片幻燈片元件、JSON 資料表格化元件以及查詢郵遞區號和縣市人口的. ‧. 地圖元件。W3CSS Table 主要是能夠將資料以檔案作為參數傳入到客製化元件中並且將傳入的資料以 W3CSS 表格樣式的方式做呈現。除了傳入檔案作為參數之外，我們設. sit. y. Nat. 計了幾個共同基本參數可以讓所有元件都可以使用，如字型、字體顏色、背景顏色等。 Footer 元件主要是針對目前的網頁排版做設計，大多數的網頁最底部都會有相關資訊的. io. er. 放置，如聯絡資訊、社群網路資料等等。於是我們設計 Footer 元件的參數能夠接收大. al. n. v i n Ch 夠呈現相對應的圖示並可供點擊連結。圖片幻燈片元件能夠接受圖片路徑或是圖片位 engchi U. 多數流行的社群網路資訊，如 Facebook, Twitter, Linkin 等。接收這些社群網路資料後能. 置的陣列作為參數傳入，並傳入圖片相對應的標題陣列參數。圖片幻燈片元件接收到這些參數後，變能夠以圖片幻燈片的方式將圖片和相對應的標題做呈現。JSON 資料表格元件可以讀取一個 JSON 檔案，這個 JSON 檔案有一些格式規範，如 JSON 檔案中的父層資料必須放在以 data 為 key 的欄位中，而子層的資料必須以相同的物件格式放入以 children 為 key 的欄位中。JSON 資料表格元件接收到檔案之後，便可以將 JSON 資料以表格的型式做呈現並且不同層的資料可以做收合的操作。查詢郵遞區號元件的設計理念是目前查詢郵遞區號是以地址作為輸入做查詢，還是以字串的方式做搜尋。我們提供一個元件能以地圖做為輸入方式來查詢郵遞區號。當使用客製化元件後，便會產生一張地圖，目前地圖以台灣區域作為範例，點擊地圖內的位置後會以 popup 的方式產生點擊地址與對應的郵遞區號。縣市人口元件能夠以台灣各縣市為區分呈現各縣市的資料。依據傳入元件內的 JSON 檔案和內容標題做呈現。本論文以台灣人各縣市人口為範例產生範例元件，JSON 資料格式為各縣市名稱作為 key，數值部分為字串型態。. 9. DOI:10.6814/NCCU201900017.

(10) 標題參數為人口數。點擊縣市的各區域能夠分別呈現所點擊的縣市人口數資料。第二個主題為提供一套方便萃取與重構網頁內容的編輯工具。由於 Google Chrome 是目前的主流瀏覽器，此工具因而實作為 Chrome Extension。它可和瀏覽網頁互動，具體功能包含呈現當前網頁的 DOM 結構，以及醒目標示特定選取 DOM 節點在渲染頁面中的對應區塊。此外也提供預覽功能，可彈跳一個獨立頁面顯示特定 DOM 節點的對應渲染畫面。在獨立頁面能夠針對擷取內容的各個元素分別做標記，目前提供變數化、和有序/無序列表標籤。我們能夠依據這些標記來產生一個中間格式的檔案，透過在標記的元素外增加一個自定義的元素如 jt-v, jt-ul 等。這些標籤並不會影響 HTML 的呈現，當瀏覽器解析到沒有定義的元素時會忽略處理。所產生的中間格式能夠使我們轉換到各個 JavaScript 框架之下的網頁元件時更加容易。. 1.3. 論文貢獻與特色. 治政為 Web Component，並且將之實現為三個選用 JavaScript 框架下的元件，包含 Angular，大立 React 與 Vue。各個實現的網頁元件透過參數化的方式提供使用者能夠容易的調整網頁本研究提供一套方法與工具，可以透過系統化的方式將既有的網頁部分內容轉換. ‧ 國. 學. 元件與產生使用者客製化的網頁元件。使用已經製作好的客製化元件能夠讓使用者與開發者省下重新製造輪子的時間。若沒辦法滿足需求時亦可以將客製化元件重新組裝. ‧. 或是在客製化元件上另外增加擴充功能來製作更龐大的應用。. 本研究亦提供一套 Chrome Extension 網頁擷取工具，它可和瀏覽網頁互動，具體功. sit. y. Nat. 能包含呈現當前網頁的 DOM 結構，以及醒目標示特定選取 DOM 節點在渲染頁面中的對應區塊。此外也提供預覽功能，可彈跳一個獨立頁面顯示特定 DOM 節點的對應渲染. io. n. al. er. 畫面。在彈跳的獨立頁面中提供三個選用的 JavaScript 框架下的元件供下載。. Ch. engchi. 10. i n U. v. DOI:10.6814/NCCU201900017.

(11) 第二章. 相關研究. 本章節將會介紹本論文所使用到的相關技術與相關背景知識。依序介紹什麼是網頁元件 (Web Component)、W3C 規範的網頁元件所需要的要素包含 HTML import、 Shadow DOM、Template 與 Custom Elements。之後會介紹在軟體工程中元件的基本概念、本論文選定的三種目前主流的 JavaScript 網頁框架 Angular、React 和 Vue。最後會介紹我們實作網頁萃取工具所使用到的 Chrome Extension 及其基本使用範例。. 2.1. Web Component Web Component[10] 是由 W3C 所制定的一個標準, 這個標準包含四個基本規範：Cus-. 政治大網頁是由一個一個元素組成，隨著網頁功能增加，眾多元素混雜在一起，JavaScript 立. tom Element[11]、HTML Templates[12]、Shadow DOM[13] 和 HTML imports[14]。HTML 程式碼也越來越複雜，再加上可能使用到很多第三方的函式庫，使得整個網頁變成. ‧ 國. 學. 一個超級複雜的文件物件模型 (DOM[15]) 結構。DOM 是所有 HTML 元素所形成的一個樹狀的結構，透過 JavaScript、CSS 可以在 DOM 中找到特定的元素進行操作。Web. ‧. Component 這個標準可以改善這些狀況，Web Component 的思想是將網頁的組成方式改為一個一個的元件，能夠使 DOM 結構更清晰。透過 Shadow DOM 將元件封裝讓元. y. Nat. sit. 件彼此不會受到干擾，透過 Custom Element 能夠為自己的元件做客製化的元素，透過. al. n. 2.1.1 HTML imports. er. io. HTML imports 能夠引入其他元件，達到重複利用的特性。. Ch. engchi. i n U. v. 當我們需要引用到外部檔案時，如果外部來源為 JavaScript 檔案，我們可以透過 script 元素做載入; 如果外部檔案是 CSS 檔案，我們可以也能夠透過 link 元素來載入。其他我們也能夠根據對應的元素載入圖片、影片、聲頻。但是我們要載入一個 HTML 檔案卻非常的麻煩，需要使用 iframe 元素或是透過 AJAX 技術來做載入。為了解決載入 HTML 的不便，Web Component 中的 HTML imports 提供我們載入 HTML 以及其相依的 JavaScript 與 CSS 檔案。當 Component 被設計好之後，可以透過載入元件 (import Component) 直接使用自己以前設計過的元件或是使用別人的 Component, 達到重複利用 (Reuse) 的特性，而且並不需要擔心載入其他人的 Component 會不會造成樣式或是變數發生衝突，因為 Shadow DOM 會做好 Component 之間的隔離。. 11. DOI:10.6814/NCCU201900017.

(12) 2.1.2 Shadow DOM Shadow DOM 為 Web Component 中的 DOM 和 CSS 提供了封裝，Component 之間不會互相受到干擾。例如：不會造成 Component 的 CSS 樣式設定污染了另一個 Component 樣式的情況，Shadow DOM 會為我們避免這種狀況出現。那 Shadow DOM 如何做到這些事情？概念是為某一個元素 (Shadow host)，另外再建立一個虛擬的 DOM 稱作 Shadow DOM，Shadow DOM 的作用範圍就只有在 Shadow host 上而已，對其他元素不造成影響。例如：有一個元素 div 裡面有些字，為這個 div 建立一個 Shadow DOM，那在 Shadow DOM 中改變字的顏色並不會對其他元素也造成改變。圖2.1為 Shadow DOM 概念圖 Shadow DOM 有幾項優點：分別是 Isolated DOM、Scoped CSS、Composition 和 Productivity。Isolated DOM 可以使 Shadow DOM 中的節點不會讓外界的 JavaScript 找到，達到隔離的效果。Scoped CSS 給 CSS 界定了影響範圍、彼此之間不會互相影響。. 政治大來，接著可以填入其他元素做變化，就可以使用相同的造型顯示不同的內容等功能。立最後 Productivity 是可以將 Web 應用程式切割為多個 Component 達到模組化開發。 Composition 表示元素是可組合的。例如將一個 Component 封裝好之後樣式已經固定下. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2.1: Shadow DOM 概念圖. 2.1.3 Templates 當想要重複使用某些相似的 HTML 結構時，可以使用 template 元素。template 元素提供一個可以預先放置 (preset formate) 的格式，在 template 元素內可以填入可能會重複使用到的 HTML 結構，之後便可透過 JavaScript 複製 template 內容並置於所需之處，因而可以避免相似的 HTML 結構的不斷重複設計。在執行 HTML 檔案時會解析 template 元素，但是不會渲染到畫面上，直到這個 Template 透過 JavaScript 生成和插入 DOM 之中才會進行渲染。 12. DOI:10.6814/NCCU201900017.

(13) 例如現在想要使用 template 元素製作一個可以呈現多個圖片和圖片描述的 Template。此時在 template 元素內擺放的 HTML 結構可以如圖2.2所示包含一個 img 元素和一個 div 元素來存放圖片描述。然而光只有 template 元素是不能夠呈現在畫面上，因為 HTML 解譯器會解譯 template 標籤但不會將之渲染到畫面中。如圖2.3、2.4所示，我們還必須透過 JavaScript 找到 template 元素，修改 template 的內容並且產生一個實例插入到 DOM 之中，才能夠在畫面中呈現出來。. 政治大. 圖 2.2: template 樣板. 立. ‧. ‧ 國. 學. n 2.1.4 Customized Elements. Ch. engchi. er. io. al. sit. y. Nat 圖 2.3: 透過 JavaScript 使用 template. i n U. v. 傳統上開發網頁時會使用大量的 div 標籤，其後果是在複雜的系統上會造成大量的巢狀 div 結構，不管在閱讀還是維護上會變得困難。然而當我們改以元件方式設計時，網頁結構將可大大精簡，其原因是因為元件化的網頁將由較大單元的元件而非以往的標準 HTML 元素組成。通常每一元件封裝了許多的 HTML 元素做為其內容，而開發者則允許且必需為每一元件給定一唯一元素名稱，之後即可以該客製化元素 (名稱) 的形式進行任何引用。W3C 的客製化元素規格允許客製化元素的存在，並規範 (當碰到客製化元素時) 如何渲染其封裝內容。當需要使用網頁元件時，我們需先透過 HTML imports 載入該元件的來源檔，之後即可直接將該元件以客製化元素方式置於需要之處即可達成使用目的。 2.1.5 Web Component 實作隨著 W3C 釋出 Web Component 各個項目的草案後，開始出現許多 Web Component 的實作，例如：Polymer[16]、X-Tag[17]、Slim.js[18]、Bosonic[19] 等等。 13. DOI:10.6814/NCCU201900017.

(14) 政治大. 圖 2.4: template 範例結果. 立. ‧ 國. 學. Polymer 是 Google 在 2013 開始的專案，並在 2015 年推出 1.0 版本，是一個開源的 JavaScript 函式庫。特色包含：1. 用更簡單的方式建立客製化元素並且支援 Shadow DOM 封裝客製元素。2. 可以使用單/雙向的資料綁定。3. 提供計算屬性 (Computed. ‧. properties) 將某些變數通過自訂函式並返回計算結果，當變數更動時會自動呼叫函式並. y. Nat. 且更新計算結果。4. 條件式和重複樣板 (Conditional and repeat templates)，可以根據條件. sit. 來選擇要顯示的樣板。或是透過陣列和物件的多個變數來重複顯示樣板。5. 手勢事件. er. io. (Gesture events)，將物件進行拖放時會觸發各種事件，包含四個事件按鈕按下 (down)、. al. v i n C h 的實作，也都具有各自的特色，使用者可以目前已經存在各式各樣 Web Component i U e h n c g 根據自己的喜好和需求來做挑選。 n. 按鈕放開 (up)、按鈕按下後按鈕放開 (tap)、按下且拖曳 (track)。. 2.2. 基於元件的軟體工程 [1, 2, 3] (Component-based software engineering) 軟體工程這個領域在很早以前就已經提出元件化開發的概念。基於元件化的軟. 體開發 (Component-based software engineering, CBSE) 或者稱作基於元件化的開發 (Component-based development, CBD)，是一種在軟體工程中強調關注點分離 (separation of concerns)[20] 的一個分枝。透過定義函式、組合函式來達到重複利用和隨插即用的特性，可以節省開發成本和提高工作效率，對於短期或是長期的開發都會有一定的好處。在軟體工程中，一個軟體元件可能是代表軟體套件、網頁服務、網頁資源或是模塊 (module) 的封裝。一個系統經由多個元件組成，每個元件負責部分功能，元件和元件的溝通是透過界面 (interface) 來達成，界面只負責定義輸入/輸出結果的格式並不會管元件中如何設計，這個原則稱作元件的封裝。另外一個重要的元件屬性是可替換性，由於 14. DOI:10.6814/NCCU201900017.

(15) 界面只規定輸入/輸出結果，所以元件只要符合界面的規定就能夠做替換，能夠很容易的做替換，例如更換新的版本或是更換任何測試版本。 2.2.1 軟體工程的元件化和網頁元件化在傳統軟體工程領域中，所謂的元件化是指將系統中的部份功能區隔分離再進行封裝，使其獨立為一個元件，之後再將這些元件組合成為一個具有規模的系統。而在網頁工程 (web engineering) 裡，網頁元件化指的也是同樣的概念。我們將一個頁面視為由多個元件組合而成，一個元件包含網頁中的部份可見甚或不可見區域。元件包含的區域是可以變更的，而合適的切割元件大小也是網頁元件化的重要議題。元件之間的溝通也可以透過事先定義好的輸入與輸出屬性互相溝通，這些屬性就像是在軟體工程中界面的作用。網頁元件化也擁有軟體元件化的好處，包含重複利用性、組合性和可替換性。網頁的部份功能封裝成元件後就可以在多個地方使用，可以使用這些元件組合成一個大型的頁面，最後是如果想要測試某一個元件，只要遵循相同的輸入輸出屬性就可以直接替換掉原來的元件。. 立. JavaScript 框架. 學. ‧ 國. 2.3. 政治大. 網頁框架發展日新月異，幾乎每隔一小段時間就會有開發者因應最新的概念與潮流，推出一些新的產品。本論文計畫挑選幾種目前最主流的 JavaScript 網頁框架作為應. ‧. 用的工具。這些工具分別是 Google 的 Angular[5]、Facebook 的 React[4] 和 Evan You 的. y. sit. io. al. er. 2.3.1 Angular. Nat. Vue.js[7]。. n. AngularJS 是由 Google 維護的一個開源 JavaScript 函式庫，用來協助單一頁面應用. Ch. i n U. v. 程式 (Single Page Application) 運行，透過 MVC[21] 架構使開發和測試變得更加容易。. engchi. 在版本 2 中全面使用 TypeScript[22] 重新改寫，並更改名稱為 Angular，以顯示與版本 1 的 AngularJS 的巨大差異。TypeScript 是建構在 JavaScript 之上的語言，與 JavaScript 不同的是 TypeScript 多了變數型別 (typing)，例如 number、string 等等的資料型態。 TypeScript 是一種語法糖 (Syntactic sugar) 透過更簡易的語法來幫助開發，不必使用繁瑣的 JavaScript 語法就能達到相同的目的，最後再由編譯器將 TypeScript 編譯成 JavaScript 讓瀏覽器能夠做呈現。 Angular 在控制器 (Controllers) 和視景 (Views) 之間切割的很乾淨，實現系統設計中的關注點分離 (Separation of concerns, SOC)[20, 23]。關注點分離指的是針對系統中的特定目標進行標識、封裝與控制，使其操控得以與系統其他部分明顯區隔。每一個分隔的目標即是一個分離關注點。當一個系統交雜太多關注點時，將會使得系統的複雜性急遽增加，而關注點分離則是一種降低系統複雜性的處裡原則。例如在 View 中只需要專注在畫面的呈現方式，因此只需要設計好畫面樣板而不用負責計算、資料處理等等。而在 Controller 負責資料的處理，不必負責畫面如何呈現。 15. DOI:10.6814/NCCU201900017.

(16) 在 Angular 中由 Template 負責 View 的呈現，在 Template 中使用 HTML 語法與 Angular 提供的屬性指令 (directive)，透過屬性指令 (directive) 能夠使用更簡潔的語法實現複雜的功能，例如 *ngFor 提供在 HTML 元素中使用 for 迴圈，透過簡單的語法就能遞迴產生多個元素。*ngIf 提供在元素之中做 if 的判斷，若為 True 則會顯示該元素，反之則不會顯示該元素。而 Component 負責 Controll 的部份，在 Component 中負責暫存資料和邏輯處理。 Template 與 Component 的互動透過性質綁定 (Property Binding) 和事件綁定 (Event Binding)。性質綁定 (由 Component 到 Template) 是透過變數的方式傳遞資料，在 Component 中處理完的變數透過 Angular 提供的語法能夠綁定在 Template 中並做呈現。事件綁定 (由 Template 到 Component) 透過觸發 Template 中的事件對 Component 內部資料做改變，如觸發 input 事件或 click 事件等。最後一個部份是 Injector，Angular 不希望用 Component 來儲存資料，或是透過 C-. 政治大. omponent 直接獲取資料，於是將儲存/獲取資料的部份獨立出來。獲取資料將透過 Service 來達成，Service 是許多方法的集合，而透過這些方法可以到不同的地方獲得資. 立. 料，可以從本地端、伺服器端來獲得，再透過 Injector 來注入到 Component 之中。優點. ‧ 國. 學. 是 Component 可以專注在資料的呈現和操作 Service 方法，而取得資料則交給 Service 負責，當資料改變時只需要到 Service 中做調整不需要改動 Component，透過 Injector 使結構更有彈性。圖2.5顯示 Angular 各個區塊之間的互動關係。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2.5: Angular 架構圖1. 1 Google,2010-2016,Architecture. Overview. 16. DOI:10.6814/NCCU201900017.

(17) Angular Components 圖2.6顯示的是一個基本的 Angular 元件的原始程式。其中 @Component 是一個裝飾器 (decorator)，用來表示這個網頁元件的相關資訊。圖2.6中的 selector 表示元件的客製化元素名稱，當載入這個元件檔之後就可以經由 <app-test> 這個客製化元素而引用該元件。templateUrl 表示引用外部的 html 檔案作為 template，也就是這個網頁元件實作的內容。template 內容的語法是使用 HTML 與 Angular 提供的屬性指令 (directive)，如 ngFor, ngIf 等等。styleUrls 代表使用外部的 CSS 檔案作為這個元件的樣式設定。最後 export class 部分是以 typescript 的 class 提供元件的物件模型表達，它對應的是圖2.5中的 component 部分，其中包含資料的儲存與方法的實作部分。. 立. ‧. ‧ 國. 學圖 2.6: Angular 元件結構. io. sit. y. Nat. Lifecycle Hooks. 政治大. n. al. er. 每一個 component 會有獨自的生命週期，當 component 透過 constructor 建立後，會依照圖2.7中的各個方法依序在特定時間執行。. Ch. engchi. i n U. v. 圖 2.7: Angular Lifecycle sequence. • ngOnChanges() 當接收到傳入值或是傳入值改變時，這個方法會在 ngOnInit() 之前先接收到改變物件，紀錄著目前的數值和先前的數值。 • ngOnInit() 將 Input 的值和屬性綁定的值做初始化。 17. DOI:10.6814/NCCU201900017.

(18) • ngDoCheck() 當有任何動作改變和偵查到改變時會呼叫這個方法。 • ngAfterContentInit() Angular 插入外部內容到 template 指定的位置後執行。 • ngAfterContentChecked() Angular 檢查插入 component/directive 的內容後執行。 • ngAfterViewInit() 當元件和子元件畫面都渲染完成之後觸發這個方法，只會在 ngAfterContentChecked() 之後執行一次。 • ngAfterViewChecked() 當元件和子元件有變動時觸發這個方法。 • ngOnDestroy(). 政治大. 在 Angular 釋放元件之前會執行這個方法。. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 18. i n U. v. DOI:10.6814/NCCU201900017.

(19) 2.3.2 React React 是 Facebook 在 2013 年開源的 JavaScript 的函式庫。React 不算是一個完整 MVC 的架構，最多只能算是 MVC 中的 V(view) 而已，React 甚至不認同 MVC 的架構, 只專注於使用者界面 (UI) 的呈現。 React 提倡”Learn Once,Write Anywhere” 的理念，學會 React 就可以在前後端、行動裝置上做開發。React 捨棄傳統 HTML 開發模式全面改由 JavaScript 進行渲染與 DOM 操作，並且對 DOM(文件物件模型) 操作進行改進和最佳化，為大型且複雜的應用開發提供一個高效能的解決辦法。在網頁開發中我們需要將資料顯示在畫面中，當資料改變後隨之對 DOM 進行操作，若資料大量變動必須頻繁的操作 DOM 造成效能瓶頸。為了解決這個問題 React 提供 Virtual DOM(虛擬文件物件模型) 的機制，若資料做改變會先改變 Virtual DOM，之後 Virtual DOM 和 DOM 做差異的計算，最後在 DOM 上僅改動差異的部份進而提升效. 政治大 React 也提倡以元件化的想法設計 UI，將每一個獨立元件做封裝再用小元件拼裝出立大型元件，最後組成完整的 UI。每一個元件都擁有四種特性: 組合性、重複利用性、可能。. ‧ 國. 學. 維護性和可測試性。可組合性表示可以使用小元件組合成大元件，在將大元件組合成完整的 UI。重複利用性代表每一個元件都是獨立的可以在多個地方重複使用。可維護. ‧. 性表示每一個元件的邏輯都很單一，容易被理解和維護。最後可測試性表示每一個元件都是獨立的，測試單一元件相較於測試整個 UI 是容易許多的。. Nat. sit. y. React 提供一套類似 XML 語法的 JavaScript 擴充-JSX。JSX 讓使用者能夠透過更高階的語法來完成功能，例如能夠在元素中加入一些屬性，而這些屬性可以和變數或是. io. n. al. er. 函數做綁定，能夠更有彈性的使用元素。使用 JSX 也為我們預防一些安全性的問題，. i n U. v. 由於在渲染之前 React DOM 會先將任何嵌入的變數做封裝，能夠有效的防止一些注入. Ch. engchi. 攻擊。JSX 在 React 中並不是必要的，也可以透過 JavaScript 來完成，JSX 最終還是會透過編譯器編譯為 JavaScript 讓瀏覽器能夠做呈現。. < d i v i d =” r o o t ” > </ d i v > 在 React 中元素是建構應用程式最小的單位，而 id 為 root 的 div 是 DOM 的根節點，所有包含在根節點內的元素都會被 React DOM 所管理。React 中的元素透過 ReactDOM.render() 渲染到根節點中。一開始建立專案預設是將 App 這個元件渲染到根節點中，使用者再將設計的各種元件加到 App 元件之中，一層一層的渲染下去。一個元件代表一個 Class 且元件繼承 React.Component。當渲染元件時，就會進入到元件的生命週期。React 元件生命週期分為三個部份：初始渲染 (Mounting)、更新 (Updating) 和卸載 (Unmounting)。在 Mounting 時，首先會先呼叫元件的 Constructor 做一些初始化的動作，接著依序執行 componentWillMount()、render() 和 componentDidMount()。Will 和 Did 的差別主要是在 render 之前執行或是之後執行。Updating 發生在 19. DOI:10.6814/NCCU201900017.

(20) Mounting 之後和 Unmounting 之前，當屬性、狀態改變都會觸發 Updating。Unmounting 則是在元件即將在 DOM 移除之前執行。. 2.3.3 Vue Vue.js 是一個建立使用者界面的開源 JavaScript 框架，作者 Evan You 在為 AngularJS 工作後將 AngularJS 中的優點萃取出來，並結合 KnockoutJS、Ractive.js、Rivets.js 等框架的優點，發展出一個輕量的框架，在 2014 年 2 月發布最早的版本。 Vue 是一個 progressive(漸進式) 的框架，可以在現有的專案中嵌入部份的 Vue，或者能夠透過 Vue 提供的生態系直接打造一個 Vue 的專案。Vue 的讀音和 View 相同，是一個專注於 View Model 的 JavaScript 框架。Vue 在軟體架構模式屬於 MVVM(ModelView-ViewModel)[24] 的架構，透過 Vue 來處理 View 和 Model 之間的互動關係，確保 View 和 Model 資料是一致的，圖2.8表示 Vue 在 MVVM 架構中負責的部份。. 立. 政治大. ‧. ‧ 國. 學 y. Nat. er. io. sit. 圖 2.8: Vue 架構圖. al. Vue 具有平易近人、有彈性、效能佳、容易維護和可測試等特性。Vue 也遵循著. n. v i n W3C 提出 Web Components 的規範 C [10]，每一個 Vue 的檔案都代表一個元件，每一個 hengchi U 元件都具有可重複利用性和可組合性，可以將多個元件組合成為一個複雜的應用系統。每一個 Vue 的檔案包含三個部份，分別是 template、script 和 style，template 代表著元件所呈現的樣板包含 HTML-like 的語法，在 HTML 標籤中可以嵌入 Vue 提供的 directive，可以透過簡易的語法來達到一些功能，例如 v-if、v-for、v-model 等等。script 表示一個元件的資料和方法，並且可以為元件設定一個客製化的元件名稱。最後 style 則是用來控制 template 的樣式，包含 CSS 或是 SCSS。由於應用系統是透過一個一個的元件組成，所以較容易維護和除錯，也可以針對單一元件進行測試。在組合元件時，會遇到元件內包含另一個元件，若是元件和元件需要進行資料交換則要考慮到元件的父子 (parent-child) 關係。在 Vue 中，如果是父元件傳資料到子元件會透過屬性的方式傳遞，直接在元件的標籤內加入一個屬性並將資料綁定傳遞給子元件。若是子元件要傳遞資料到父元件會透過事件觸發的方式進行資料的修改，例如 click 事件等，如圖2.9所示。. 20. DOI:10.6814/NCCU201900017.

(21) 圖 2.9: Vue 資料傳遞. 2.4. Chrome Extension Chrome Extension[25] 是一個單一目的的小程式，可以讓開發者來客製化一些功能增. 加使用瀏覽器的體驗。Chrome Extension 透過網頁程式來撰寫，包含 HTML、JavaScript 和 CSS。而 Chrome Extension 的使用者介面 (UI) 通常是一個小圖示位在網址列的右方，. 政治大後，如果想要發佈到網路上，Google 也提供了平台 Chrome 線上應用程式商店 [26]，只立要將 Extension 檔案壓縮為定義好的格式.crx 壓縮檔，就可以上傳至應用程式商店或是. 如圖2.10所示。點擊圖示後就可以使用該功能。當完成自己的 Chrome Extension 程式. ‧ 國. 學. 從商店中下載其他 Extension 做安裝。. ‧. al. n. • Manifest. Ch. • Background Script. engchi. y. sit. io. 一個完整的 Chrome Extension 通常會有下列元素:. er. Nat. 圖 2.10: Chrome Extension 圖示. i n U. v. • UI Elements • Content Script • Options Page Manifest 每一個 Chrome Extension 都會有一個 manifest，它是一個 JSON 格式的檔案，提供許多重要的資訊，包含 Extension 名稱、版本號、使用什麼主要語言、圖示檔案名稱、按下圖示執行對應檔案名稱等等設定。 Background Script Background Script 是一個 JavaScript 的檔案，檔案中存放許多的監聽事件 (linstener) 可以用來與 UI Elements 做互動。例如在 UI Elements 點擊其中的內容，UI Elements 可. 21. DOI:10.6814/NCCU201900017.

(22) 以發送一個請求至 Background Script 處理這個請求並且回傳結果。 UI Elements UI Elements 頁面例如 popup，popup 通常是指點擊 Chrome Extension 圖示後所彈跳出來的頁面，包含 HTML 與 JavaScript，分別呈現畫面與控制邏輯。Extensions 也可以呼叫 tabs.create 或 window.open() 來呈現額外的 HTML 檔案。 Content Script Extension 可以透過 Content Script 來讀和修改已經載入瀏覽器頁面的 DOM。也可以透過 storage API 來和其他 Extension 元素 (popup.js、background.js) 交換訊息和儲存資訊。 Options Page 如同 Extensions 能夠讓使用者客製化瀏覽器，Options page 能夠讓使用者客製化 Extensions，能夠讓使用者決定要啟用那些功能決定使用哪些 function 更貼近他們的需求。 2.4.1. 架構下各個元素間怎麼做互動. 立. 政治大. 在測試開發中的 Chrome Extension 時，可以在 Chrome 瀏覽器的右上角搜尋更多. ‧ 國. 學. 工具下面的擴充功能，在擴充功能中能夠載入未封裝項目。之後選擇專案資料夾即可在右上角顯示出 Chrome Extension 的圖示。一開始的 Hello world 範例資料夾結構如. ‧. 圖2.11。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2.11: Hello world 專案資料夾. manifest.json 是 Chrome Extension 的設定檔案，包含版本資訊、版本描述、Extension 圖示和當按下 Extension 的按鈕後要執行哪一個 html 檔案等設定。Hello world 專案中的 manifest.json 基本內容如圖2.12。其中 browser_action 是指當點擊瀏覽器的 Extension 圖示時要開始哪個 html 檔案，這個例子表示點擊圖示時會回應 popup.html 這個檔案。 popup.html 檔案如圖2.13。. 22. DOI:10.6814/NCCU201900017.

(23) 圖 2.12: Hello world manifest.json. 圖 2.13: popup.html. 治政點擊 Chrome Extension 的圖示後，就會回應 popup.html 大內容，如圖2.14。而這裡的立的部分。 popup.html 屬於上述架構中 UI Element. er. io. sit. y. ‧. ‧ 國. 學. Nat. 圖 2.14: 執行 popup.html 畫面. al. 假設要和目前瀏覽頁面做互動的話就需要使用到架構中 Background Script 與 Content. n. v i n Script。Background Script 指的是負責操作，而 Content Script 是負責 Cpopup U h e n的gJavaScript i h c Script 與 Background Script 之間目前使用者瀏覽頁面部分的 JavaScript 操作。而 Content 的溝通需要透過 Chrome Extension 提供的 API 做溝通。假設想要做一個 Chrome Extension 能夠顯示目前使用者瀏覽頁面的標題，第一步. 需要在 manifest.json 中加入 background 欄位，並在 popup.html 中載入 background.js。如圖2.15。. 23. DOI:10.6814/NCCU201900017.

(24) 圖 2.15: manifest.json 與 popup.html. 之後在 background.js 透過 Chrome Extension API 來連結目前使用者瀏覽的頁面。而 content.js 就可以存取到使用者瀏覽頁面的所有資料，並且回傳頁面標題回到 background.js。再透過 background.js 來操作 popup.html 的 DOM，將回傳的頁面標題給填入。如圖2.16與2.17。最後呈現結果如圖2.18。. 立. 政治大. ‧. ‧ 國. 學圖 2.16: background.js. n. 圖 2.17: content.js. Ch. engchi. 24. er. io. sit. y. Nat. al. i n U. v. DOI:10.6814/NCCU201900017.

(25) 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. al. n. v i n C h Chrome Extension 圖 2.18: 顯示頁面標題的 e n g c h i U 範例. 25. DOI:10.6814/NCCU201900017.

(26) 第三章. 實作方法. 本論文的具體實做包含兩部份: 一是既有網頁內容的元件化，另一則是建造輔助工具幫助網頁內容元件化的執行。在既有網頁內容元件化部分，我們分別在 Angular、 Vue 和 React 等三框架，一一實做了以下幾項元件:W3CSS table 元件、Footer 元件、 JSAV 演算法視覺化元件、圖片幻燈片 (image slide show) 元件、JSON 資料表格化元件以及查詢郵遞區號和縣市人口的地圖元件。在輔助工具實做部份，我們利用 Chrome 瀏覽器的開發環境，實做一個額外擴充 (Chrome Extension)。此工具具有與瀏覽網頁互動的能力，除能幫助元件開發者萃取瀏覽網頁的指定內容之外，更能夠針對內容中的指定可變項目進行參數化操作。一旦內. 政治大件雛形檔案，該檔案除了含有原萃取的內容之外，還會將每一參數化項目使用自定義立的 HTML 元素做特殊處理。例如將擷取內容中的 h1 元素使用變數化的標籤標記，所產. 容萃取與參數化操作完成之後，此工具允許開發者產生一份中間格式 (Pre-format) 的元. ‧ 國. 學. 生的中間格式將會是 <jt-v>h1 元素 </jt-v> 元素。後續的元件化步驟需要利用此雛形檔方能進一步轉換為 Angular、Vue、React 框架下的網頁元件。. ‧. 3.1. 重構既有網頁 (Angular 版本元件). y. Nat. sit. 將網頁內容轉換為元件之通用過程蓋略如下: 1. 標的識別: 找到期盼的網頁以及希望. al. er. io. 元件化的其中特定內容。2. 萃取: 由瀏覽的網頁特定內容找到對應的原始碼與使用到的. n. 連帶 CSS 與程式庫等。3. 重構與參數化: 重構包含重組，合併或增刪擷取的網頁特定內. Ch. i n U. v. 容使其自成完整的獨立單元，而參數化則是決定擷取內容中的哪些項目是可變化，並. engchi. 將該些項目改為之後可被取代的參數引用。4 內容元件化: 此階段首先需確定生成元件的客製化元素名稱，以及確定每一參數的表示與傳遞方式。每一參數可以表示為客製化元素的特定屬性或特定子元素，而其值可以是使用該元素時的對應屬性或子元素內容，也可能是來自父元件的輸入參數，或者是來自該元件模型的某一特性 (property)。接著即可依據各前端框架的具體語法要求，將前述資訊以及前一步驟所得到的元件內容雛形檔封裝成不同框架下的可重複使用元件。圖3.1為重構網頁內容轉換為元件之通用過程流程圖。以下依序分別說明各項網頁內容的元件化實做過程。. 26. DOI:10.6814/NCCU201900017.

(27) 圖 3.1: 重構網頁內容轉換為元件之通用過程流程圖. 3.1.1 W3CSS table 元件. 政治大. 以 W3.CSS[27] Table 為例子，如圖3.2。我們想要將這個表格做成 Angular 的元件，並且讓使用者可以動態呈現不同資料，且保有表格樣式。. 立. ‧. ‧ 國. 學. n. 圖 3.2: W3CSS Table. Ch. engchi. er. io. sit. y. Nat. al. i n U. v. 首先 Angular 元件包含三個部門，template(樣板)、style(樣式) 和 class(類別)。template 負責畫面呈現，由 HTML 和 Angular 提供的屬性指令 (directive) 組合而成。style 則負責控制 template 的樣式，由 CSS 或是 SCSS 語法來做樣式修改。最後 class 的部份包含資料和方法，負責處理和操作資料的地方。一個 Angular 元件基本架構如圖3.3，@Component 代表是一個 Angular 元件，selector 可以為客製化元素命名，template 內表示元件呈現畫面的樣板，styles 控制樣板的樣式，可以使用 CSS 或是 SCSS，最後是 class 負責處理操作資料。分別將 W3CSS Table 的 HTML 和 CSS 填入圖3.3的架構中之後，就能夠完成一個客製化元件 w3css-table，並且能夠在主要網頁元件中做使用，如圖3.4在 template 中可以使用客製化元件 w3css-table。. 27. DOI:10.6814/NCCU201900017.

(28) 圖 3.3: 元件基本架構. 立. 政治大. Nat. y. ‧. ‧ 國. 學. 圖 3.4: 在 App Component 使用客製化元件. io. sit. 由於 W3CSS table 的範例是將資料嵌入在 HTML 之中，不夠具有彈性。我們將資料. er. 抽取出來用另外一個 data.ts 檔案存放，如圖3.5。在主要網頁元件將 data.ts 載入後透過. al. n. v i n Ch U 檔案進行修改，而不需要動到其他部份。在子元件會接收到來自父元件 e n g c h iw3css-table. 屬性傳遞的方式，將資料由父元件傳遞到子元件。如果需要改變資料只需要到 data.ts 傳遞的資料，透過 @Input() 可以將資料存放在 class 之中，在由 template 中的 directive *ngFor 將資料呈現出來，如圖3.6。. 圖 3.5: data.ts. 28. DOI:10.6814/NCCU201900017.

(29) 立. ‧ 國. 學圖 3.6: w3css-table 元件. ‧. 3.1.2 Footer 元件. 政治大. y. Nat. sit. 製作網頁時，在網頁結束的地方通常會有一個區塊專門擺放聯絡資訊的地方，通常. al. er. io. 稱為 Footer，我們嘗試製作一個 Footer 元件，能夠透過傳入不同的參數來顯示對應的社. n. 群圖示。例如傳入 facebook 的網址，就能夠顯示對應的圖示和連結。如圖3.7。使用元. Ch. i n U. v. 件的方式如圖3.8，分別傳入參數 fb 和 twitter 和對應的網址到元件中，就能夠呈現有基本聯絡資訊的 Footer 元件。. engchi. 圖 3.7: Footer 元件. 29. DOI:10.6814/NCCU201900017.

(30) 圖 3.8: Footer 元件使用方式. 3.1.3 JSAV 元件 JSAV[28] 是一套演算法視覺化的 JavaScript 函式庫，是 OpenDSA[29] 專案的其中一個項目。OpenDSA 專案是一個課程輔助的系統，主要專注在資料結構以及演算法相關課程上，透過 JSAV 函式庫，將資料結構和演算法內容做視覺化的呈現，在學習上會比較容易理解。透過元件化的概念，將一些資料結構和演算法做成一個 Angular 元件，讓使用者可以更方便的使用和操作某個資料結構或是演算法。以搜尋演算法 Binary Search 為例，. 治政文件說明，將視覺化部份區域填入 template 中，如圖3.9。大立 Class 中，透過性質綁定將陣列大小由父元件傳入並將 Binary Search 相關演算法填入. 將 JSAV 相關函式庫載入 Angular，包含 jsav.js、jsav.css、jQuery 等等。根據 JSAV 官方. ‧. ‧ 國. 學. n. Ch. engchi. er. io. sit. y. Nat. al. 圖 3.9: JSAV Angular Template. i n U. v. 圖 3.10: 元件性質綁定. 子元件，就可以讓客製化元件透過參數的方式控制陣列大小，如圖3.9。根據傳入的陣列大小會先隨機產生由小至大的數列，再將陣列執行 Binary Search 演算法，並將每一步紀錄在一個物件中，傳到 Template 中做呈現。就可以透過換頁的方式呈現 Binary Search 每一個步驟的細節，幫助了解其中變化的過程，如圖3.11,3.12。. 30. DOI:10.6814/NCCU201900017.

(31) 圖 3.11: Binary Search Component. 立. 政治大. 圖 3.12: Binary Search Component. ‧ 國. 學. 3.1.4 Slide Show 元件. 幻燈片 (Slide show) 也是一種很常見的網頁功能，能夠在一個區塊顯示圖片且經過. ‧. 特定時間就能夠自動切換至下一張圖片，也能透過手動的方式做翻頁的動作，我們嘗試將這個常見的功能製作為網頁元件，基本架構參考至 W3schools How To[30]。將圖片. Nat. sit. y. 陣列和圖片標題陣列透過性質綁定的方式做傳遞，只要在元件中輸入圖片的位置和圖. n. al. er. io. 片標題就能夠輕易的使用幻燈片的功能，如圖3.13所示，使用後結果如圖3.14。. Ch. engchi. i n U. v. 圖 3.13: Image Slide. 31. DOI:10.6814/NCCU201900017.

(32) 圖 3.14: Image Slide. 3.1.5 JSON 表格元件 JSON 格式的資料在畫面呈現上比較不直覺，我們製作一個網頁元件能夠將特定 JSON 格式資料以表格方式呈現，網頁元件使用方式如圖3.15所示。將 JSON 檔案透過性質綁定的方式做傳遞，交給網頁元件做解析並呈現成表格的形式，如圖3.16。另外表. 治政存起來。最左側的’+’、’-’ 符號提供表格摺疊的功能。大立. 學. ‧ 國. 格內資料也提供編輯資料和儲存的功能，修改資料後按下 Save 能夠將改動後的資料保. 圖 3.15: 使用 JSON 表格元件. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3.16: 以表格形式呈現 JSON 資料. 32. DOI:10.6814/NCCU201900017.

(33) 3.1.6. 透過地圖輸入方式呈現郵遞區號元件. 在查詢郵遞區號時，我們常透過輸入地址的方式來獲得對應的郵遞區號。那我們思考是否能夠透過地圖點擊位置的方式作為輸入? 我們透過 Leaflet[31] 與 Open Street Map[32] 來實作這個功能。Leaflet 是一個輕量的開源 JavaScript 函式庫，並且是便利於行動裝置的互動式地圖，提供開發者很多實用的功能。Open Street Map(OSM) 是一個全世界共同合作的專案，OSM 計畫由英國人 Steve Coast 於 2004 年創立，提供一個讓各地方的人自由的編輯地圖，包含標記地圖上的各種資訊。結合 Leaflet 提供的函式庫與 OSM 提供的地圖資料來製作此網頁元件。再透過 Esri leaflet[33] 實作的 geocoding 將經緯度轉換為近似的地址資料。Esri leaflet 是一個 github 上的專案，建立於 Leaflet 之上提供更多好用的 Plugin。這裡使用到的是 Esri Leaflet Geocoder 這個 Plugin，能夠將經緯度轉為近似的地址或是做查詢，輸入一個地名、景點名稱就能夠轉換成對應的地址。最後將地址透過 API 的方式轉換為郵遞區號，API 使用台灣 3+2 郵遞區號查詢 [34] 提供的服務。結果如圖3.17所示。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3.17: 地圖輸入呈現郵遞區號元件. 33. DOI:10.6814/NCCU201900017.

(34) 3.1.7. 台灣行政區資料元件. 我們有時候會去查詢台灣各個行政區的各種資料，包含各縣市人口、各縣市氣溫等等以各行政區為區分的資料。我們嘗試製作一個一般化的行政區資料呈現的網頁元件。使用 Leaflet 提供的灰階地圖為底，使用 ArcGIS[35] 提供的台灣行政區邊界資料繪製行政區。並定義接收到的 JSON 資料格式，如圖3.18。. 圖 3.18: 台灣各行政區人口數資料. 治政的標記，並呈現對應的行政區資料 (以台灣各行政區人口數為例)。如圖3.19。並為網頁大立JSON 資料和想要呈現的資料型態，如人口、氣溫等元件提供更方便的使用方式，將接著我們製作一些地圖的事件監聽器和地圖做互動，當點擊其中的行政區後做顏色. ‧. ‧ 國. 學. 等。作為參數傳入網頁元件就能夠簡單的使用這個元件，如圖3.20。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3.19: 台灣行政區資料元件以人口為例. 圖 3.20: 元件使用方式. 34. DOI:10.6814/NCCU201900017.

(35) 3.2. 重構既有網頁 (Vue 版本元件). 3.2.1 JSAV 元件有 Angular 版本的 JSAV 元件後嘗試將轉換到 Vue 框架上，首先將 JSAV 相關的函式庫載入到 App Component，如圖3.21。在 template 的部份和 Angular 差異不大，只是在符號寫法上有所不同，樣式內容還是和官方文件上相同，圖如3.22。. 圖 3.21: 引入相關函式庫. 立. 政治大. ‧. ‧ 國. 學圖 3.22: JSAV 樣板. sit. y. Nat. 在 App Component 中的客製化元素 BinarySearch 透過屬性綁定，將陣列大小用動態. io. n. al. er. 方式傳入子元件中，如圖3.23。子元件接收到大小數值後產生一個排序好的陣列，再. i n U. v. 執行 Binary Search 演算法。Angualr 和 Vue 在 Binary Search 基本上都是使用相同的程式. Ch. engchi. 碼，主要差別在語法差異和元件的生命週期 (lifecycle) 命名的不同，我將 Angular 演算法放在 ngAfterViewInit() 這個方法中，當畫面都做完初始化後執行。在 Vue 中則是放在 mounted() 方法中。 Angular 和 Vue 在實作元件上，演算法的程式碼差異不大，主要是在語法上的差異，之後可以朝向自動化轉換的方式產生不同框架的程式碼。. 圖 3.23: Binary Search 客製化元件. 35. DOI:10.6814/NCCU201900017.

(36) 3.2.2 Footer 元件以 Angular Footer 元件為基礎，轉換至 Vue 框架之下。在 Template 的部分大致相同，只有在元素條件判斷的寫法上與變數綁定的部份上有所差異。在 Angular 做條件判斷時可以使用 *ngIf 來決定是否要顯示這個元素，若為 True 則顯示反之則不顯示。在 Vue 上若要做條件判斷則是使用 v-if，在概念上是相同的，就只是語法使用上的差異。在變數綁定方面，Angular 使用 {{variable}} 的形式表示，而 Vue 是以 v-bind=”variable” 的形式做表示。 3.2.3 Slide Show 元件同樣以 Angular 版本元件為基礎來轉換至 Vue 版本元件，在傳遞陣列資料到子元件的寫法 Angular 是寫為 [arrdatas]=”[data1,data2,...]” 在 Vue 則是寫為:arrdatas=”[data1,data2,...]”，在傳遞資料的寫法上有所差異。在函式的寫法上也有很大的差異，在 Angular. 政治大. 如果要建立一個函式，可以直接在 class 中宣告一個 myfunction(props){ ... }，而在 Vue 中函式必須要放在 class 的 methods 欄位中，且宣告方法必須寫為 myfunction: function. 立. (props){ ... }。在事件處理上如 click 事件，在 Angualr 寫法為 <a (click)=”myfunction()”>. ‧ 國. 學. </a>，而在 Vue 寫為 <a v-on:click=”myfunction()”></a>。 3.2.4 JSON 表格元件. ‧. 以 Angular 版本的 JSON 表格元件元件為基礎轉換至 Vue 版本元件。在 template 部. y. Nat. 分語法上幾乎都相同，Angular 與 Vue 的 template 都是以 HTML 語法作為基礎並加上自. sit. 己的 Directive。我們只需要將這些 Directive 的語法稍做修改變就能夠完成 Vue 元件的. n. al. er. io. template，例如在 Angular 使用的是 ngFor 的 Directive，在 Vue 就必須要修改為 v-for。 3.2.5. 透過地圖輸入方式呈現郵遞區號. Ch. engchi. i n U. v. 以 Angular 版本的透過地圖輸入方式呈現郵遞區號元件為基礎轉換至 Vue 版本元件。由於在製作 Angular 元件內的方法時，主要還是使用 JavaScript 語法，所以也能夠在 Vue 中的 Script 做使用。主要的差異只是元件的時間週期命名差異，例如在這邊我們將 Angular 中的初始化時間週期方法 ngOnInit() 對應到 Vue 時間週期方法中的 beforeMount()；在 Angular 中使用的時間週期方法 ngAfterViewInit() 對應到 Vue 中的時間週期方法 mounted()。只需要將時間週期做好對應，並將參數綁定的語法稍做修改就可以將 Angular 版本透過地圖輸入方式呈現郵遞區號元件製作為 Vue 版本透過地圖輸入方式呈現郵遞區號元件。. 36. DOI:10.6814/NCCU201900017.

(37) 3.2.6. 台灣行政區資料元件. 此章節與3.2.5章節同樣是地圖的應用。同樣是由 Angular 版本的透過地圖輸入方式呈現郵遞區號元件為基礎轉換至 Vue 版本元件。除了需要修改 Angular 與 Vue 時間週期的差異，我們也需要修改參數綁定的部分。台灣行政區資料元件在使用上會接收一個稱為 info 的參數，這個 info 參數是一個陣列的形式，陣列中的第一個參數會接收一個 JSON 檔案，這個 JSON 檔案內容為縣市對應的資料。陣列中的第二個參數為 JSON 檔案資料的意義，以此範例來說我們在 info 第一個參數傳入台灣各縣市人口的資料，info 第二個參數傳入人口數的標題。在地圖上就能夠呈現各縣市人口數的資訊。Vue 與 Angular 在傳遞參數語法上也略有差異，以此元件為例，在使用 Angular 元件語法為 <app-populationmap [info]=”[’/assets/populations.json’, ’ 人口數’]”>< /apppopulationmap>。在使用 Vue 元件語法為 <app-populationmap :info=”[’/populations.json’, ’ 人口數’]”>< /app-populationmap>。主要差在輸入參數部分的語法差異。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 37. i n U. v. DOI:10.6814/NCCU201900017.

(38) 3.3. 重構既有網頁 (React 版本元件). 3.3.1 JSAV 元件將 JSAV Binary Search 實作成 React 元件，首先載入 JSAV 函式庫，如圖3.24。在 App 應用程式中設計一個客製化元素 BinarySearch 並透過屬性綁定傳入陣列大小，如圖3.25。在子元件 BinarySearch 寫入 JSAV 官方提供的樣板，並將 BinarySearch 演算法和 JSAV 視覺化控制的程式碼填入 componentDidMount() 方法中，如圖3.26。componentDidMount 是 React 生命週期的一個方法，在畫面渲染完成之後執行。這樣就可以得到一個使用 JSAV 函式庫實作 Binary Search 的 React 客製化元件。. 政治大. 圖 3.24: 引入相關函式庫. 立. ‧. ‧ 國. 學. n. Ch. engchi. er. io. sit. y. Nat. al. i n U. 圖 3.25: App 元件使用 BinarySearch 元件. v. 圖 3.26: Binary Search 客製化元件. 38. DOI:10.6814/NCCU201900017.

(39) 3.3.2 Footer 元件有 Angular 版本的 Footer 元件後，我們嘗試將之作成 React 框架下的網頁元件。在 template 部分差異不是太大，大多都能夠直接使用，但是需要做一些語法差異的修改，如在 Angular 上元素的 class 屬性在 React 必須使用 className 來代替。傳遞參數的寫法差異也滿大的。程式碼如圖3.27。. 政治大. 圖 3.27: Footer 元件程式碼. 立. 3.3.3 Slide Show 元件. ‧ 國. 學. 由 W3Schools How To[30] 中的 Slideshow 為範例，將之轉換為 React 元件。在範例. ‧. 中都是使用 HTML、CSS 與 JavaScript 所製作完成，而在 React 則是使用 JSX 語法，需要做一些語法上的轉換。除了上面的 class 需要改為 className 外，在 inline style 的寫. y. Nat. 法上也有很大的差異，例如在 HTML 中寫 style=”width:100%”，在 React 中必須要寫成. sit. style={{width: ’100%’}}。在 HTML 的點擊事件如 onclick=”currentSlide(1)” 在 React 需. n. al. er. io. 寫為 onClick={(e) => this.currentSlide(1)}。圖3.28為如何使用 Slide Show 元件的程式碼。. Ch. engchi. i n U. v. 圖 3.28: Slide Show 元件使用. 3.3.4 JSON 表格元件有 Angular 的例子後，嘗試將 Angular 的 JSON 表格元件轉換至 React 版本的元件。在使用上如同 Angular 元件一樣使用參數方式傳入資料來源，可以是本地端或是網路上的 JSON 檔案，如圖3.29所示。. 圖 3.29: JSON 表格元件使用方式. 做 AJAX 拿取 JSON 資料時，在 Angular 中會比較強調 service 的概念，也就是說所 39. DOI:10.6814/NCCU201900017.

(40) 有可以重複使用的方法都會另外寫到一個 service 的檔案中，在 React 好像就沒有那麼強調這個概念，但也可以使用這樣的想法來實作。另外除了先前遇到的語法上的差異，如元素中的 class 屬性在 React 是使用 className 做代替。CSS 屬性在 React 中不使用”-” 符號做連接，而是使用 Camel-Case 命名法，如元素內使用 margin-left 時，在 React 是使用 marginLeft 做代替。其他還有遇上時間週期的名稱差異等等問題，在自動化方面的實現都必須要加以克服。 3.3.5 透過地圖輸入方式呈現郵遞區號與上面例子相同，有了 Angular 元件後要轉換為 React 元件。在 Template 上在的寫法上幾乎相同，除了一些元素內的屬性寫法有些微不同，例如 class 屬性要改為 className，還有 style 屬性的寫法差異等等，其他幾乎是可以直接由 Angular 移植到 React 上。在 Angular Component 中有 template 或是 templateUrl 用來放置呈現的 HTML 畫面，而在 React 中則是放在 render() 這個函式中。另外如果要將 Angular 上的. 政治大面做為分割點，分為渲染之前和渲染之後，渲染之前在 Angular 可以放在 ngOnInit() 中，立 JavaScript 移動到 React 上，首先要遇到的就是元件的生命週期，大致可以分為渲染畫. React 可以放在 componentWillMount() 中，都是在渲染畫面之前會執行完畢的週期。而. ‧ 國. 學. 渲染之後 Angular 放在 ngAfterViewInit() 中，React 則是放在 componentDidMount() 中，都是畫面渲染完畢才會執行的時間週期。程式碼如圖3.30。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3.30: 郵遞區號元件程式碼. 40. DOI:10.6814/NCCU201900017.

(41) 3.3.6. 台灣行政區資料元件. 在將這個元件由 Angular 轉換至 React 時必須要面對幾個問提，第一是傳遞參數的語法差異，在 Angular 是使用 [info]=”[’/assets/populations.json’, ’ 人口數’]”，而在 React 寫起來像是 info={[’/assets/populations.json’, ’ 人口數’]}。第二是和之前也有遇到過相同的問題，不同的 JavaScript Framework 元件會有不同生命週期的寫法，需要針對不同的 JavaScript Framework 做改變。最後則是在第三方函式庫的載入方式差異，同樣的在 Angular 和 React 中的 index.html 檔案中載入函式庫，在 Angular 中的元件要使用 declare var thirdPatry: any; 這樣的語法來宣告函式中定義的物件，才能夠做使用。而在 React 中其中一個做法是透過 window.thridParty 存取第三方函式庫，否則會出現 undefined 的錯誤。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 41. i n U. v. DOI:10.6814/NCCU201900017.

(42) 3.4. Chrome Extension 網頁萃取工具在將網頁內容製作為客製化網頁元件時，有些步驟是重複的，例如在瀏覽網頁中. 找尋所需要的部分與在程式碼中複製需要的內容。為了解決這個問題，我們在 Chrome 瀏覽器提供的擴充 (Extension) 作為實作工具開發一個網頁萃取工具。能夠針對目前瀏覽的網頁，顯示該網頁的 DOM 結構，並且當滑鼠移至每一個 DOM 節點上能夠和目前網頁做互動，可以將指到的 DOM 節點在目前頁面上做顏色標示，如此一來便可將 DOM 結構做視覺化的標示，使用者也能夠更容易的找出 DOM 節點是在目前網頁中的哪個位置。以 W3School 的 W3.CSS Template[36] 為範例，顯示目前網頁的 DOM 結構，如圖3.31、3.32。由於我們是想針對比較大型的元素做擷取，例如:div、section、header 等等。比較小型的元素如:p、a、span 等等將過濾掉不顯示在 DOM 結構上。在每一個 DOM 節點旁邊會標示目前節點元素的 ID 屬性和 Class 屬性方便使用者之後做查找。. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. 圖 3.31: Chrome Extension 顯示目前網頁 DOM 結構. Ch. engchi. i n U. v. 圖 3.32: Chrome Extension 顯示目前網頁 DOM 結構. 42. DOI:10.6814/NCCU201900017.