如何封裝常用的JS方法
如何封裝常用的JS方法
1、JS封裝就是盡量把使用的方式簡單化,內(nèi)部邏輯和使用解耦。通俗的說就是使用的時候只需要知道參數(shù)和返回值,其他條件盡量不要使用人員進(jìn)行設(shè)置。
2、JS封裝的方法有函數(shù)方式、對象的方式、閉包的方式。
js代碼如何封裝
1. 定義js類?js并不是一種面向?qū)ο虻恼Z言, 沒有提供對類的支持, 因此我們不能像在傳統(tǒng)的語言里那樣 用class來定義類, 但我們可以利用js的閉包封裝機(jī)制來實現(xiàn)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\”);?}?};
現(xiàn)在, 類是寫好了, 讓我們寫個js來測試下, 看看結(jié)果是不是跟我們想象的一樣呢??
代碼如下:
function?test(src){?var?s=new?ShapeBase();?s.init();?s.show();?}
看到了吧, 其調(diào)用方式和C#一模一樣, 而結(jié)果也如我們所料.?到目前為止, 我們學(xué)會了如何創(chuàng)建js的類了, 但還只是實例方法,要是實現(xiàn)跟C#中的靜態(tài)方法要怎么做呢??其實, 實現(xiàn)js的靜態(tài)方法很簡單, 看下面如何實現(xiàn):?
代碼如下:
//靜態(tài)方法?ShapeBase.StaticDraw?=?function()?{?alert(\”method?draw?is?static\”);?}
2. 實現(xiàn)JS類抽象和繼承?同樣, js中也不支持類繼承機(jī)制,但我們可以通過將父類prototype中的成員方法**到子類的prototype中來實現(xiàn).?和類的繼承一樣,JavaScript也沒有任何機(jī)制用于支持抽象類.但利用JavaScript語言本身的性質(zhì).可以實現(xiàn)自己的抽象類.?首先來看看js中的虛方法, 在傳統(tǒng)語言中虛方法是要先定義的, 而包含虛方法的類就是抽象類,不能被實例化,而在JavaScript中,虛方法就可以看作該類中沒有定義的方法,但已經(jīng)通過this指針使用了.?和傳統(tǒng)面向?qū)ο蟛煌氖?,這里虛方法不需經(jīng)過聲明,而直接使用了, 并且類也可以被實例化.?先定義object的extend方法, 一個為靜態(tài)方法,一個為實例方法, 這兩個方法用于實現(xiàn)繼承的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]);?}
接下來我們實現(xiàn)一個繼承類Rect, 這里先用一種簡單的方法來實現(xiàn)。
JS方法寫好了 用JS寫的腳本 然后我想封裝JS如何封裝?
把你的js**到記事本中,然后將記事本的拓展名(.txt)改為js(javascript)的拓展名(.js)就行了,當(dāng)你在某個頁面(如:html、jsp、asp等)中要用到該js的方法,只需將你剛才封裝的js引入到頁面中就可以調(diào)用其中的百科方法了。
原生js怎么封裝插件
這玩意一句話兩句話說不清楚啊?;镜乃悸肪褪怯靡粋€function作為入口,把所有的屬性和方法都寫到這個function中,這樣內(nèi)部的變量和外部的變量就不會相互干擾了。
你可以去看一下jquery是怎么封裝的。
照著來就可以了。