更具模块化； 在.js文件中包含html元素？

Question

I have a page which has many buttons that perform an action with javascript. No problem here, just a html page and multiple .js file, one .js file for every action. Just to separate stuff a bit and make everything a bit more manageable. I will write a script to combine them all at deployment.

A lot of my javascript actions need html elements to function. For example to change a color the color.js needs a div with form elements so that user can change the color and press the button to save changes. The color.js binds functions to the onClick of the buttons and such. No problem here.

A problem comes up when there are many javascript actions using many html elements. All these html elements need to put into one html page. This makes managing things complicated. For example when i change the color field id i need to go to color.js and do the change. In addition i have to find the html element in my huge html page and also do the change.

Is it possible to put the html elements needed by my javascript actions into the .js file and somehow include it in my html page?

Of course i can escape all html elements and put it in a javascript variable and document.write it. But escaping is not a nice thing to do and changing html afterwards is quite painful.

I'm also not looking for a ajax function, cause with many different actions this will cause network problems.

Cheers for any thoughts on the subject!

Answer 1

You can use templates to generate dynamic HTML via JavaScript. Most of Templates Engines have the same implementation:

• A template structure (DOM) or HTML string
• A method to render the template
• The data that fills the template (Array, Object)
• Settings to configure the template engine

I have used some template engines, one of them is Hogan.js which has a friendly sugared-syntax, very easy to use, but lower performance. It implements the Mustache syntax.

Other template engine is in Underscore.js library, which provides no sugared-syntax but a native javascript syntax, giving more power, and best performance.

The last one that I have used is kendo-ui templates .
Kendo UI templates have a heavy emphasis on performance over feature glut. It will trade convenient "syntax sugar" for improved performance.

If you want to try more engines, here you can get a lot of them:

• Template-Engine-Chooser

---

By other hand, if you want just to load static HTML (eg an static view), you can use jQuery.load(url) to load data from the server and place the returned HTML into the matched element. .load() is a shorthand method of jQuery.ajax()

---

Recomendation: whichever option you choose, I recommend using cache, either to save the view or to save the compiled template, thus the performance is improved by avoiding request of the same resource.