包含js文字內容部分選中的代碼封裝的詞條

本文目錄一覽：

• 1、新手請教，如何將一段JS代碼封裝成一個方法
• 2、js代碼如何封裝成JS文件
• 3、js代碼如何封裝

新手請教，如何將一段JS代碼封裝成一個方法

鑒於樓主欠缺編程經驗，我就先不說封裝成jQuery插件等高大上的做法了。單就論封裝成方法而言。

方法，也就是函數。是面向過程式語言一種代碼復用的初級手段，簡而言之，就是把重複的部分用函數封裝起來。

例如貓叫多遍，cat.meow(), 你總不可能寫對應次數的代碼，一般會寫成：

function meow(num){

    for(var i=0;inum;i++){

        cat.meow()

    }

}

meow(1000)

這就是一種最基礎的代碼復用。

當然，面向對象的語言也許有更簡單的 cat.meow(1000)

那麼，針對樓主的情況。逐步講一下各層次的方法。最簡單的用函數封裝一下就是：

function effect(srcDom,destDom,className){

    $(srcDom).mouseenter(function(){

        $(destDom).addClass(className)

    }).mouseout(function(){

        $(destDom).removeClass(className)

    })

}

然後調用

effect(‘#plate-1′,’#plate-1hover’,’plate-1after’)

effect(‘#plate-2′,’#plate-2hover’,’plate-2after’)

effect(‘#plate-3′,’#plate-3hover’,’plate-3after’)

鑒於樓主的DOM的ID和Class命名比較有規律，可以寫成這樣

function effect(name){

    $(‘#’+name).mouseenter(function(){

        $(‘#’+name+’hover’).addClass(name+’after’)

    }).mouseout(function(){

        $(‘#’+name+’hover’).removeClass(name+’after’)

    })

}

然後調用

effect(‘plate-1’)

effect(‘plate-2’)

effect(‘plate-3’)

但是這樣還是不夠通用，樓主應該看看事件方面有關事件委託的知識

js代碼如何封裝成JS文件

把你的JS代碼複製到一個top.js文件里，注意代碼不包含script和/script標籤

然後在你需要調用的地方直接引用就行了，比如

td

script src=””/script

/td

js代碼如何封裝

1. 定義js類 

js並不是一種面向對向的語言, 沒有提供對類的支持, 因此我們不能像在傳統的語言里那樣 用class來定義類, 但我們可以利用js的閉包封裝機制來實現js類, 我們來封裝一個簡的Shape類. 

代碼如下:

function ShapeBase() { 

    this.show = function(){ 

        alert(“ShapeBase show”); 

    }; 

    this.init = function(){ 

        alert(“ShapeBase init”); 

    }; 

}

這個類里定義了兩個方法:show和init, 需要注意的是這裡用到了this來聲明, 而不是var, 因為用var是用來定義私有方法的. 

另外, 我們還可以用prototype屬性來定義Shape的方法. 

代碼如下:

ShapeBase.prototype.show=function() 

{ 

    alert(“ShapeBase show”); 

} 

ShapeBase.prototype.init=function() 

{ 

    alert(“ShapeBase init”); 

}

上面這種寫法看起來不太直觀，我們可以將所有的方法寫在一起. 

代碼如下:

ShapeBase.prototype={ 

    show:function(){ 

        alert(“ShapeBase show”); 

    }, 

    init:function() { 

        alert(“ShapeBase init”); 

    } 

};

現在, 類是寫好了， 讓我們寫個js來測試下, 看看結果是不是跟我們想像的一樣呢? 

代碼如下:

function test(src){ 

    var s=new ShapeBase(); 

    s.init(); 

    s.show(); 

}

看到了吧, 其調用方式和C#一模一樣, 而結果也如我們所料. 

到目前為止, 我們學會了如何創建js的類了, 但還只是實例方法，要是實現跟C#中的靜態方法要怎麼做呢？ 

其實, 實現js的靜態方法很簡單, 看下面如何實現: 

代碼如下:

//靜態方法 

ShapeBase.StaticDraw = function() 

{ 

    alert(“method draw is static”); 

}

2. 實現JS類抽象和繼承 

同樣, js中也不支持類繼承機制，但我們可以通過將父類prototype中的成員方法複製到子類的prototype中來實現. 

和類的繼承一樣,JavaScript也沒有任何機制用於支持抽象類.但利用JavaScript語言本身的性質.可以實現自己的抽象類. 

首先來看看js中的虛方法, 在傳統語言中虛方法是要先定義的, 而包含虛方法的類就是抽象類,不能被實例化,而在JavaScript中，虛方法就可以看作該類中沒有定義的方法，但已經通過this指針使用了. 

和傳統面向對象不同的是，這裡虛方法不需經過聲明，而直接使用了, 並且類也可以被實例化. 

先定義object的extend方法, 一個為靜態方法，一個為實例方法, 這兩個方法用於實現繼承的prototype複製 

代碼如下:

Object.extend = function(destination, source) { 

    for (property in source) { 

    destination[property] = source[property]; 

    } 

    return destination; 

} 

Object.prototype.extend = function(object) { 

    return Object.extend.apply(this, [this, object]); 

}

接下來我們實現一個繼承類Rect, 這裡先用一種簡單的方法來實現。 

代碼如下:

function Rect() { } 

Rect.prototype = ShapeBase.prototype; //只這一句就行了 

//擴充新的方法 

Rect.prototype.add=function() { 

    alert(“Rect add”); 

}

這種方法不能用於重寫,如果改變了show方法, ShapeBase的show也會指向同一函數可能是由於prototype賦值只是簡單的改變指向地址. 

如果上面也定義了: 

Rect.prototype.show=function() { 

    alert(“Rect show”); 

}

那麼執行結果如下: 

function test(){ 

    var s=new ShapeBase(); 

    s.show(); //結果:Rect show 

    var r=new Rect(); 

    r.show(); //結果:Rect show 

    r.add(); 

}

我們再使用object.extend實現繼承, 並實現一個oninit虛方法, 修改ShapeBase如下: 

代碼如下:

ShapeBase.prototype={ 

    show:function() 

    { 

        alert(“ShapeBase show”); 

    }, 

    initialize:function () { 

        this.oninit(); 

    } 

};

實現Rect類繼承. 

代碼如下:

Rect.prototype=(new ShapeBase).extend({ 

  //添加新的方法 

  add:function() { 

    alert(“Rect add”); 

    }, 

    //使用這種方法可以重寫show方法 

    show:function() { 

        alert(“Rect show”); 

    }, 

    //實現虛方法 

    oninit:function() { 

    alert(“Rect oninit”); 

    } 

})