Component Library Technology Based On MVVM Framework Research And Implementation

With the rapid development of Internet technology,Web front-end technology is becoming more and more complex,Web Intelligence Lab is committed to independently develop a highly intellectual property front-end MVVM pattern framework Nodom,and released Nodom2 and the supporting component library Nodom UI on the open source platform.In order to improve performance and maintainability,the team carried out a complete refactoring and released the Nodom3 version.Through analysis of Nodom2 and the accompanying component library Nodom UI,the following issues were identified:(1)Adaptation issues: The overall architecture of Nodom3 was adjusted during the refactoring process and some APIs were modified or deprecated,which resulted in Nodom UI being incompatible with the new version of Nodom3.(2)Performance issues: Nodom UI can suffer from performance bottlenecks,resulting in slower page rendering.This is due to problems with the Nodom2framework’s internal compiler,routing mechanism,responsive data processing,rendering engine and deficiencies in the Diff algorithm.(3)Flexibility issues:Nodom2 lacks explicit component lifecycle hook functions,making it difficult to execute specific logic during the creation,update and destruction of components;and Nodom2’s template syntax is too simple and does not support some advanced features to implement some complex functions.Based on the above issues,the Nodom3 component library was refactored and optimised in the following ways:(1)To address the new features and API changes of Nodom3,the Nodom component library was redesigned and re-implemented to fit the new version of the framework.(2)Optimising the component rendering logic to improve page loading and rendering speed by utilising Nodom3’s new data responsive processing system,new rendering mechanism and new Diff algorithm.(3)Optimise the code structure and organisation of components to improve their flexibility by using the component lifecycle hook functions and new template syntax provided by Nodom3.Finally,this paper tested the components: for functional testing,the components functioned correctly;for compatibility testing,the good adaptation of the component library to different browsers and devices was verified;for performance testing,several typical components were selected for testing,and the test results showed that the optimised component library compared with that of Nodom2,the components were more efficient in terms of compilation time,data hijacking time,first rendering The results show that the optimised component library has significant advantages over the Nodom2 component library in terms of compile time,data hijacking time,first rendering time,incremental rendering time and memory usage.