Home > Developer > JavaScript
Have always wanted to put in the actual development of some of the experience systematically sorted out, shared out to some interested in in-depth B/s development of friends, take advantage of the national day to sneak in, the first experimental write about JavaScript development in the more useful things.
Design pattern has always been in the object-oriented language, or more formalized development of a design thought. A lot of front-end developers have been thinking that using OO to write JS is more like a program developer, but once the script language into the deep, is only a beginning, design pattern is only the first step in the in-depth understanding of the program.
Why to use the design pattern I do not say more, the question of the beholder, now there is an inverse design mode, if you are interested can search the relevant information.
The observer pattern is used in programming in a very high frequency, with the simple Factory mode, the adapter pattern is basically equivalent, so now directly into the topic.
First we write a basic HTML page, contains some basic JS code, the purpose is very simple, when you enter some characters to the form, click the button, will change the corresponding content of several HTML objects:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "<a href=" http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "target=" _blank "rel=" external ">http://www.w3.org/tr/xhtml1/dtd/xhtml1-" Transitional.dtd</a> ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>observer Pattern-sample 01</title>
<script type= "Text/javascript" >
<! [cdata[
/**
* Get Element by ID
* @param {Object} ID
* @return Element
*/
function $ (ID) {
return document.getElementById (ID);
}
/**
* Window onload function
*/
Window.onload = function () {
var formobj = $ ("Form1");
formobj["Changes"].onclick = function () {
$ ("Box_a"). InnerHTML = $ ("Box_a"). ID + ":" +formobj["Fillbox"].value;
$ ("Box_b"). InnerHTML = $ ("Box_a"). ID + ":" +formobj ["Fillbox"].value;
$ ("Box_c"). InnerHTML = $ ("Box_a"). ID + ":" +formobj["Fillbox"].value;
}
}
]]>
</script>
<body>
<form id= "Form1" >
<div>
<input type= "text" name= "Fillbox" size= "/>"
<input type= "button" value= "Change Content" name= "Changes"/>
</div>
</form>
<div id= "Box_a" >Box_A</div>
<div id= "Box_b" >Box_B</div>
<div id= "Box_c" >Box_C</div>
</body>
These are the simplest process-oriented approaches, and here are two points to be told:
1. We can no longer write directly in HTML and then an object's time method (for example: <a onclick= "func ());" ></a>), which is completely unnecessary, because we can bind these methods to the object dynamically by using the dynamic method.
2. In the development of C/s, every program always has a portal, is the program's initial trigger, and all programs from this place, in the readability of the code, this can facilitate the maintenance of the time to quickly find the program entrance, so the basic I will not directly in JS inside to implement methods, Instead, use the Window.onload event to start the program. Of course, the more advanced technique is to use the DOM load mode, so that you can avoid large pictures before loading, your JS can not do any of the defects, the specific way I will take time to explain the design of B/s development in detail.
Then we will start to modify these JS code, the latest modification must be the same method to abstract out, we found that each object innerHTML copy way is the same, then we abstract this method out:
Program code
/**
* 改变内容
* @param {Node} elem 节点对象
* @param {String} value 值
*/
function ChangeContent(elem, value){
elem.innerHTML = elem.id + ": "+ value;
}
This time the OnLoad method becomes:
Program code
/**
* Window onload function
*/
window.onload = function(){
var formObj = $("form1");
formObj["changes"].onclick = function(){
ChangeContent ($("Box_A"),formObj["fillbox"].value);
ChangeContent ($("Box_B"),formObj["fillbox"].value);
ChangeContent ($("Box_C"),formObj["fillbox"].value);
}
}
When the requirements tell us that the content of each object needs to be displayed differently, we need to rewrite the abstract method one at a time, when JS displays the following:
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
