| dc.contributor.advisor | 陳正佳 | zh_TW |
| dc.contributor.advisor | Chen, Cheng-Chia | en_US |
| dc.contributor.author (Authors) | 江太一 | zh_TW |
| dc.contributor.author (Authors) | Jiang, Tai-Yi | en_US |
| dc.creator (作者) | 江太一 | zh_TW |
| dc.creator (作者) | Jiang, Tai-Yi | en_US |
| dc.date (日期) | 2019 | en_US |
| dc.date.accessioned | 1-Jul-2019 10:59:10 (UTC+8) | - |
| dc.date.available | 1-Jul-2019 10:59:10 (UTC+8) | - |
| dc.date.issued (上傳時間) | 1-Jul-2019 10:59:10 (UTC+8) | - |
| dc.identifier (Other Identifiers) | G0105753025 | en_US |
| dc.identifier.uri (URI) | http://nccur.lib.nccu.edu.tw/handle/140.119/124195 | - |
| dc.description (描述) | 碩士 | zh_TW |
| dc.description (描述) | 國立政治大學 | zh_TW |
| dc.description (描述) | 資訊科學系 | zh_TW |
| dc.description (描述) | 105753025 | zh_TW |
| dc.description.abstract (摘要) | 網頁內容元件化是現今網頁發展的主流，許多目前的前端網頁設計框架的設計理念均是以模組化元件方式將內容置於網頁之中。為了經由這些框架再次利用既有網頁的一些有用內容，我們因此計劃將它們提取並重構為基於W3C Web 組件規格為基礎的客製化Web 元件，並在三個領先的JavaScript 框架：Angular，React 和Vue 中實現這些元件。網頁內容元件化使得開發者可以更容易重複使用與維護網頁內容。在製作成客製化網頁元件之前我們通常需要對選定網頁內容進行萃取與重構。所謂萃取是指由瀏覽網頁中識別並擷取選定部分的對應原始碼。而重構則是指在保有原有功能與效果的前提之下，對萃取的網頁內容進行重組或增刪。至於元件化，除了封裝萃取的網頁內容使其成為客製化元素的內容範本之外，尚需抽象化範本內容以擴增其應用範圍。具體作法是選擇和參數化內容模板中的一些可變項目，而前端框架將允許未來使用該元件的開發人員能夠通過設置屬性和元素內容的方式傳遞他們自己的內容來替換這些可變項目。為方便使用者達成上述任務，我們還提供一套方法與輔助工具，可以幫助使用者有效的將網頁內容轉換為客製化元件。本論文針對兩個主題具體實作。其一是由一些網頁中選取具有重複使用價值的內容並將其製作為三個網頁框架(Angular、Vue、React) 下的網頁元件。這些元件均提供可客製化的參數調整，如顏色、字型等等。我們實際完成的網頁元件有Footer 元件、圖片幻燈片元件、JSON 資料表格化元件、查詢郵遞區號和縣市人口的地圖元件等。其次則是提供一套方便萃取與重構網頁內容的編輯工具。由於Google Chrome 是目前的主流瀏覽器，此工具因而實作為Chrome Extension。它可和瀏覽網頁互動，具體功能包含呈現當前網頁的DOM 結構，以及醒目標示特定選取DOM 節點在渲染頁面中的對應區塊。此外也提供預覽功能，可彈跳一個獨立頁面顯示特定DOM 節點的對應渲染畫面。 | zh_TW |
| dc.description.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 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. | en_US |
| dc.description.tableofcontents | 1 論文簡介 81.1 動機 81.2 實現方式 91.3 論文貢獻與特色 102 相關研究 112.1 Web Component 112.1.1 HTML imports 112.1.2 Shadow DOM 122.1.3 Templates 122.1.4 Customized Elements 132.1.5 Web Component 實作 132.2 基於元件的軟體工程[1, 2, 3](Component-based software engineering) 142.2.1 軟體工程的元件化和網頁元件化 152.3 JavaScript 框架 152.3.1 Angular 152.3.2 React 192.3.3 Vue 202.4 Chrome Extension 212.4.1 架構下各個元素間怎麼做互動 223 實作方法 263.1 重構既有網頁(Angular 版本元件) 263.1.1 W3CSS table 元件 273.1.2 Footer 元件 293.1.3 JSAV 元件 303.1.4 Slide Show 元件 313.1.5 JSON 表格元件 323.1.6 透過地圖輸入方式呈現郵遞區號元件 333.1.7 台灣行政區資料元件 343.2 重構既有網頁(Vue 版本元件) 353.2.1 JSAV 元件 353.2.2 Footer 元件 363.2.3 Slide Show 元件 363.2.4 JSON 表格元件 363.2.5 透過地圖輸入方式呈現郵遞區號 363.2.6 台灣行政區資料元件 373.3 重構既有網頁(React 版本元件) 383.3.1 JSAV 元件 383.3.2 Footer 元件 393.3.3 Slide Show 元件 393.3.4 JSON 表格元件 393.3.5 透過地圖輸入方式呈現郵遞區號 403.3.6 台灣行政區資料元件 413.4 Chrome Extension 網頁萃取工具 423.4.1 網頁萃取工具系統架構 443.4.2 產生中間格式(Pre-format) 443.4.3 透過中間格式產生Angular 元件 453.4.4 透過中間格式產生Vue 元件 463.4.5 透過中間格式產生React 元件 463.5 將元件打包為NPM 套件 484 操作流程與展示 494.1 Chrome Extension 網頁萃取工具操作流程 494.2 Chrome Extension 網頁萃取工具操作展示 495 結論與未來研究方向 535.1 結論 535.2 未來研究方向 536 參考文獻 54 | zh_TW |
| dc.format.extent | 3501492 bytes | - |
| dc.format.mimetype | application/pdf | - |
| dc.source.uri (資料來源) | http://thesis.lib.nccu.edu.tw/record/#G0105753025 | en_US |
| dc.subject (關鍵詞) | 網頁元件 | zh_TW |
| dc.subject (關鍵詞) | 網頁萃取 | zh_TW |
| dc.subject (關鍵詞) | 網頁框架 | zh_TW |
| dc.subject (關鍵詞) | 重構 | zh_TW |
| dc.subject (關鍵詞) | Web component | en_US |
| dc.subject (關鍵詞) | Web extractor | en_US |
| dc.subject (關鍵詞) | Web framework | en_US |
| dc.subject (關鍵詞) | Refactor | en_US |
| dc.title (題名) | 適用於多種JavaScript 框架系統的既有網頁內容之重構與元件化 | zh_TW |
| dc.title (題名) | The refactor and componentization of legacy web contents for use in modern JavaScript frameworks. | en_US |
| dc.type (資料類型) | thesis | en_US |
| dc.relation.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. Protocolreconfiguration 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/frontal/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/20141023013122/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_Components. 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/Document_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_architecture/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, pages85–86. CRC Press Taylor and Francis Group, 6000 Broken Sound Parkway NW, Suite300, 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. RetrievedNovember (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. RetrievedFebruary (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-app-into-a-library. Retrieved June (2019).[42] Yarn. https://yarnpkg.com/en/. Retrieved May (2019). | zh_TW |
| dc.identifier.doi (DOI) | 10.6814/NCCU201900017 | en_US |
