Front-end JS template library kino. razor-principle Process Analysis-optimized version of wheel RazorJs

1. Do you need to get data from the background and splice strings in the front-end JS? Dare not find a front-end Ambassador... Now there are a lot of such template libraries. I have used jquery-template, JsRender, a bunch of templates I have heard of, and various template libraries in various MVC libraries. Before that, I saw someone introduce kino. razor, a look at the source code, there are hundreds of lines, the previous use of the template engine, curious how to come out. I will take this opportunity to study and create one by myself. It has few source code... 2. kino. razor template library principle, process analysis how to use http://www.cnblogs.com/music/p/kino-razor.htmlthis article describes, the foreground template is written as copy code 1 <script type = "text/template"> 2 @ {3 // code block... 4 var data = 10; 5} 6 7 @ for (var I = 10; I <data; I ++) 8 {9 <div> @ (I) </div> 10} 11 </script> How can I achieve this by mixing JavaScript code with html... First, we need to analyze this template and realize that there are two modes: js code mode and html code mode. In code mode, @ {code block} is the code to be executed and does not generate template-generated content. The other is to reference variables, in <div> @ (variable) </div>, this @ (variable) is the same as <div> </div> and is generated in the html generated by the template engine. This is a bit abstract. So there are three states: 1. code Block 2. common string, which is finally generated in html 3. variable, which needs to be executed and sent to the html. After obtaining the templateString, the template engine will scan and process the code block such, it needs to be executed in a context to save the variables in it. When it comes to a common string, such as <div>, it is directly placed in the result set. For @ (variable) you need to explain in this context that this value may be declared in the code block and then placed in the result set. Like this template, you can use kino. razor (template, model); this model object is passed in. to be used by the template, this context is also required. Who will provide this context ??? I read the source code. This template string will eventually be compiled into a function, that is, var func = A method (string template) that converts string into a function, and then this model, pass it to func, that is, func (model) will get the output html compiled function. What kind of function func (model) {var result = []; // All code in the code block such as @ {} is put here to run var data = 10; // @ () {} in the for while loop, the default mode is String, that is, you can directly write the <div> reference variable to write the @ symbol for (var I = 0; I <10; I ++) {// inside the loop, the String output content. We construct an array result to load the content to be generated. // we encounter <div> result. push ("<div>"); // @ (I) result. push (I ); // Variable, which can be set in the current context and placed in the generated result set // met </div> and put in result. push ("</div>")} achieves the purpose of loop. But how can we generate such an expected function ??? JS contains the new Function (parameter0,... parametern, And the last parameter is the Function body). We only need to generate the Function body. The function body functionContent is generated and presented as a string. You need to add different statements to functionContent based on the status of the template string, code block, string, or variable, finally, the function func is formed. When func (model) is called, The result in our function body is returned. In kino. segmentHelper is used in razor. parse converts templateString to a segmrnt. This segment is the content differentiated by status. content is the content, and type is the type. The Status uses ContentHelper to convert the segment array to functionContent, then, a func with the parameter "model" is returned. That's all. 3. RazorJs. js to figure out the principles and processes of the library, it is not too difficult to write one by yourself. Just do it by imitating the library. I made a RazorJs by myself, which will simplify it and I will not do anything I don't want, such as kino. in razor, @ variable is feasible, that is, it can be done without parentheses '()'. I feel that it is not intuitive and cannot be implemented. Variables referenced in RazorJs must be enclosed in parentheses, such as @ (variable). Some jquery-related methods are added. razor can also be used without jquery. render and compile methods. Modify model to ViewBag. First time source code and kino. razor is too similar, and the second day after writing, it is found that the supported while loop is meaningless. It does not support writing code blocks inside the while, such as while (I> 0) I --; this I-did not write, so I reorganized my thinking and re-wrote it. The original name was RazorJs.0.1.js. Add the ng-repeat method similar to angularJS to directly use div as the template. for example, directly write <div razor-template razor-for = "var I = 0; I <10; I ++ "> other template .... </div> use $ (selector ). renderNode (ViewBag) to render and show it, when writing the razor-template, it will be hidden in dom ready. Another <div razor-repeat = "item in items" razor-template> <div> @ item. age </div> is consistent with the foreach (var item in items) written in C #. This div uses $ (selector ). renderRepeat (ViewBag) to convert the template to a string. For more extension usage, see Csdn code address: https://code.csdn.net/magicdawn/razorjs. The markdown is being written slowly. Too many source code comments. 4. about rendering speed... as we know above, these are actually compiled into a function, so in those tests the so-called thousand render is meaningless, the real number of render, you can compile the func function first, and then call func (ViewBag) by yourself. The speed of generating this function is linear scanning, so you don't have to worry about it.