Structure, performance, behavior separation (search)

The three-layer separation principle is simple, but it is not easy to use as an example. Today, when optimizing the "search" feature, it occurred to me that this was a typical demonstration. From the beginning, I would typically choose the following code as the search box prototype, which was used for HTML prototypes:

<input size=15 type= "text" &http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp;name=" style= "COLOR: #bbb;" value= "log number, name" onfocus= "if (this.value== ' log number, name ') {this.value="; this.style.color= ' #333333;} " Onblur= "if (this.value==") {this.value= ' log number, name '; this.style.color= ' #bbbbbb ';} '/>

Use text to describe the interaction: the default tint #bbbbbb text prompts input fields, the user clicks the input color will deepen slot normal, but when the backspace deleted the contents of the recorded content input value is empty, will restore the tint default prompt. The following figure:

The product is used in the process, often by defining the outer search module. Search to pass control of this input box and button display effect, as I also defined a. text input box for unified control form if so from the three-layer separation point of view, at present only to achieve the structure, performance separation, and the structure, Behavior is tied together, does not conform to the Web standard design idea. The idea is to split the behavior, because this site uses the jquery class library, so consider using jquery statements to implement. Bind with the value Search_key of name, the code is as follows:

<script type= "Text/javascript"/>
JQuery (function ($) {
$ ('. Search Input[name=search_key] '). focus (function () {
if ($.trim (this.value) = = ' Chi number, name ') {
This.value= ";
$ (this). addclass (' Focus ');
}
}). blur (function () {
if ($.trim (this.value) = = ") {
This.value= ' chi number, name ';
$ (this). Removeclass (' Focus ');
}
});
});
</script/>

The rest of the HTML structure is as follows, no style and no script is clean:

<input size= "15″type=" text "name=" Search_key "value=" log number, name "/>"

Finally binding performance, landscaping is our goal, but do not forget that there is a basic requirement for compatibility is better. Add the problem, consider in the activation of the input box prompts, as Safari browser input form shadow effect, but IE does not support. Effects and interactions as shown:

This is not finished, there is room for optimization. For example, if the browser does not support script, trigger input box can not automatically empty, although not functional failure, but also to create confusion for users. Also, if further simplification is considered, you can consolidate or hide the button carriage return submission, and I consider that the "stamp album" user base is not so high-end. The basic optimization principle is that all functions are represented in the same leveling line, modular iterative forward.

Source: Source Address: http://blog.jiyouce.com/?p=156