Font Size: a A A

The Research And Implementation Of Modularity-based Front-end Development Framework

Posted on:2018-06-13Degree:MasterType:Thesis
Country:ChinaCandidate:T YangFull Text:PDF
GTID:2348330518496279Subject:Computer Science and Technology
Abstract/Summary:PDF Full Text Request
With the development of Internet technology, people rely more and more on the Web, and the site interactions also become more complex,which result in a direct expansion of website. Meanwhile the website continues to expand, resulting in difficulties to maintain and to expand the code, so modularity is the right way to solve these problems in front-end development. However, there are still some shortcomings in the current front-end modular implementations, mainly reflected in the lack of a unified front-end module solutions. Because the front-end is composed of three layers: structure layer, presentation layer and behavior layer, the modularization scheme needs three parts to cooperate, and unilateral modularization is not the expectation of this paper. Currently more popular is the JavaScript modularity, an effective solution to the behavioral layer of the modular problem. But the modular aspect of the page does not have a level better solution, resulting in the page code readability and maintainability poor phenomenon. While the current page modular development performance weak, there need an effective solution to solve these problems. At the same time, the emergence of front-end template technology cannot achieve the needs of modular development page, which requires developers to re-analysis of the development process optimization.In response to these objectives, we propose the front-end modular application framework, and put it into the big data platform to give the platform development supports. The main research contents include: (1) In the aspect of modular development of the page, this paper first studies the theory of front-end template compilation, and focus on JavaScript front-end template engine specific principles. And this paper compare the existing template technology, summarize the existing problems of the template engine, and summed up the system template engine technology,which optimizing the compile speed. Then, this paper studies the theory of pre-compiling templates. Combine with the Node.js technology, this paper designs the pre-compiling template function from the view of highly modularity of the page, and designs the AST synthesis technology, and carries on the technical realization. (2) In the realization of automation, this paper designs the overall architecture of the front-end development framework, and researches the automation technology. At the same time,this paper studies the functional requirements of tools and designs the automation functional architecture from the perspective of automation. In this paper, the system will be split into single-file compilation tools and multi-file processing tools to support project development. (3) This paper provides technical support for the large data platform of the laboratory, and analyzes the effectiveness of the proposed framework through practice and carries out experimental verification.According to the solution from relevant technical research, this paper implements the page modular tool, and presents the page pre-compilation template engine NSMOD and front-end template template.js. This paper realizes the functions of module split, module dependency and module loading of static pages, and validates the effectiveness of the tool through experiments. Based on the above solutions, combined with automation technology, this paper completed the development of automated tools(NSMAT). The tool takes project as a starting point, combined with the page modular development tools, put forward the file analysis, file compilation, file export and other functions. The tool provides developers with a complete set of automated processes that provide engineering support for front-end developer modular development. This achieves independence and coupling of modules, saves manpower, and provides a solution for front-end modular development.
Keywords/Search Tags:Frontend, JavaScript Modular, Node.js, Frontend Template
PDF Full Text Request
Related items