Ajax Tour (1): by prototype

Ajax|javascript

Or to decide on the title of Ajax, after all, many people will use this keyword search. Although I think this is just a hype concept, but have to admit that Ajax is more convenient to call. So I'm not going to elaborate on the meaning of Ajax.

The reason for writing this tutorial is simple: After a period of Ajax learning, some experience, and the more aware of the powerful Ajax technology, so decided to record, and by the way is the collation of their own ideas. for follow-up on this tutorial, please pay attention to http://www.x2design.net

In the past few years, JavaScript in the eyes of ordinary people, the function is still very narrow, what can be done is some simple form verification, or many flashy web effects. With the advent of flash, we are not as enthusiastic as before JS special effects. It seems that JS can do less things. But at this time, the concept of Ajax came out, with Gmail as a typical representative of AJAX applications by many people's attention, Ajax suddenly become a very popular technology, when JavaScript and XML, and the DOM model of the combination of what it can do is often incredible, Even some of the features can already be comparable to desktop programs.

Okay, no more nonsense, now start with a JavaScript development framework prototype_1.3.1 (hereinafter referred to as prototype). I originally wanted to introduce the advanced application of JavaScript, but afraid of the level is not enough, said the lack of organized, so on the combination of prototype, the way will mention the use of JS Grammar.
Here is the first two paragraphs of the framework:

var Prototype = {
Version: ' 1.3.1 ',
Emptyfunction:function () {}
}
var Class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}
First, let's look at the difference between the following two syntaxes:

var o={};
var f=function () {};

The latter one is easy to understand, it is equivalent to function f () {}, and defines a function f. But the previous one is not common: this is actually creating an object, in {} can specify the object's members, such as the above prototype, is an object, there are two members, the first is the version number, the second is a null method (function). Like this do not define a class, you can directly create the function of the object may only JS can do. The latter syntax actually has a function, is to define a class F. If you use this in the function body, then the variable after this is the member of the class.
Not only this can define class members, there is also a syntax:

Function C () {
Member1:value,
Member2:function () {}
}

This is equivalent to:

Function C () {
This.member1=value;
This.member2=function () {};
}

It should be noted that, in the previous approach, the last member can not be comma at the end, I think this syntax should be related to the array.

In JS, functions and classes are no different, can be new,new to the function of the statement is executed once, and then return an object. If there is this in the function, then the variable after this is the object member, and if not, the new function simply returns an empty object with no members. So when you use TypeOf to view a type called class, you still return the function. In JS there is basically no type of concept, all variables are declared with Var, even the function, is the case. function is actually just a variable.

Say the function is a variable, probably many people puzzled. But you try the following:

function Ftest () {
var a=1;
alert (a);
}
alert (ftest);

You will find that the function body of ftest is shown, so we can think that the so-called function is just a code string that the JS engine can parse. The function name variable stores only this string. To be more precise, the function name is a pointer variable that stores the location of the code string in memory. It's not difficult to understand that passing a function as a parameter can be returned as a value, which is a technique that will be used in the future. Because a class is also a function, you understand the class by understanding the function.

Although in JS functions and classes are not different, but the concept of class can be convenient for us to program design, so prototype very creative to create a global object class:

var Class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}

Class is a global object, its only method is create, the function returns a function, has already talked about the function as the return value mechanism, here no longer China Materialia. The returned function includes a statement:

This.initialize.apply (this, arguments);

As I said before, when new is a function, it executes the code in the function and finally returns the object. So when you use Class.create () to create a function, and then new this returned function, you first execute the statement. As you can see later, this is actually to invoke the constructor of the class.

That is, class becomes the entire prototype type creation model, and it's a good way to differentiate between classes and functions in code. Class.create () simply returns an empty class, and it defaults to a class that has a initialize method, so to use this class requires at least one constructor, which requires the use of inheritance to the class. Class is just a function, so how does a function inherit? It seems inconceivable that JavaScript can do this, prototype makes the implementation more elegant, as to how it is done, and listen to let's.