DIV CSS 佈局教程網

jq面向對象寫法
編輯:JavaScript基礎知識     
讓JS寫的更接近OOP

 

下面這段代碼就是利用JS原型對象,來實現的類的繼承DEMO 

 

$ 為jquery對象

////公共方法
//  $.oop.newClass=function newClass(obj) {
//     function create() {
//         if (obj != null)
//             return obj();
//     }
//     var c = new create();
//     return c;
// }

//人
var person = $.oop.newClass(function () {

    //構造函數
    function person() {

    }

    //公有屬性
    person.prototype.age = 15;

    //公有函數
    person.prototype.eat = function () {
        alert("我會吃");
    };

    return person;
});

//程序員
var programMonkey = $.oop.newClass(function () {

    //構造函數
    function programMonkey() {

    } programMonkey.prototype = person.prototype;//繼承


    programMonkey.prototype.skill = "asp.net";

    programMonkey.prototype.work = function () {
        alert("我會加班");
    }

    return programMonkey;
});


var pm = new programMonkey();
//人的函數
pm.eat();
//程序猿的函數
pm.work();
//輸出屬性
alert("人家才" + pm.age + "歲,我是一個" + pm.skill + "猿");

 

因為JS一些特性實現一個多態也非簡單

 

//共用函數
//$.oop.newClass = function (obj) {
//    function Create() {
//        if (obj != null)
//            return obj();
//    }
//    var c = new Create();
//    return c;
//}

var iPerson = $.oop.newClass(function () {

    //構造函數
    function person() {

    }
    person.prototype.name;
    person.prototype.iq;
    person.prototype.eat;
    return person;
});

//程序員
var programMonkey = $.oop.newClass(function () {

    //構造函數
    function programMonkey() {

    } programMonkey.prototype = iPerson.prototype ;//繼承
    return programMonkey;
});

//設計濕
var designer = $.oop.newClass(function () {

    //構造函數
    function designer() {

    } designer.prototype = iPerson.prototype ;//繼承
    return designer;
});



var inputValue = "程序員";

var ip = new iPerson();

if (inputValue == "程序員") {

    ip = new programMonkey();
    ip.iq = 0;
    ip.eat = function (msg) {
        alert(msg + "吃香蕉")
    }
    
} else if (inputValue == "設計濕") {

    ip = new designer();
    ip.iq = 100;
    ip.eat = function (msg) {
        alert(msg + "吃香蕉")
    }
}
ip.name = inputValue;
 
ip.eat("我是"+ip.name+"  智力"+ip.iq+" ");
 


 
 

 

根據不同的input Value會執行相應的 eat函數

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved