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(){};  //只有函數的實例對象，才能訪問擴展方法

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

感謝閱讀！

回到目錄