Intermediate JavaScript example, how to implement a simple and practical template application mechanism, Gxtemplate, chapter one (estimated to write 9 chapters)

We are just established, a traditional software development company (only a few people of small companies), the main business is the traditional industry software project outsourcing.

Because this kind of project needs the technology is not deep, but has the very high request to the development efficiency, therefore we are slowly groping the rapid development pattern.

It is also willing to share the parts that are not cluttered.

This series of articles is mainly for gxtemplate, a template to apply the class library (not to mention the framework)

This is not a tutorial on "How to use", but rather a tutorial on "How to create" this kind of library.

The feature is that we will be the entire creation process, starting from the original version of v0.1, step by step how to add code, gradually show to everyone to watch.

If you are a beginner and want to improve on JavaScript, you can keep an eye on this series of tutorials.

First the original version of v0.1 is this: (v1.0 has been completed. But the tutorial is to separate multiple writing)

Https://github.com/zhgangxuan/GXTemplate/blob/master/_oldfiles/version1/template01.html

Source code (collapsed by default, expand):

<! DOCTYPE html>
　　
Goal:
Let the text content support {#脚本返回值} this syntax
This way we can avoid putting too many spans with IDs in the page, and setting the span's innertext in the separate JS code.
In the rapid development perspective, the less code, the less separation, the better
Implementation process:
As the script executes, the HTML code has been translated into a specific DOM object. So our strategy is to simply recursively recursive the DOM tree.
In the example, start searching from document.body and search through the entire document. (However, it is recommended to handle it from a small scope in practice)
Templateexecute (document.body);
The recursive way in Templateexecute is the reciprocal way. Start with the penultimate item first, then item n-1, then section n-2,... Up to the bottom of the first item.
var CNS = node.childnodes;for (var ni = cns.length; ni > 0; ni--) templateexecute (Cns.item (Cns.length-ni));
　　
In the process of execution, if you encounter some element that does not need to operate textnode, you also skip
Switch (node.nodename) {case ' SCRIPT ': Case ' STYLE ': return;}
In the process of recursion, if you find Textnode,. nodename== "#text" or. nodetype==3, then execute the Processtextnode function
if (Node.nodetype = = 3) {var str = node.nodevalue;if (Str.indexof (' {# ')! =-1) Processtextnode (node, str); return;}
Str.indexof (' {# ') is a process of quickly skipping content without instructions, which can improve performance.
Within Processtextnode, use the regular expression var re_template_textbinding =/{# ([^}]+)}/g; To replace all {# ...} expressions
If there are satisfied expressions and the text after the script is different from the original, then use Node.nodevalue = Newstr to overwrite the text textnode to display
function processtextnode (node, str) {var newstr = str.replace (re_template_textbinding, Function (exp, g1, index, full) {RE Turn processeval (G1);}); if (newstr! = str) node.nodevalue = NEWSTR;}
　　
And Processeval is simple, just use the built-in function of JavaScript to perform the eval. There will be a better way in the future.
function Processeval ($__exp__) {return eval ($__exp__);}
The specific data myitem is defined in the Data.js, and is referenced by subsequent examples:
var myitem = {name: "Mobile Shop", Address: "no.1234 fenghuang Road", ZipCode: "519000", Phone: "0756-0000000"};
This example runs after the display results are like this
　　
We want to build a simple, easy-to-use, asp.net+c#+javascript development solution for traditional projects.
The various open source frameworks on the Web are tough, but it's hard for beginners to spend time.
Because for many small and medium-sized software companies, they often recruit some starter developers. Too complex a framework is not suitable for personnel mobility or two development.
So we do not hesitate to take the time to redo these things. Hope to help the domestic junior developers, for the domestic information construction contribution point our own small.
In fact, the entire v1.0 version of Gxtemplate has been uploaded to GitHub. The next part of our spare time is to thank the example, write a tutorial.
For friends who don't know how to use GitHub, you can download the source code directly Https://github.com/zhgangxuan/GXTemplate/archive/master.zip
　　
Intermediate JavaScript example, how to implement a simple and practical template application mechanism, Gxtemplate, chapter one (estimated to write 9 chapters)