Home > Developer > JavaScript
I wonder if the separation of JavaScript from HTML can also be summed up as "you will have to separate the business logic from the display (Thou shalt separate business logic to display)" [1]. But with the separation of HTML and CSS in front of the control, their separation is so elegant, for the idealistic little coder is really a great attraction.
Realistically, there are a number of ways to demonstrate the benefits of JavaScript and HTML separation: Web Designers and JavaScript programmers can cooperate to minimize communication costs; When some browsers disable JavaScript, they don't cause errors. Improve the accessibility of your Web site.
There are two ideal scenarios for JavaScript and HTML separation:
1. No HTML in JavaScript
Can't do it. Dom was born to manipulate HTML for JavaScript. The two functions of javascript: First, the operation of HTML, through a variety of means to change the appearance of HTML pages; the second is the logical operation, with the development of rich clients, JavaScript in this regard the use of more and more "formal", and even like "JavaScript design mode" [2] Such a book comes out.
2. No JavaScript in HTML
Here's where "why would developers put JavaScript code in HTML?" "The perspective of this problem is analyzed.
The most common.adding events for nodes in HTML。 For example, add an event to a button: When Clicked, Pop-up dialog box.
(1) JavaScript and HTML closely combined approach: (This article all the code in the Firefox3.6 test)
Test.html
<! DOCTYPE html>
<HTML>
<HEAD></HEAD>
<BODY>
<input type= "button" value= "click Me" onclick= alert (' is a button. '); " />
</BODY>
</HTML>
(2) The practice of abstracting scattered JavaScript into functions:
Test.html
<! DOCTYPE html>
<HTML>
<HEAD>
<script type= "Text/javascript" >
function ShowMessage () {
Alert (' This is a button. ');
}
</script>
</HEAD>
<BODY>
<input type= "button" value= "click Me" onclick= "showmessage ();" />
</BODY>
</HTML>
(3) JavaScript function showmessage () there seems to be no need to stay in the. html file and throw it in. js:
A.js
function ShowMessage () {
Alert (' This is a button. ');
}
Test.html
<! DOCTYPE html>
<HTML>
<HEAD>
<script type= "Text/javascript" src= "/site_media/js/my/a.js" ></script>
</HEAD>
<BODY>
<input type= "button" value= "click Me" onclick= "showmessage ();" />
</BODY>
</HTML>
Contrast (1), (3) has been much simpler. But imagine that for an application-type Web site, the number of HTML nodes that need to add an event is dozens of and hundreds, and its maintenance and updates are a heavy burden for both Web designers and JavaScript developers. Then how to "hide" the onclick event on each node is also "hidden".
Look at the principle of the onclick. When the browser resolves the test.html, it encounters a declaration with onclick in the input button node, and then joins the event on the corresponding DOM tree. So when the page is loaded, once the button is clicked, the corresponding event can be triggered and the dialog box pops up.
Once we get rid of the onclick on input,
(4) First, declare the onclick event of input in another place, that is, the attachevents () function in A.js.
A.js
function attachevents () {
document.getElementById ("Input1"). onclick = ShowMessage;
}
function ShowMessage () {
Alert (' This is a button. ');
}
However, how to trigger the attachevents () when the HTML is loaded, you know, the browser will not actively execute the JavaScript code in. js. JavaScript code needs to be placed in HTML so that the browser will execute the included JavaScript code when parsing HTML.
But we do not want to put the attachevents () function back into the test.html, we must use some HTML and JavaScript "association" means, and this association must be done in HTML.
This association is also "why developers put JavaScript code into HTML." "One of the reasons for the problem. Istriggers specific JavaScript statements/functions at certain times in the page lifecycle。 The most used is when the page loaded at the end of the relevant resources to initialize, that is, window.onload. For the above example, we intend to put the attachevents () function into execution after the HTML load completes, namely:
Test.html
<! DOCTYPE html>
<HTML>
<HEAD>
<script type= "Text/javascript" src= "/site_media/js/my/a.js" ></script>
</HEAD>
<BODY>
<input id= "input1" type= "button" value= "click Me"/>
<script type= "Text/javascript" >
Window.onload = attachevents;
</script>
</BODY>
</HTML>
Note that JavaScript's operation of the input node is done through the attribute ID. Therefore, you do not need to explicitly include the onclick attribute and the corresponding JavaScript code on the node. In this way, no matter how many nodes need to add events, you can modify the Attachevents () function in A.js instead of the HTML page.
In addition, JavaScript has access to HTML nodes in addition to the ID in other ways. However, the maximum number of IDs is used for event associations. Therefore, it is also a good practice for web designers to add ID attributes to nodes that are likely to associate events when writing HTML.
Conclusions
In theory, other forms of JavaScript mixing HTML should be avoided in addition to the Of course, the actual situation is much more complicated than the case in this article, but the above conclusion can also be used as a reference to make JavaScript and HTML separation more ideal.
Reference documents
[1] Parr, T.J, enforcing Strict model-view separation in Template engines. WWW ' 04:proceedings of the 13th International Conference Onworldwideweb, New York, NY, USA, ACM Press (2004) 224–233, HTT P://www.cs.usfca.edu/~parrt/papers/mvc.templates.pdf
[2] JavaScript design pattern, http://book.douban.com/subject/3329540/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
