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

回到目录  

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

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

一 函数实现的面向对象

       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属于实例方法
}

二 通过JS对象实现的面向对象

        //一个人
            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(){};  //只有函数的实例对象,才能访问扩展方法

恩差不多了,就到这里吧!

感谢阅读!

回到目录

posted @ 2013-01-17 17:29  张占岭  阅读(4800)  评论(2编辑  收藏  举报