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

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君的博客