在當今互聯(lián)網(wǎng)科技飛速發(fā)展的背景下,Web前端技術(shù)進入了一個新的時代。以組件化為代表的開發(fā)方式已逐漸成為前端領(lǐng)域的主流趨勢。雖然目前現(xiàn)有的前端組件化技術(shù)種類繁多,但組件在獲取網(wǎng)絡數(shù)據(jù)和對數(shù)據(jù)的管理方面都存在著復雜的控制問題。尤其是在構(gòu)建大規(guī)模應用時,由于組件數(shù)量的龐大和業(yè)務規(guī)則的復雜化,加大了前端系統(tǒng)的構(gòu)建難度。這不僅不利于系統(tǒng)的擴展和迭代,也增加了企業(yè)對系統(tǒng)后期的開發(fā)和維護成本。本文對前端組件的數(shù)據(jù)獲取及管理復雜化的問題進行了綜合分析,并基于React組件技術(shù),制定出一套對組件數(shù)據(jù)流的管理方案。該方案用于在前端組件化開發(fā)中,簡化數(shù)據(jù)獲取及管理的復雜度,并提升組件對功能邏輯的調(diào)用能力。方案的具體描述可以歸納為以下幾點:1.本文利用Fetch網(wǎng)絡數(shù)據(jù)獲取技術(shù)和Promise異步控制思想,對React組件生命周期模型進行了改進。使組件能夠用同步的方式控制異步數(shù)據(jù)的請求,并增強了組件對數(shù)據(jù)請求結(jié)果的處理能力。2.組件獲取數(shù)據(jù)后,需要根據(jù)業(yè)務規(guī)則進行管理。由于React組件不易于控制復雜的業(yè)務邏輯,因此本文設計了一種組件狀態(tài)數(shù)據(jù)管理方法。將組件的數(shù)據(jù)模型與業(yè)務邏輯進行分離,從而降低組件間業(yè)務的耦合度,并對邏輯調(diào)用及數(shù)據(jù)通信進行有效控制。3.本文以改進的React組件模型為依據(jù),結(jié)合組件狀態(tài)數(shù)據(jù)管理方法,設計了一種頂層組件容器引擎。該引擎用于裝載頁面中的所有組件,并提供流程化的形式管理組件數(shù)據(jù),使頁面更易于拆解和復用。通過使用本文開發(fā)設計的頂層組件容器引擎,能夠有效控制頁面中組件的數(shù)據(jù)獲取和邏輯調(diào)用。該引擎在提升前端頁面的開發(fā)效率的同時,也增強了前端系統(tǒng)的可維護性和可擴展性,降低了后期對頁面的擴展及維護成本。
【學位單位】：重慶郵電大學
【學位級別】：碩士
【學位年份】：2018
【中圖分類】：TP393.09
【部分圖文】：

圖 1.1 2017 前端組件化框架使用現(xiàn)狀報告報告顯示，近年來 React 技術(shù)的使用者人數(shù)正逐年攀升，從 npm 模塊包下看，React 的使用率增長了 500％。其中更加引人注目的是 React 不僅能夠應eb 開發(fā)，甚至在移動端或是桌面應用程序中都有不俗的表現(xiàn)。這得益于其良

圖 2.1 React 工作原理圖如圖 2.1 所示，展示了 React 在實際開發(fā)中的工作原理，主要流程可分為如下幾個階段：首先通過 JSX 語法（JSX 語法是一種 JavaScript 語言的語法糖，屬于 JS 的一種

圖 2.2 React 組件生命周期模型圖 2.2 所示，展示的是 React 組件生命周期，生命周期的每個階段都：DefaultProps：該方法主要用于定義組件的默認 Props 值。在創(chuàng)建階段

【參考文獻】

相關(guān)期刊論文 前4條

1 靖偉;;Ajax技術(shù)的研究與應用[J];中國傳媒大學學報(自然科學版);2015年06期

2 許會元;何利力;;NodeJS的異步非阻塞I/O研究[J];工業(yè)控制計算機;2015年03期

3 熊文;熊淑華;孫旭;張朝陽;;Ajax技術(shù)在Web2.0網(wǎng)站設計中的應用研究[J];計算機技術(shù)與發(fā)展;2012年03期

4 李晶;;NodeJS——服務器端JavaScript運行環(huán)境[J];程序員;2010年12期

相關(guān)碩士學位論文 前2條

1 戴翔宇;Web前端工程組件化的分析與改進[D];吉林大學;2016年

2 王濤;數(shù)據(jù)共享與數(shù)據(jù)交換系統(tǒng)的設計與實現(xiàn)[D];大連理工大學;2015年

本文編號：2828951