Describes a micro-template of JavaScript.

Describes a micro-template of JavaScript.

This article mainly introduces a JavaScript micro-template. For more information, see

I 've been using a small tool and found it useful in building Javascript applications. It is a very simple template function. It is fast, supports caching, and is easy to use. I would like to share some tips on using it.

The following is the Template Function Code (you can get a more refined version from the book Secrets of the JavaScript Ninja to be published ):

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

// Simple JavaScript template engine // John Resig-http://ejohn.org/-MIT Licensed (Function (){ Var cache = {};   This. tmpl = function tmpl (str, data ){ // Determine if we already have such a template, or we need to load the Template // Save the result to the cache. Var fn =! /\ W/. test (str )? Cache [str] = cache [str] | Tmpl (document. getElementById (str). innerHTML ):   // Generate a reusable function to provide the template generation function // (It will be recorded in the cache ). New Function ("obj ", "Var p = [], print = function () {p. push. apply (p, arguments) ;};" +   // Use with () {} to introduce data as a local variable "With (obj) {p. push ('" +   // Convert the template to a non-pure javascript code Str . Replace (/[\ r \ t \ n]/g ,"") . Split ("<%"). join ("\ t ") . Replace (/(^ | %>) [^ \ t] *) '/g, "$1 \ r ") . Replace (/\ t = (.*?) %>/G, "', $1 ,'") . Split ("\ t"). join ("');") . Split ("%>"). join ("p. push ('") . Split ("\ r"). join ("\\'") + "');} Return p. join ('');");   // Provide users with some basic Keri Functions Return data? Fn (data): fn; }; })();

Your template code looks similar (this is not a required format, but I prefer it ):

?

1 2 3 4 5 6 7 8 9 10

<Script type = "text/html" id = "item_tmpl"> <Div id = "<% = id %>" class = "<% = (I % 2 = 1? "Even": "") %> "> <Div class = "grid_1 alpha right"> </Div> <Div class = "grid_6 omega contents"> <P> <B> <a href = "/<% = from_user %>"> <% = from_user %> </a>: </B> <% = text %> </p> </Div> </Div> </Script>

You can also embed scripts:

?

1 2 3 4 5

<Script type = "text/html" id = "user_tmpl"> <% For (var I = 0; I <users. length; I ++) {%> <Li> <a href = "<% = users [I]. url %>"> <% = users [I]. name %> </a> </li> <% }%> </Script>

Tip: embed the script into your page, and the content-type is unknown (for example, in this example, the browser does not know how to execute the text/html Script ), then the browser ignores it-and the search engine and screen reading will also ignore it. This is a good disguise code that can embed your template into your page. I like fast but casual technology. I only need one or two small templates to get lightweight and fast applications.

You can use it in a script like this:

?

1 2	Var results = document. getElementById ("results "); Results. innerHTML = tmpl ("item_tmpl", dataObject );

You can pre-compile the result and use it later. If you use only one ID as a parameter (or template Code) to call the template function, it will return a pre-compiled function, you can call it later:

?

1 2 3 4

Var show_user = tmpl ("item_tmpl"), html = ""; For (var I = 0; I <users. length; I ++ ){ Html + = show_user (users [I]); }

This is currently the most difficult way to resolve and convert code-you may not love it. However, he only has one of my favorite technologies: When character static search and static replacement are used in strings, such as split ("match "). join ("replace"), the execution speed is better-it does not seem intuitive but can work effectively in modern browsers (the next version of FireFox will greatly improve replace (/match/g, "replace") Performance-so this long expression is not needed now)

Enjoy it with ease-I'm curious about sudden changes in code. Even if it is simple, there are still many things that can be done with it.