Inheritance and mixing: a brief introduction to the system construction method

Http://blog.csdn.net/aimingoo/article/details/6062997

 

I have been reading the source code of kissy these two days and have been very hostile to its mix () function since the very beginning. From any perspective, this is an extremely inefficient implementation. However, after learning more about this framework, I am interested in the new system building model in Kissy. This method of system building is also brought about by mix.

　

I. Object System

Let's take a look at the object system first. As mentioned in Javascript language essence and Programming Practice, object-oriented systems have three Object Inheritance Methods: prototype, class, and metadata. All three methods can be used to build a large object system. Prior to subsequent discussions, we have made some emphasis on the concept of nouns. The so-called "Object System" refers to a system composed of "a group of objects ", these objects exist or do not have some relationship, but are organized by some rules. The so-called "object-oriented system" refers to the above-mentioned "Object System" that extends the evolution of the basic system, the new system meets the requirements of the previous Object SystemOrganization rules.

 

The three elements of the Object System are inheritance, encapsulation, and polymorphism.Organization rules. Meng Yan started from C/C ++ and talked about the object system from another side. I quite agree with the point of view, this includes the "the basic concepts of object paradigm do not include inheritance, encapsulation, and polymorphism". This viewpoint has a definite background and thinking method, which deserves further discussion.

Http://blog.csdn.net/myan/archive/2010/10/09/5928531.aspx)

 

Here we will discuss "Object System", that is, how objects are organized. On this issue, one of the organizational rules is "inheritance ". In JavaScript, the basic inheritance model is prototype inheritance, which features "new object instance features, copied from a prototype object instance ". Qomo and other projects add a class inheritance model to JavaScript by means of Language extension, which features "Object build self-class, A class is a derivation of its parent class. Here, "Derivation" has a potential relationship with "feature replication", that is, the features of subclass are also copied from the parent class. It is precisely because "Derivation" is actually a form of feature replication. In fact, class inheritance in qomo is implemented through prototype inheritance, because prototype inheritance is essentially "feature replication ".

 

Whether prototype inheritance, class inheritance, or meta-class inheritance that is not further discussed here, the ultimate goal of inheritance is to build an "Object System" instead of "system ". This small wording difference is essential and profound, which is why I mentioned Meng Yan's previous article. Generally, the "Object System" that we understand starting with "inheritance" is actually static, so that the last step of object-oriented system development still needs to be driven by the framework. For example, Tapp. Run (), or similar to new app. Inheritance mainly refers to the organization of the object system, rather than the dynamic characteristics in its running process. As a result, we use more types of object systems or other object systems to make the dynamic characteristics of a system static. For example, we extract the interaction between objects and convert them into a control class. The purpose of doing these things is simply because we have agreed on the object system'sOrganization rulesTo develop an object system, the organization rules (or fit) must also be met. Organizational rules limit the way we build a system-inheritance, encapsulation, and polymorphism. To some extent, this is a solution of "Object System Construction", not a solution of "System Construction. What Meng Yan discussed above is also the question of "System Construction. Therefore, Meng Yan proposed two points:

• The program is composed of objects;
• Objects send messages to each other to complete tasks in collaboration.

The first is the basic feature of the object system, that is, the system member. The second is how the object system evolves into a system, that is, system communication. A system constraint includes both its members (and member organization rules) and communication between members.

 

　

2. Use mix () to build the system

　

Aside from the "inheritance" method, is there any other way to build a system?

 

Kissy provides another possibility, mix. At the core of the kissy system, three concepts are proposed for a system:

1. atoms (Meta). A system has at least one atom. atoms are an object with the mix () capability;

2. Host. A system has a dependent host, indicating the external environment of the system. The system is only part of the content in its host environment and can be distinguished by a specific name;

3. Seed: A system is born from a seed. The seed describes the features of the system in Meta and host.

 

Kissy agreed that a system was born from a seed, which grew into a complex system by constantly mixing. From seed cultivation to the entire system environment, you only need to be able to understand mix and host, that is, you can build any complicated system based on seed.

 

The above logic is quite simple in Kissy. JS:

 

 

[JavaScript]View plaincopy

1. (Function (host, S ){
3. VaR meta = {
4. Mix: function (R, S, ov, wl ){
5. ...
6. }
7. },
9. // If Kissy is already defined, the existing kissy object will not
10. // Be overwritten so that defined namespaces are preserved.
11. Seed = (host & host [s]) | | {},
13. // The host of runtime environment. Specify by user's seed or <This>,
14. // Compatibled for '<This> is null' in unknown engine.
15. Host = seed. _ host | (seed. _ host = Host || {});
17. // Shortcut and meta for seed.
18. S = host [s] = meta. Mix (seed, Meta, false );
20. Return S;
22. }) (This, 'kissy ');

 

 

During system initialization, the system name s in the host and host is passed in. For kissy, host is the current system environment. The value of this here can be the global of the JavaScript engine, the window in the browser environment, or the current this in a function or object closure. The 'kissy 'value represents the name of The Kissy System in the environment. According to the Javascript language conventions, we can use host [s] to find the existing kissy system.

 

