Research And Implementation Of Front-end Template Engine Based On JQuery Framework

With the scale of front-end part has to expand when accumulative script code is thrust into original system. As a consequence, here comes some problem that the project is too huge in scale to be organized and maintained, that existing code has hardly been used in other parts as well as that it hard for the project to further expand. Focusing on these issues, the pattern of MVC given birth by the back-end has unsurprisingly been utilized to assist the developing of front-end. Considering the template engine of front-end is a dispensable part in the separation of views and models, which is essential to the successful transplant of MVC from the back-end to the front-end, the benefit brought about by a efficient omnipotent and convenient template engine will be profound.In this paper, by learning the design of exist template engine that generally being used in the market, analyzing the features of traditional developing and maintenance within the front-end field, following the most popular design patterns as well as making use of relevant technique including Java Script, j Query, DOM, Ajax and JSON, a front-end template engine is implemented based on the structure of j Query. To be specific, the research in this paper is proceeding as follows.To begin with, deep research and comparison are done about traditional template engine. Given the existing flaws, discussion about the new needs, the new features and the responsibility the engine should take is delivered. And then improvements about structure, procedure and way to use is achieved.Furthermore, different parts of the engine is designed respectively. Specifically there are two major parts, namely data access and core management. Class and interface about these two part are designed and so are the relevant property and method.Moreover, the functions mentioned above are implemented along with some creative ideas, one of which is to cache the AST-like syntax tree produced by analyzing template files into the object element in order to enable that element to display data without additional analysis next time. Besides, dynamic data binding that are only available in some exclusive template engine is also implemented. Another creative idea is the realization of the dynamic data binding function only in the special template engine. At the same time, the advanced functions of template reuse, data filtering and so on are realized.Finally, tests about efficiency, security and functional integrity and estimation about the usability in real project scenario are carried out. It turns out that, compared with conventional front-end template engine, the one delivered in this paper have significant advantages in terms of performance and function, which no doubt proves its value in front-end development in actual projects.