Research And Optimization Of Template Engine Based On Nodom

As the scale of front-end projects continues to expand,the development method of using the MVC model to build pages is becoming more and more inadequate.At present,the mainstream front-end development method in the industry is to use the front-end framework of the MVVM model to build front-end projects.These frameworks use template technology and data proxy technology to realize two-way binding between view and data,so that data changes are automatically reflected in the view,thereby reducing the number of coding and coding complexity.Nodom2 is a front-end MVVM framework.This paper analyzes the template engine of the existing Nodom2 front-end framework and finds that the template engine of Nodom2 has problems in the core process of the template engine,template syntax and responsive data system:(1)In terms of the execution process of the template engine,the template engine suffers from three defects: low execution efficiency,redundant parsing results,and heavy dependence on DOM API;(2)In terms of template syntax,the template syntax has two defects: poor flexibility and separation of template scope from Java Script scope;(3)In terms of reactive data system,reactive data system has three defects: deep objects require deep proxying,newly added properties lack reactivity,and data proxy cannot cover all types.To address the above problems,this paper designs and implements a new template engine and integrates it into the front-end framework Nodom3,in order to improve the performance of Nodom3 and enhance user experience.The specific work is as follows:This article first proposes the design requirements of a new template engine for the problems in these three aspects.In terms of template engine execution process,it aims to reduce the dependence on browser-implemented DOM API,and increase the execution efficiency and fault tolerance of template engine.In terms of template syntax,it aims to increase the maintainability and flexibility of the template language.In terms of reactive data system,it aims to increase the convenience of data proxies.Based on the above design requirements,this paper designs,implements and optimizes from three aspects:1)In terms of template engine process,the template engine is reconstructed based on the core idea of Living Template technology,which solves the problem of high dependence on DOM API and redundant parsing results in Nodom2 template engine.On this basis,this topic adopts a two-step optimization strategy to improve the execution efficiency of the template engine:(1)Adopt a single-pass compilation strategy to reduce intermediate data generated by lexical analysis and access operations to intermediate data;(2)Skip the generation of the abstract syntax tree and directly generate the virtual DOM.2)In terms of template syntax,on the basis of HTML-like template syntax,the template code and Java Script maintain the same scope by returning the template code through a function.At the same time,using template strings to process template code not only retains the dynamic capability in the template,but also retains the flexibility of native HTML.3)In terms of responsive data,a responsive data management solution based on Proxy and Reflect for data interception is adopted to solve the problem of deep proxy in Nodom2.At the same time,proxy support for array data types is added,and responsiveness can be achieved for newly added attributes.Finally,this paper completes a comprehensive test of the new template engine.The test results show that compared with the template engine before optimization and the template engine of the mainstream front-end framework on the market,the template engine after optimization can achieve 10000 nodes in different scales.Both the compilation time and the heap memory usage during compilation show obvious advantages,which proves the rationality of the design of the template engine.