Create multiple windows in JS

 

 

I am a beginner in JS object-oriented, so it is unclear that the Code characters I have written do not conform to the standard object-oriented writing method. Please submit your approval! Click here to view the Demo. This exercise is an object-oriented revision of YQ's JavaScript imitation desktop window after learning JavaScript object-oriented.

 

 

In this simulated window exercise, the added functions mainly include creating multiple windows (the number is determined by the browser width) and imitating the desktop Panel. In addition to some details, it is similar to the windows on the desktop, and has also made some beautification. All functions can be implemented in IE6, and the visual effect of knowledge is not very good.

 

If there is too much code, you will not post it (the most frequently written one since the self-study of js). It mainly shows the constructor and prototype functions:

 

01

// Constructor

02

Function Window (windowID, width, height ){}

03

 

04

/* ------------ Prototype Method: Initialize ---------------------------*/

05

Window. prototype. initialize = function (){}

06

 

07

/* ------------ Prototype Method: Create HTML content and obtain the object of each part of the window ---------------*/

08

Window. prototype. createWindow = function (){}

09

 

10

/* ------------ Prototype Method: display the new window -------------------*/

11

Window. prototype. showWindow = function (){}

12

 

13

/* ------------ Prototype Method: form drag-and-drop function ----------------------*/

14

Window. prototype. drag = function (objItself ){}

15

 

16

/* ------------ Prototype Method: change the form size in eight directions ----------------*/

17

Window. prototype. changeSize = function (objItself ){}

18

 

19

/* ------------ Prototype Method: change the style of the button and window list -------------*/

20

Window. prototype. changeStyle = function (objItself ){}

From the code above, we can separate and classify the attributes and methods of an object through object-oriented writing. YQ can feel easier when writing this code than when writing the object-oriented code, the modification is much easier. It seems that the code is clear and clear, although the Code in the method is still rough (I personally feel that it has improved a lot, but I am not satisfied with myself .) The following are the notes for this exercise:

 

1. Use event bubbling. This exercise summarizes some bugs in the last simulated window. For example, clicking a button to drag the window may also lead to window dragging. This is because event bubbling and YQ understands the principle, but I do not know the solution, so I had to ask google, and then I ran into this Code:

 

01

// Prevent event bubbles

02

Function stopBubble (event ){

03

Var event = event | window. event;

04

// Determine the browser type and use cancelBubble in ie-based browsers

05

If (window. event ){

06

Event. cancelBubble = true;

07

} Else {

08

// Supports stopPropagation in firefox-based browsers

09

Event. preventDefault ();

10

Event. stopPropagation ();

11

}

12

}

2. Optimized getElementsByTagName () and getElementById () YQ. JQuery is never used, but $ () is an element object used to extract id or tagName.

01

/*

02

** $ (IdOrTagName, "body"), which is the tagName tag in the body.

03

** $ (IdOrTagName, parentID), take the tagName tag in parentID

04

** $ (IdOrTagName), take the node whose id is idOrTagName

05

*/

06

Function $ (idOrTagName, parentID ){

07

If (parentID = "body ")

08

Return document. getElementsByTagName (idOrTagName );

09

Else if (parentID)

10

Return document. getElementById (parentID). getElementsByTagName (idOrTagName );

11

Else

12

Return document. getElementById (idOrTagName );

13

}

14

Function create (tagName ){

15

Return document. createElement (tagName );

16

}

3. myGetElementsByClassName () YQ is optimized. When using the myGetElementsByClassName () method previously written, it is found that there are still some imperfections. For example, there are no strict matching or loose matching modes. Therefore, improvements were made. In addition, parentID = "body" can be achieved without writing, but in practice, YQ finds that sometimes the number of parameters is messy, so the number of parameters is unified.

01

/*

02

** Bool, true: exact match, false: loose match

03

** ClassName, class Name

04

** TagName, label name

05

** ParentID: The search range, that is, the parent node. (If you search the entire page, enter "body ")

06

*/

07

Function myGetElementsByClassName (bool, className, tagName, parentID ){

08

Var tagArray = $ (tagName, parentID );

09

Var resultArray = new Array ();

10

For (var I = 0; I <tagArray. length; I ++ ){

11

If (bool ){

12

If (tagArray [I]. className = className ){

13

ResultArray. push (tagArray [I]);

14

}

15

} Else {

16

If (tagArray [I]. className. indexOf (className )! =-1 ){

17

ResultArray. push (tagArray [I]);

18

}

19

}

20

}

21

Return resultArray;

22

}

4. What benefits YQ from writing well at the moment is the object-oriented method, but at the moment, what benefits YQ will be lost, at present, even if you put a keyboard on your hand, you can work out an object-oriented JavaScript code (the standard is not clear ......), However, it is clear that there is no theoretical knowledge as the basis, and there is no space in the belly. Naturally, it is speechless ...... # (Partition _ partition)

 

Through this exercise, YQ found that YQ was unfamiliar with CSS. Although YQ felt that it was the best choice for CSS, YQ compared with the online staff and front-end staff, YQ will learn CSS in the Next Step (do you have the right to do this )......), Enhance CSS2 and enter CSS3. 2. Recently, I 've been turning around JavaScript, but I just did not have a thorough understanding of the various basics of JavaScript, so YQ temporarily slowed down JS practice, return to the rhino book and lay a solid foundation. The nine-tier Tower begins with the ground. 3. Programmers need to take care of their bodies, stay up late recently, get angry and weak ...... (T done T )...... Really shouldn't. Learning and exercise should be both correct! Only good constitution can have high-quality code!

From: YQ Jun's blog