Jquery真的不(bu)難~第(di)七回 JS也(ye)要面向對象(xiang)
前幾篇文章以JQ為主(zhu),本系列(lie)的(de)八篇文章中,第(di)一講(jiang)為JS基礎,從第(di)二講(jiang)開(kai)始到第(di)六(liu)講(jiang)主(zhu)要(yao)是(shi)JQ基礎知(zhi)識,而第(di)七講(jiang)與第(di)八講(jiang)是(shi)JS中的(de)一些高級(ji)應(ying)用,寫到這(zhe)(zhe)里(li),也(ye)快(kuai)要(yao)和《Jquery真(zhen)的(de)不難(nan)》說再見了,有點舍不得,恩(en),連續的(de)兩天(tian)失眠,呵呵,不知(zhi)道為什么,可能(neng)是(shi)興奮過度了吧,呵呵,總(zong)之(zhi)這(zhe)(zhe)幾天(tian)的(de)狀(zhuang)態超級(ji)好,我喜歡這(zhe)(zhe)種感覺,非常感謝!
JS也要面向對(dui)象這個(ge)題目(mu)很大(da),我是(shi)搞C#開發的,而(er)C#是(shi)個(ge)面向人(ren)性(xing)化(hua)的語言(yan),呵(he)(he)呵(he)(he),我更希望把(ba)面向對(dui)象改成(cheng)面向人(ren)性(xing)化(hua),呵(he)(he)呵(he)(he),因為只有(you)你把(ba)它擬人(ren)化(hua)之后,你才能更好的去學習吧,編(bian)程(cheng),上(shang)學時大(da)多人(ren)說它是(shi)個(ge)枯燥的東西(xi),編(bian)程(cheng)課卓(zhuo)見(jian)變成(cheng)了(le)(le)睡覺課,呵(he)(he)呵(he)(he),但似乎從那里起,我就已經(jing)被代(dai)碼吸(xi)引(yin)了(le)(le),不(bu)知道為什(shen)么,但到(dao)今天我終(zhong)于找(zhao)到(dao)原因了(le)(le),因為我把(ba)代(dai)碼擬人(ren)化(hua)了(le)(le),或者說我被代(dai)碼擬人(ren)化(hua)了(le)(le),呵(he)(he)呵(he)(he)!
一 函數實現(xian)的面(mian)向對象
window.onload = function () { //定義一(yi)下游戲功能的函(han)數對象 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級(ji)的元素了 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("真的不錯,擴展方法"); //不(bu)在本方法(fa)內實(shi)現,只是調用一下 } Game.prototype.Content = function (msg) {//在(zai)這(zhe)樣實現它的功能 console.log(msg); } var canvas = document.getElementById("canvas"); new Game(canvas); //如果想用Game里的擴展方(fang)法(fa)Content,需(xu)要new一下,因(yin)為Content屬于實例方(fang)法(fa) }
二 通過(guo)JS對(dui)象實(shi)現的面向對(dui)象
//一個人 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();
恩,在這(zhe)些代碼實現過程(cheng)中(zhong),有幾個基礎東西(xi)要撐握一下了:
聲明變量:var x=1;
聲(sheng)明數組:var xArr=[];
聲明(ming)對象:var xObject={};
聲明函(han)數:var xFunction=function(){};
函數實例(li):var xFunInstance=new xFunction();
函數擴(kuo)展(zhan)方(fang)法:XFunction().prototype.ExtensionForPrint(){}; //只有(you)函數的實(shi)例對象,才能訪問擴(kuo)展(zhan)方(fang)法
恩差不多了(le),就到這里吧!
感謝閱讀!