Design And Implementation Of Virtual DOM Lightweight Web Front-end Framework Based On MVVM

In recent years,with the continuous development of the Internet,especially the mobile Internet,the demand and complexity of Web applications are increasing,and the volume of Web front-end code is becoming larger and larger.In order to solve the problems of low reusability,poor scalability,difficult maintenance and management,and inefficient project construction in the front-end development process,a number of excellent front-end frameworks emerged.However,in the mobile network,the network environment is relatively poor,and the large front-end framework itself may cause network bottlenecks,and frequent DOM operations also make page refresh efficiency one of the main constraints of front-end performance.The need in Web application development for a lightweight front-end framework which can solve the above that is problematic and reasonably reduces its size and improves loading efficiency to accommodate low-speed network environments is becoming more and more urgent.This paper adopts the MVVM architecture to realize the lightweight front-end framework Luna with virtual DOM as the core.The specific research contents are as follows: Firstly,the business needs analysis of the front-end framework,determine the overall architecture of the framework,determine the main functional modules of the framework MVVM,and perform detailed functional analysis and performance of the Luna front-end framework modules.The optimization and framework code construction requirements were analyzed in detail to determine the relevant indicators for performance testing.Secondly,the front-end framework is designed and implemented based on MVVM architecture.The front-end framework Luna consists of four basic modules: Util module,Model module,View module and View Model module.In this paper,each module is designed and implemented in detail.The Util module provides the necessary environment preparation and common function functions for the framework,and supplements the Java Script language features,implements the necessary functions of the front-end framework such as component design and front-end routing,and provides an entry point for the framework.The Model module takes the data object as the core and implements related functions such as storing,reading,monitoring,updating,and interacting with the server.The View module takes the virtual DOM as the core,simulates the DOM tree structure through Java Script objects,and compares the virtual DOM differences before and after the view changes to reduce the DOM operation,improving the rendering performance and loading efficiency of the page.The View Model module automatically associates and two-way binds the Model and the View module,so that the developer does not need to manually maintain the view update,which realizes the decoupling of the view and the data,so that the data change can update all the associated element nodes and components at the same time.Then use the caching mechanism to reduce the number of HTTP requests,and by properly compressing and merging the framework code,the network load of the framework file is reduced,thereby increasing the loading speed of the page.Finally,the main functions of the function modules of the Luna front-end framework implemented in this paper are tested in detail.The key performance indicators are tested by constructing the web application and the simulated mobile network environment,and compared with the performance of the popular React and Angular frameworks.And the test results are analyzed.The MVVM architecture adopted by Luna,which is implemented in this paper,effectively solves the problems of poorly organized front-end code organization and poor maintainability.The optimized virtual DOM technology improves the efficiency of page loading and refreshing,and reduces the code volume by using compression cache technology.Using a reasonable build method improves the development efficiency of application developers.The framework effectively improves the front-end performance in a special network environment.The web application page loading speed based on the framework is greatly improved compared with the mainstream front-end framework in the poor network environment,which is proposed a new solution for the design and development of the front-end framework.