Jquery真的不难~第七回 JS也要面向对象

回到目录　　

　　前几篇文章以JQ为主，本系列的八篇文章中，第一讲为ＪＳ基础，从第二讲开始到第六讲主要是ＪＱ基础知识，而第七讲与第八讲是ＪＳ中的一些高级应用，写到这里，也快要和《Jquery真的不难》说再见了，有点舍不得，恩，连续的两天失眠，呵呵，不知道为什么，可能是兴奋过度了吧，呵呵，总之这几天的状态超级好，我喜欢这种感觉，非常感谢！

ＪＳ也要面向对象这个题目很大，我是搞Ｃ#开发的，而Ｃ#是个面向人性化的语言，呵呵，我更希望把面向对象改成面向人性化，呵呵，因为只有你把它拟人化之后，你才能更好的去学习吧，编程，上学时大多人说它是个枯燥的东西，编程课卓见变成了睡觉课，呵呵，但似乎从那里起，我就已经被代码吸引了，不知道为什么，但到今天我终于找到原因了，因为我把代码拟人化了，或者说我被代码拟人化了，呵呵！

一　函数实现的面向对象

  　　　　　window.onload = function () {

            //定义一下游戏功能的函数对象
            var Game = function (canvas, options) {
                var _options = options || { width: 300, height: 300, background: "#ff0000", border: "solid 1px black" };
                var _pos = { x: _options.width / 2, y: _options.height / 2 };
                var _this = this; //这样在canvas对象的事件内部可以向到root级的元素了
                canvas.onmousemove = function (ev) {
                    _pos = {
                        x: ev.clientX - canvas.offsetLeft,
                        y: ev.clientY - canvas.offsetTop
                    };
                    _options = { width: 100, height: 100, background: "#ffff00" };
                    init();
                }

                var init = function () {
                    canvas.style.position = "absolute";
                    canvas.style.border = _options.border;
                    canvas.style.background = _options.background;
                    canvas.style.width = _options.width + "px";
                    canvas.style.height = _options.height + "Px";
                    canvas.style.left = _pos.x + "px";
                    canvas.style.top = _pos.y + "px";
                }
                init();
                this.Content("真的不错，扩展方法"); //不在本方法内实现，只是调用一下

            }
            Game.prototype.Content = function (msg) {//在这样实现它的功能
                console.log(msg);
            }
            var canvas = document.getElementById("canvas");
            new Game(canvas); //如果想用Game里的扩展方法Content，需要new一下，因为Content属于实例方法
}

二　通过ＪＳ对象实现的面向对象

 　　　　　　　//一个人
            var People = {
                Name: "lose.zhang",
                Age: 30,
                Enjon: ["C#", "JS", "SQL", "NoSQL", "SOA", "AOP", "IOC", "DynamicProxy", "OOD&DDP"],
                Print: function (msg) {
                    console.log(msg);
                },
                Work: {
                    Name: "Software Architect",
                    Salary: "保密",
                    Print: function () {
                        console.log("这个人：" + People.Name
                        + ",他的年龄：" + People.Age
                        + ",他的特长是：" + People.Enjon
                        + ",它的职位是：" + this.Name
                        + ",它的薪水是：" + this.Salary);
                    }
                }
            };
            People.Work.Print();

恩，在这些代码实现过程中，有几个基础东西要撑握一下了：

声明变量：var x=1;

声明数组：var xArr=[];

声明对象：var xObject={};

声明函数：var xFunction=function(){};

函数实例：var xFunInstance=new xFunction();

函数扩展方法：XFunction().prototype.ExtensionForPrint(){};  //只有函数的实例对象，才能访问扩展方法

恩差不多了，就到这里吧！

感谢阅读！

回到目录