Research And Implementation Of Web Front-end Framework Based On Data-driven Model

This article addresses the problems of low reusability of code,slow page response and insufficient performance in developing lightweight web applications.It uses traditional front-end technologies such as Java Script and Ajax,and emerging front-ends such as Html5,CSS3 and Virtual Dom.The combination of technical theory and practice is used to implement a web front-end framework based on data-driven models.The specific research contents are as follows:Firstly,the application,advantages and disadvantages of the three data-driven models of MVC,MVP and MVVM in the front-end framework and the structure and implementation principle of the current mainstream Web front-end framework are deeply studied and analyzed.The architecture design idea based on data-driven model is adopted.The front-end framework was analyzed for requirements,architecture,class diagram design,and detailed design of the view layer,model layer,and view model layer.On this basis,an efficient web front-end development framework based on data-driven model is implemented.Frameworks include views,modules,models,templates,events,expressions,directives,filters,requests,plugins,routing,compilation and rendering.The framework implements a data-driven rendering mode.Page changes can be achieved by simply modifying the data,greatly reducing development costs,improving development efficiency,and optimizing three aspects: on the one hand,by providing complete frameworks.Modular support,pages are combined in modules,modularized,SPA applications are added,and the reuse of modules is increased,which improves the reusability of front-end development code;on the other hand,in the research and optimization framework The data storage and extraction method,and proposes a modular storage solution of data,which reduces the data interaction time with the server while ensuring data integrity,effectively improves the page response speed,and further improves the user experience;The performance optimization scheme of the sexual rendering framework reduces the node traversal of the dom tree,reduces the time complexity,and strikes a balance between the complexity of the framework and the performance optimization.Finally,the overall application and comprehensive testing of the Web front-end framework based on the data-driven model is completed.Describe the process and ease of use of the entire framework through front-end framework applications in Web App,code quality inspection,and automated functional testing.At the same time,the front-end framework of the implementation is compared with the current mainstream front-end framework Angular JS and React JS.It can be seen that the framework has been further improved in rendering rendering efficiency,page response efficiency,memory usage efficiency and resource loading efficiency.It proves that the data-driven model-based Web front-end framework realized by the thesis has better performance and is suitable for developing logic-simple web applications.