Loading...
|
Please use this identifier to cite or link to this item:
https://nccur.lib.nccu.edu.tw/handle/140.119/124195
|
| Title: | 適用於多種JavaScript 框架系統的既有網頁內容之重構與元件化
The refactor and componentization of legacy web contents for use in modern JavaScript frameworks. |
| Authors: | 江太一
Jiang, Tai-Yi |
| Contributors: | 陳正佳
Chen, Cheng-Chia
江太一
Jiang, Tai-Yi |
| Keywords: | 網頁元件
網頁萃取
網頁框架
重構
Web component
Web extractor
Web framework
Refactor |
| Date: | 2019 |
| Issue Date: | 2019-07-01 10:59:10 (UTC+8) |
| Abstract: | 網頁內容元件化是現今網頁發展的主流，許多目前的前端網頁設計框架的設計理念均是以模組化元件方式將內容置於網頁之中。為了經由這些框架再次利用既有網頁的一些有用內容，我們因此計劃將它們提取並重構為基於W3C Web 組件規格為基礎的客製化Web 元件，並在三個領先的JavaScript 框架：Angular，React 和Vue 中實現這些元
件。
網頁內容元件化使得開發者可以更容易重複使用與維護網頁內容。在製作成客製化網頁元件之前我們通常需要對選定網頁內容進行萃取與重構。所謂萃取是指由瀏覽網頁中識別並擷取選定部分的對應原始碼。而重構則是指在保有原有功能與效果的前提之下，對萃取的網頁內容進行重組或增刪。至於元件化，除了封裝萃取的網頁內容使其成為客製化元素的內容範本之外，尚需抽象化範本內容以擴增其應用範圍。具體作法是選擇和參數化內容模板中的一些可變項目，而前端框架將允許未來使用該元件的開發人員能夠通過設置屬性和元素內容的方式傳遞他們自己的內容來替換這些可變項目。為方便使用者達成上述任務，我們還提供一套方法與輔助工具，可以幫助使用者有效的將網頁內容轉換為客製化元件。
本論文針對兩個主題具體實作。其一是由一些網頁中選取具有重複使用價值的內容並將其製作為三個網頁框架(Angular、Vue、React) 下的網頁元件。這些元件均提供可客製化的參數調整，如顏色、字型等等。我們實際完成的網頁元件有Footer 元件、圖片幻燈片元件、JSON 資料表格化元件、查詢郵遞區號和縣市人口的地圖元件等。其次則是提供一套方便萃取與重構網頁內容的編輯工具。由於Google Chrome 是目前的主流瀏覽器，此工具因而實作為Chrome Extension。它可和瀏覽網頁互動，具體功能包含呈現當前網頁的DOM 結構，以及醒目標示特定選取DOM 節點在渲染頁面中的對應區塊。此外也提供預覽功能，可彈跳一個獨立頁面顯示特定DOM 節點的對應渲染畫面。
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 eorganization and mutation of extracted web content under the premise of retaining the original functions and effects. As for componentization, besides encapsulating the extracted content to 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 to achieve the above tasks, we also provide a suite of methods and tools to help users effectively convert web content into customized components.
There are two concrete tasks we completed in this thesis. The first is to construct useful web components by selecting some webpage contents with reusable value and then refactor 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. |
| Reference: | [1] Component-based software engineering. https://en.wikipedia.org/wiki/Componentbased_
software_engineering. Retrieved February (2018).
[2] Fotis Foukalas, Yiorgos Ntarladimas, Aristotelis Glentis, and Zachos Boufidis. Protocol
reconfiguration using component-based design. volume 3543. Springer, Berlin, Heidelberg,
DAIS 2005. Lecture Notes in Computer Science.
[3] Rainer Niekamp. Software component architecture. http://congress.cimne.upc.es/cfsi/fro
ntal/doc/ppt/11.pdf. Retrieved February (2018).
[4] React. https://reactjs.org/. Retrieved January (2018).
[5] Angular. https://angular.io/. Retrieved January (2018).
[6] Aurelia. https://aurelia.io/. Retrieved April (2019).
[7] Vue. https://vuejs.org/. Retrieved January (2018).
[8] Lombard Hill Group. What is software reuse? https://web.archive.org/web/2014102301
3122/http://lombardhill.com/what_reuse.htm. Retrieved January (2018).
[9] Program refactoring. https://en.wikipedia.org/wiki/Code_refactoring. Retrieved January
(2018).
[10] W3C Web Components. https://developer.mozilla.org/en-US/docs/Web/Web_Compone
nts. Retrieved November (2018).
[11] Custom Elements W3C Editor’s Draft. https://w3c.github.io/webcomponents/spec/custom/.
Retrieved November (2018).
[12] HTML template element specification. https://html.spec.whatwg.org/multipage/scripting
.html#the-template-element. Retrieved November (2018).
[13] Shadow DOM W3C Editor’s Draft. https://w3c.github.io/webcomponents/spec/shadow/.
Retrieved November (2018).
[14] HTML Imports W3C Editor’s Draft. https://w3c.github.io/webcomponents/spec/imports/.
Retrieved November (2018).
[15] Document Object Model(DOM). https://developer.mozilla.org/zh-TW/docs/Web/API/D
ocument_Object_Model.
[16] Polymer. https://www.polymer-project.org/. Retrieved January (2018).
[17] X-Tag. https://x-tag.github.io/. Retrieved January (2018).
[18] Slim.js. http://slimjs.com/#/getting-started. Retrieved January (2018).
[19] BOSONIC. http://bosonic.github.io/. Retrieved January (2018).
[20] 關注點分離. https://en.wikipedia.org/wiki/Separation_of_concerns. Retrieved December
(2017).
[21] MVC. https://developer.mozilla.org/en-US/Apps/Fundamentals/Modern_web_app_arc
hitecture/MVC_architecture. Retrieved February (2018).
[22] Typescript. https://www.typescriptlang.org/. Retrieved January (2018).
[23] Phillip Laplante. What Every Engineer Should Know About Software Engineering, pages
85–86. CRC Press Taylor and Francis Group, 6000 Broken Sound Parkway NW, Suite
300, 2007.
[24] MVVM. https://zh.wikipedia.org/wiki/MVVM. Retrieved February (2018).
[25] Chrome extension. https://developer.chrome.com/extensions. Retrieved November
(2018).
[26] Chrome web store. https://chrome.google.com/webstore/category/extensions. Retrieved
November (2018).
[27] W3.CSS. https://www.w3schools.com/w3css/default.asp. Retrieved February (2018).
[28] JSAV. http://jsav.io/. Retrieved September (2018).
[29] OpenDSA. https://opendsa-server.cs.vt.edu/. Retrieved September (2018).
[30] W3Schools How To. https://www.w3schools.com/howto/howto_js_slideshow.asp. Retrieved
February (2018).
[31] Leaflet. https://leafletjs.com/. Retrieved October (2019).
[32] Open street map. https://www.openstreetmap.org. Retrieved October (2019).
[33] Esri leaflet. https://esri.github.io/esri-leaflet/. Retrieved October (2019).
[34] 台灣3+2 郵遞區號查詢. http://zip5.5432.tw/. Retrieved October (2019).
[35] Arcgis. https://www.arcgis.com/home/index.html. Retrieved October (2019).
[36] W3CSS template. https://www.w3schools.com/w3css/w3css_templates.asp.
[37] JSX. https://facebook.github.io/jsx/. Retrieved March (2019).
[38] ECMAScript 2016 Language Specification. http://www.ecma-international.org/ecma-
262/7.0/index.html. Retrieved March (2019).
[39] React-Magic and HTMLtoJSX. https://github.com/reactjs/react-magic. Retrieved March
(2019).
[40] npm. https://www.npmjs.com/. Retrieved May (2019).
[41] Angular Libraries. https://angular.io/guide/creating-libraries#refactoring-parts-of-an-a
pp-into-a-library. Retrieved June (2019).
[42] Yarn. https://yarnpkg.com/en/. Retrieved May (2019). |
| Description: | 碩士
國立政治大學
資訊科學系
105753025 |
| Source URI: | http://thesis.lib.nccu.edu.tw/record/#G0105753025 |
| Data Type: | thesis |
| DOI: | 10.6814/NCCU201900017 |
| Appears in Collections: | [資訊科學系] 學位論文
|
Files in This Item:
| File |
Size | Format | |
|---|
| 302501.pdf | 3419Kb | Adobe PDF2 | 535 | View/Open |
|
All items in 政大典藏 are protected by copyright, with all rights reserved.
|
