Home > Developer > JavaScript
Transferred from: Http://benchwang.spaces.live.com/blog/cns!1621B5CAD6EB680B!149.entry
Adam McCrea wrote a meta-programming article using javascript: metaprogamming JavaScript.
This article uses an example to illustrate meta-programming. The example is simple, a Form package in the two drop-down list country and state, the business requirement is the country drop-down list, select "a states" to display the list of countries, otherwise hide the drop-down list. The code that handles the logic is as follows:
Event.observe (window, "Load", function () {
Event.observe ($ ("Country"), "Change", function () {
if ($F ("country") = = "states")
$ ("State-field"). Show ();
Else
$ ("State-field"). Hide ();
});
});
The objects and methods used here are Prototype extensions to JavaScript. Prototype is a JavaScript Framework designed to simplify the development of dynamic WEB programs. See http://www.prototypejs.org/. In the above code: Event.observe is equivalent to attachevent in IE, which is used to register the event handler function. This is registered with the Window.onload and Country.onchange event handlers. $ () is an alias for document.getElementById (). $F () takes out the current value of the element in the form. Show () and hide () are methods that are added on HTML elements. Many methods are extended by prototype on the basis of HTML elements. If you want to run the above code, you need to download prototype.js and place it in the same directory as the HTML page. The complete code is as follows:
<title>metaprogramming Javascript-example 1</title>
<script src= "Prototype.js" ></script>
<script type= "Text/javascript" charset= "utf-8″>
Event.observe (window, "Load", function () {
Event.observe ($ ("Country"), "Change", function () {
if ($F ("country") = = "states")
$ ("State-field"). Show ();
Else
$ ("State-field"). Hide ();
});});
</script><body>
<form>
<p id= "Country-field" >
<label for= "Country" >Country</label>
<select id= "Country" >
<option>united states</option>
<option>Canada</option>
<option>somewhere else</option>
</select>
</p><p id= "State-field" >
<label for= "state" >State</label>
<select id= "State" >
<option>Ohio</option>
<option>Michigan</option>
<option>Kentucky</option>
</select>
</p>
</form>
</body>
There is nothing wrong with the code to meet such simple needs. However, as demand changes, the code becomes cumbersome. If the following requirements are added:
Add Province Field
When country is "Canada", Display province
When country is "states", display state
When state is "Ohio" or "Michigen", display Brutus (very cute logo)
Based on the above requirements, the code is modified to:
Event.observe (window, "Load", function () {
Event.observe ($ ("Country"), "Change", function () {
var country = $F ("Country");
if (country = = "states") {
$ ("Us-state-field"). Show ();
$ ("Province-field"). Hide ();
} else if (country = = "Canada") {
$ ("Province-field"). Show ();
$ ("Us-state-field"). Hide ();
} else {
$ ("Us-state-field"). Hide ();
$ ("Province-field"). Hide ();
}
});Event.observe ($ ("us-state"), "Change", function () {
var state = $F ("Us-state");
if (state = = "Ohio" | | state = = "Michigan")
$ ("Brutus"). Show ();
Else
$ ("Brutus"). Hide ();
});});
The new program uses the previous event handling and field check methods to try to extend the program to meet the new requirements. However there are a few questions, the first question this code has two bug:1) when the page is initially loaded all fields are displayed, 2) Hiding the State field does not, and does not automatically hide the Brutus. The latter can be called a domino bug because if there are other elements that depend on the dynamic display and the hidden fields can cause cascading effects.
The second problem is the readability of the code. It is not easy to immediately see what this code wants to achieve, so it needs to be carefully checked for omission or not being strictly in line with the requirements. When requirements change, it is desirable to know exactly where the code needs to be modified and, as a modification, to be confident that it will not affect other functions. Meta-programming concepts are used to solve this problem.
Pragmatic Programmer (pragmatic programmer?) The meta-programming is described as the details in the Jiang code are extracted and put into the meta data. Metadata is typically a configuration file or other data source, and of course metadata can be executable code, as long as the "what" and "how" (how to) clear separation. The idea of this approach is to write code using words that are easily descriptive of the problem domain. The problem domain is the "what" to be described. This type of language is called a domain-specific language (domain specific language) and is abbreviated as a DSL. In the example above, "what" is the rule that shows and hides the fields in the form. The current implementation is to couple the implementation of rules and rules. As demand changes and features increase, the code becomes less clear. If these rules can be drawn out, rule modifications no longer depend on implementation, reducing the frustration of responding to changes in demand. If you use a language that is closer to the problem domain than JavaScript to describe the rule, the problem is greatly simplified.
Writing a DSL starts with thinking about the vocabulary used in the business domain. These words are sometimes different because they describe different roles. For example, programmers, users, business analysts will be different. Before making these assumptions, consider a question: why do these different roles use different words? Different words lead to distorted information in communication. By finding a common vocabulary among groups of people, information transmission can be eliminated, and information distortion can be avoided. This common vocabulary can usually be found in the requirements specification:
Show Us-state when country was "states"
Show province when country is "Canada"
Show Brutus when state is "Ohio" or "Michian"
The DSL should be as consistent as possible with the above description.
It is possible to use the above description directly. The above description is not executable JavaScript code, but can be placed in a text file, read it using JavaScript to parse. This approach, while feasible, may be overly complex. If you use plain text as your DSL, it needs the same flexibility as English. But we want to use it as data and it needs to follow some strict rules. If the DSL itself is executable code, you can simplify the problem. The downside is that a non-program developer might not use this DSL. It is unrealistic to actually write a DSL to non-developers. If the program element is written well, the business person can understand or can modify, it is very good. How to deal with the requirements in the example and turn it into executable code? This may be the most difficult step, with a strong executive nature. In JavaScript, there are two suggestions: string the method together to form a sentence-like structure, and use the method name flexibly. Along this line of thinking, the above business rules can be described as follows:
Show ("Us-state-field"). When ("Country"). Is ("states");
/>show ("Province-field"). When ("Country"). Is ("Canada");
Show ("Brutus"). When ("Us-state"). Is ("Ohio,michigan");
The method names "when" and "is" themselves are not complete, but in the DSL context, these methods are strung together to be very good. You can see that show () returns an object that has a method when (), and when () returns an object that has the method is (). Here is a simple implementation that describes the first rule:
Function Show (Fieldtodisplay) {
return {
When:function (field) {
return {
Is:function (value) {
if ($F (field) = = value) {
$ (Fieldtodisplay). Show ();
}
else{
$ (Fieldtodisplay). Hide ();
}
}
}
}
};
};
The complete code is as follows:
<title>metaprogramming Javascript-example 1</title>
<script src= "Prototype.js" ></script>
<script type= "Text/javascript" charset= "utf-8″>
Function Show (Fieldtodisplay) {
return {
When:function (field) {
return {
Is:function (value) {
if ($F (field) = = value) {
$ (Fieldtodisplay). Show ();
}
else{
$ (Fieldtodisplay). Hide ();
}
}
}
}
};
};Event.observe (window, "Load", function () {
Event.observe ($ ("Country"), "Change", function () {
Show ("Us-state-field"). When ("Country"). Is ("states");
});});
</script>
<body>
<form>
<p id= "Country-field" >
<label for= "Country" >Country</label>
<select id= "Country" >
<option>united states</option>
<option>Canada</option>
<option>somewhere else</option>
</select>
</p><p id= "Us-state-field" >
<label for= "state" >State</label>
<select id= "Us-state" >
<option>Ohio</option>
<option>Michigan</option>
<option>Kentucky</option>
</select>
</p>
</form>
</body>
The above is just a simple schematic, in the subsequent article will give a complete implementation.
JavaScript meta-programming printing Previous ArticleMaxthon2 Official edition released Next ArticleScopes in JavaScript you may be interested in the articlehttp://www.javazh.cn/
Yes, good.
This is good. Study.
ReplyMeta-programming using JAVASCRIPT (Web site cannot be played)
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