According to the previous conventions, a mix system must have two properties: Host and mix, because its original seed must include these two properties. Therefore, since we use host [s] to access an existing kissy system, no matter to what extent the kissy system has evolved, these two properties are inevitable.

 

The above construction process tries to find these two properties in host [s]. If one of them does not exist, it tries to initialize it. Example code:

 

[JavaScript]View plaincopy

1. Seed = (host & host [s]) | | {},

 

 

If host [s] is saved, assume it is a seed. Otherwise, it is initialized as an empty object. Next:

 

 

[JavaScript]View plaincopy

1. Host = seed. _ host | (seed. _ host = Host || {})

 

If the preceding seed has the host attribute, use its existing _ host. If not, set it to the host in the current environment or an empty object.

 

 

Now we can see that seed must already have the host attribute. However, it is also "possible" to lack a nature, that is, the most important mix (). The role of mix () is actually very simple, it is a method to copy the attribute from object B to object. Here, the reason is "possible" missing because if seed is an existing mix system, it already has the mix () attribute; if it is a third-party system, there may be no mix, or there is a different mix. The following line of code tries to build it with the idea of the metalanguage, that is:

 

 

[JavaScript]View plaincopy

1. Meta. Mix (seed, Meta, false); // The value of false indicates that the data is not overwritten.

 

 

Meta. Mix () can be mixed into seed into mix (), or seed. Mix () can be mixed into other systems or meta itself. In short, in the construction of mix (), Meta only requires the mix method, no more or less.

 

The result of the previous line of code is: If seed does not have its own mix () attribute, the original mix () of the Meta is mixed into seed ().

 

Now, let's look at seed again. It must have the host and mix () attributes. It may be an empty object or a large existing system. However, it has these two properties and can be further derived from seed.

 

Before all this happens, the following code ensures that it is in host [s] and returns the system:

 

[JavaScript]View plaincopy

1. S = host [s] = meta. Mix (seed, Meta, false );
2. Return S;

 

　

Iii. Other concepts in mix () System Construction

　

In addition to implementing the basic mix system, kissy adds some other functions to the core part. There are two mixing methods except mix:

-Augment, expansion.Use the mix method to integrate the prototype of another subsystem S [I] into the prototype of the target subsystem R.

-Merge, merge.Use the mix method to mix other subsystems s [I] into the current subsystem S.

Basically, augment expands the Javascript Prototype System by Means of mix, or constructs the system by combining the prototype mechanism and blending mechanism in the application system. Merge is only a batch tool for the mix method.

 

In addition, considering the inheritance feature of the object-oriented system, kissy also implements the extend (derived) method to provide traditional Object-Oriented Programming capabilities.

 

In addition to the concept of language level, kissy also provides some build capabilities at the system framework level. Including:

-App.In parallel with host [s], apps ('xxx',...) can organize applications on host ['xxx.

-Namespace: namespace.That is, the host [XXX]. yyy. Zzz and other systems in different subsystems and namespaces can be organized.

 

Finally, kissy also provides simple debugging support in the kernel.

 

Obviously, based on the mix principle, any third-party system can be mixed into kissy to modify the above concepts, such as covering extend () to implement its own object system construction principles, or overwrite the app () to implement your application organization principles. Third-party systems can also integrate kissy into themselves, and use kissy and larger kissy UI systems to ensure their own features.

　

4. Tips

　

 

What is kissy?

 

Kissy is an open-source JavaScript project, and its main body is a front-end UI development framework, that is, kissyui. The Kissy mentioned in this article only refers to the language and framework design ideas in the kissy. js kernel. The Open Source site for the kissy project is: http://kissyteam.github.com/

 

How to Use kissy?

 

Although we proposed some new concepts and framework models in the process of migrating kissyui to kissy kernel, we did not actually change any usage practices of kissyui. From the code point of view, kissy. JS and Lang. other modules in JS have not changed. Therefore, if you only use kissy as a UI system, you can refer to the above open source website, the existing kissyui documentation is completely effective, and kissyui itself is an excellent and convenient web UI framework. However, the kissy system's ability to merge and organize models is greatly enhanced. For example, we can start to think of the following code:

 

 

[XHTML]View plaincopy

1. <! -- Load jquery first -->
2. <SCRIPT src = "jquery. js" mce_src = "jquery. js"> </SCRIPT>
5. <! -- Map the jquery system to kissy as the initial seed -->
6. <SCRIPT type = "text/JavaScript">
7. Window. Kissy = jquery;
8. </SCRIPT>
10. <! -- Load kissy and mix kissy with jquery -->
11. <SCRIPT src = "Kissy. js"> </SCRIPT>
13. <SCRIPT type = "text/JavaScript">
14. Document. writeln ('Are you using kissy or jquyer? Select y or y' for the answer ');
15. Document. writeln ('Can you load the kissy ui or jquery UI now? Select y or y' for the answer ');
17. Kissy. Merge (Yui, dojo, qomo). Merge (biby );
18. Document. writeln ("What's kissy? Select collapsar or black hole, pls