Ajax|web| Program | advanced Download the source code for this article
first, the introduction
In the first part, we discussed the Ajax basics-the ability to build communication from script to server, which is why HTML pages have dynamic capabilities. However, does this mean that we are ready to discard our own version of Yahoo Mail? No, not yet. The reason: Ajax is a mixed blessing. On the one hand, it enables us to create rich desktop-level applications on the Web, and, on the other hand, if we compare "page-flipping" Web applications to client/server or swing version programs, we see that their development practices are not quite the same. We will need to get used to the fact that building a rich UI takes time. Notice that allowing the user to achieve greater flexibility also takes more time to pay.
The final answer depends, of course, on a large number of component libraries, frameworks, and industrial-power development tools. And regardless of the tools, this article focuses on discussing what technologies are available today for AJAX enthusiasts. While emphasizing the need to build reusable business components, this article focuses on the object-oriented power of "implied" JavaScript. In addition, while emphasizing the need to build custom UI components, this article introduces an easy way to encapsulate descriptive logic with custom client HTML tags.
Two, Ajax language-object-oriented JavaScript
By definition, JavaScript is a typical Ajax language. Unlike Java,javascript, which does not emphasize OO-style coding. However, it is surprising that JavaScript fully supports the main attributes of all OO languages: encapsulation, inheritance, and polymorphism. Douglas Crockford even called JavaScript "the most misunderstood programming language in the world." Let's look at the object-oriented aspects of JavaScript.
Data type
In Java, a class defines a combination of data and its associated behavior. Although JavaScript retains the class keyword, it does not support the same semantics as the regular OOP language.
This may sound strange, but in JavaScript, objects are defined by functions. In fact, by defining a function in the following example, you define a simple null class calculator:
| function Calculator () {} |
The creation of a new instance is the same as in Java-using the new operator:
| var mycalculator = new Calculator (); |
The above function not only defines a class, but also serves as a constructor. Here, operator new implements this trick-instantiating a class-calculator object and returning an object reference instead of just calling the function.
It is true to create such an empty class, but in practice it is of little use. Next, we're going to use a java-script prototype structure to populate the class definition. JavaScript uses prototypes as templates for creating objects. All prototype properties and methods are copied to each object of a class by reference, so they all have the same value. You can change the value of a stereotype attribute in an object, and the new value overrides the default value copied from the prototype, but only for one instance. The following statement adds a new property to the prototype of the Calculator object:
| Calculator.prototype._prop = 0; |
Since JavaScript does not provide a way to represent a class definition on a clause, we will use the WITH statement to mark the definition boundary of the class. This will also make the sample code shorter, because the WITH statement is allowed to execute a series of statements on a specified object without having to restrict attributes.
function Calculator () {};
With (Calculator) {
Prototype._prop = 0;
Prototype.setprop = function (p) {_prop = P};
Prototype.getprop = function () {return _prop};
} |
So far, we have defined and initialized the public variable _prop, and provided it with getter and setter methods.
Need to define a static variable? You can think of a static variable as a variable owned by a class. Because classes in JavaScript are described by Function objects, we simply add a new attribute to the function:
Now that the icount variable is a property of a calculator object, it will be shared by all instances of the class calculator.
| function Calculator () {calculator.icount++;}; |
The code above calculates the number of all instances of the class calculator.
Packaging
By using the "Calculator" as defined above, we can access all the "class" data, but this increases the risk of naming conflicts in derived classes. We obviously need to encapsulate the object as a self-contained entity.
A standard language mechanism for data encapsulation is to use private variables. And a commonly used JavaScript technique to emulate a private variable is to define a local variable in the constructor, so that local variables can be accessed only by getter and setter-they are internal functions within the constructor. In the following instance, the _prop variable is defined in the calculator function and is not visible outside the scope of the function. There are two anonymous internal functions (assigned to SetProp and Getprop respectively) that let us access "private" variables. Also, note that the use of this here-is very similar to the usage in Java:
function Calculator () {
var _prop = 0;
This.setprop = function (p) {_prop = P};
This.getprop = function () {return _prop};
}; |
Often overlooked is the cost of such encapsulation in JavaScript. Notice that this price may be enormous, because the intrinsic function object is repeatedly created for each instance of the "class".
So, since building objects based on prototypes is faster and consumes less memory, we specifically support the use of public variables in places that emphasize performance. Note that you can use naming conventions to avoid name collisions-for example, by adding the class name to the front of a public variable.
[1] [2] [3] [4] Next page
