Learn about JS object-oriented achievements and share with you the latest work released on the National Day

First, introduce a small question about jQuery.
JQuery has a problem in setting transparency. First, let's take a look at its code:

Code
Copy codeThe Code is as follows:
// IE uses filters for opacity
If (! JQuery. support. opacity & name = "opacity "){
If (set ){
// IE has trouble with opacity if it does not have layout
// Force it by setting the zoom level
Elem. zoom = 1;
// Set the alpha filter to set the opacity
Elem. filter = (elem. filter | ""). replace (/alpha \ ([^)] * \)/, "") +
(ParseInt (value) + ''=" NaN "? "": "Alpha (opacity =" + value * 100 + ")");
}
Return elem. filter & elem. filter. indexOf ("opacity =")> = 0?
(ParseFloat (elem. filter. match (/opacity = ([^)] *)/) [1])/100) + '':
"";
}

Under normal circumstances, it is no problem to use filter to set transparency. However, what if our element already has a filter? Assume that the original format is as follows:
Filter: AlphaImageLoader (src = "...");
After executing the jQuery code, it will naturally become like this:
Filter: AlphaImageLoader (src = "..."); alpha (opacity = 80)
I noticed that we had a semicolon, right? In this way, alpha becomes a CSS rule, rather than a part of the filter.
The solution is also very simple. In jQuery source code, replace the semicolon with a space.
However, this also shows a problem. After all, jQuery does not have a very good architecture as the basic library, and its replacement and scalability are almost negligible. For such a small problem, in addition to modifying the source code, I couldn't think of any external modification scheme. If it is a prototype framework, just replace the setOpacity function. Therefore, if jQuery finds it is IE, we can call another function instead of continuing to inline the logic in the current function, so our modifications will be much more convenient.
The modified code is as follows:

Modified code
Copy codeThe Code is as follows:
// IE uses filters for opacity
If (! JQuery. support. opacity & name = "opacity "){
If (set ){
// IE has trouble with opacity if it does not have layout
// Force it by setting the zoom level
Elem. zoom = 1;
// Set the alpha filter to set the opacity
Elem. filter = (elem. filter | ""). replace (/alpha \ ([^)] * \)/, ""). replace (';', '') +
(ParseInt (value) + ''=" NaN "? "": "Alpha (opacity =" + value * 100 + ");");
}
Return elem. filter & elem. filter. indexOf ("opacity =")> = 0?
(ParseFloat (elem. filter. match (/opacity = ([^)] *)/) [1])/100) + '':
"";
}

Now, let's introduce the new work.
Recently, companies want to make WEB systems like desktops. This is indeed a crazy idea, but from my perspective, I think it is exciting and interesting, this is what I can do, but not what I can do easily. As a programmer who strives to move toward Excellence, he can grow slowly only by constantly encountering this challenge.
Therefore, after four days of design and development, we finally have a stable version. Because its functions have not yet reached the initial plan, therefore, it is called version 0.8 (this decision uses simple version management, that is, all versions that are not 0 after the decimal point are beta versions, and are called stable official versions until 1.0 and 2.0)
I want to see the effect of this framework from the above, because this included a demo.htm page in the uploaded compressed package. If you are interested, you can download it and try it yourself. Here, only the class diagram of the Framework is released for reference.

General idea
Putting WEB into a desktop form is a challenge from the very beginning. This challenge is far more fun for me than checking whether it is rational ......

Because of the complexity of the desktop, the idea of object-oriented must be used to construct the desktop. The most important aspect of the idea is the clear responsibilities. Under the guidance of such an idea, the framework shown in the figure is derived.

The first is the base class Control of all controls, which only provides lifecycle management, that is, render and dispose, and event management, that is, bind, unbind, and trigger.

In the Control inheritance system, ASP. NET model. The render and dispose methods do not provide rewriting (for example, the ProcessRequest method of the Page class won't allow you to rewrite it at will ), instead, events are opened for rewriting on the appropriate lifecycle node, which includes four basic events: rendering, rendered, disposing, and disposed, all the subsequent controls are implemented by rewriting the four methods.

The following TaskBar indicates the TaskBar, and TaskIcon indicates the icons on the TaskBar. There is nothing to say about this. TaskBar is only responsible for managing all TaskIcon from the container perspective, while TaskIcon is responsible for specific display.

It is worth mentioning that GroupTaskIcon, in fact its internal maintenance is a series of TitledTaskIcon, in a "Combination" approach, so that GroupTaskIcon does not need to re-develop HTML performance for each window

In the Window section, the original setting is that different Window classes have different loading methods, such:

RemoteWindow
ElementWindow loads content from specific HTML elements

However, in this way, we have to face a problem. The Window simultaneously carries the behavior, performance, and container functions. Therefore, n kinds of behavior and m types of performance will generate n * m sub-classes, this greatly improves the complexity of the control system, such:

TabRemoteWindow, TabElementWindow
GorupRemoteWindow, GroupElementWindow

Obviously, these four classes are too repetitive, which is not conducive to code reuse, but also to users' choice.

Under such consideration, I separated the "representation" part of the Window to form a Renderer. The Renderer is responsible for rendering the content in the Window, in this way, you can use a series of Renderer and a series of Window combinations for development. The use of combination rather than inheritance is also a major principle of object-oriented.

The specific implementation details and further structural design are not very good at the moment. Please allow me to elaborate on it through my blog next time.

Version plan
Currently, version 0.8 is released. In fact, some features of version 0.9 are included. I will implement the following in version 0.9:

1. Add the Timer class to execute the scheduled plan
2. Add the Behavior library to separate the Window
3. Create a constant library for obtaining complex strings.
4. Beautify TaskBar and GroupTaskIcon
5. Add ExUI. Overlay to provide the mask layer.

Version 0.9 will be completed in October 5, which is a gift for your first birthday after graduation.

Later versions 1.0 will be a stable version and provide the following improvements:

1. Add a DOM library to generate DOM elements
2. Desktop allows ViewPort to control the positions of all elements to adapt to window size changes.
3. DockWindow can be scaled to the four sides of the desktop. It appears automatically when the mouse is moved to an empty range (similar to QQ)

The release date of version 1.0 cannot be determined now, because I have seen the long-term overtime for the next six months ......

Download
CSS is the core CSS file of the framework.

The documentation of the framework is in the DOC folder, which is generated by the jsdoc toolkit.

Because it was originally a DEMO for the company, but the DEMO page cannot be taken out of the company's business data, the Images folder here is a bit messy, please forgive me

Http://xiazai.jb51.net/200910/yuanma/ExUI.rar

Please give me some comments if such a framework is worth further development or is it possible to go open-source? It has been working for nearly half a year, I also hope that I can have a work that is really amazing.