JS创建多个窗口的OOP版
初学JS的面向对象，所以也不清楚自己写的代码符不符合标准的面向对象写法,还请各位狠狠地批！ 点击可查看Demo 这个练习是YQ经过《初学JavaScript的面向对象》学习后,对《JavaScript模仿桌面窗口》进行的面向对象改版。
这次模仿窗口练习，增加的功能主要有新建多个窗口（数量由浏览器宽度决定）和模仿桌面的面板，基本上除了一些细节外，和桌面的窗口比较相似了，而且也做了点美化。在IE6下能够实现所有功能，知识视觉效果不怎样。
代码太多就不贴了（自学js以来写得最多的一次），主要是展示一下构造方法和原型函数：
01
//构造方法
02
function Window(windowID, width, height) {}
03
04
/*------------原型方法：初始化---------------------------*/
05
Window.prototype.initialize = function() {}
06
07
/*------------原型方法：创建HTML内容& 获得窗口各部件的对象---------------*/
08
Window.prototype.createWindow = function() {}
09
10
/*------------原型方法：显示新建好的窗口-------------------*/
11
Window.prototype.showWindow = function() {}
12
13
/*------------原型方法：窗体拖放函数----------------------*/
14
Window.prototype.drag = function(objItself) {}
15
16
/*------------原型方法：八个方向改变窗体大小----------------*/
17
Window.prototype.changeSize = function(objItself) {}
18
19
/*------------原型方法：改变按钮、窗口列表的样式-------------*/
20
Window.prototype.changeStyle = function(objItself) {}
从上述代码可见，通过面向对象写法，可以将一个对象的属性和方法分开、归类，YQ在写这段代码的时候能感觉到比写面向过程时轻松，修改也容易多了。代码缩起来看还是挺清晰明了的，虽然方法里面的代码依旧粗糙（个人感觉改进了不少了，但是还是对自己不够满意。） 以下是这次练习的笔记：
1、使用事件冒泡 这次练习总结了上次模仿窗口的一些BUG，例如点击按钮拖动也会导致窗口拖动，这是由于事件冒泡，对于YQ懂了原理，但确不清楚解决办法，只好请教google大神了，然后就偶遇了这段代码：
01
//阻止事件冒泡
02
function stopBubble(event) {
03
var event = event || window.event;
04
//判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubble
05
if (window.event) {
06
event.cancelBubble = true;
07
} else {
08
//在基于firefox内核的浏览器中支持做法stopPropagation
09
event.preventDefault();
10
event.stopPropagation();
11
}
12
}
2、优化了getElementsByTagName()和getElementById() YQ没用过JQuery，但是知道$()是用来提取id或tagName的元素对象，所以自己就山寨了一个。
01
/*
02
**$(idOrTagName, "body"), 取body 中的tagName 标签
03
**$(idOrTagName, parentID), 取parentID 中的tagName 标签
04
**$(idOrTagName), 取id 名为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在使用以前写的myGetElementsByClassName()方法时，发现有些地方还不够完善，比如没有提供严格匹配和松散匹配两种模式。所以进行了改进。另外，parentID = "body"这个其实可以不写也能达到效果，但是在实际应用中，YQ发现有时会将参数的个数弄乱，所以就统一了参数的个数。
01
/*
02
**bool，true：严格匹配，false：松散匹配
03
**className, class名
04
**tagName, 标签名字
05
**parentID, 搜索的范围，即父节点。（若在整个页面搜索，填"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、一时想不到写什么好YQ获益最深的是面向对象的写法，但是一时之间又想不到获益了什么，目前虽然手放上键盘就能敲出一段面向对象的JS（标不标准就不清楚了……），但是却道不出个所以然，明显是没有理论知识为底蕴，腹中空空，自然是哑口无言了……#(┬＿┬)
通过这次练习，YQ发现自己1、CSS掌握不熟悉，虽然YQ觉得自己最拿得出手的是CSS，但和网上的大牛、各个前端人员相比，简直是小巫见大巫，所以接下来一点时间，YQ将会对CSS进行进阶学习（有资格说进阶吗（ˊＡˋ）……)，加强CSS2，进军CSS3。2、最近一直在围着JavaScript转，但只是肤浅的敲代码做练习，对JavaScript的各种基础却没有掌握透彻，所以YQ暂时缓一下JS的实践练习，回归犀牛书，打好基础。九层之塔，起于累土。3、程序员要珍重身体，最近熬夜，上火体弱……（Ｔ Д Ｔ）……实在不该，学习和锻炼应该两不误！只有好体质才有高质量的代码！
摘自：YQ君的博客
补充：web前端 , JavaScript ,
