js常用代碼工具封裝類整理,java常用工具類封裝

本文目錄一覽：

• 1、前端基本功：JS（十一）動畫封裝(CSS樣式獲取、JSON遍歷)
• 2、.JS有哪些框架
• 3、如何實現JS的封裝和JS封裝的好處
• 4、js代碼如何封裝
• 5、新手請教，如何將一段JS代碼封裝成一個方法
• 6、js有哪些內置的數據封裝類對象

前端基本功：JS（十一）動畫封裝(CSS樣式獲取、JSON遍歷)

盒子 原來的位置 0 + 10 盒子現在的offsetLeft 10

|-5| = 5

這三個函數都是 數學函數

Math

比如說 console.log(Math.ceil(1.01)) 結果 是 2

console.log(Math.ceil(1.9)) 結果 2

console.log(Math.ceil(-1.3)) 結果 是 -1

比如說 console.log(Math.floor(1.01)) 結果 是 1

console.log(Math.floor(1.9)) 結果 1

console.log(Math.floor(-1.3)) 結果 是 -2

console.log(Math.round(1.01)) 結果 是 1

console.log(Math.round(1.9)) 結果 是 2

勻速動畫的原理： 盒子本身的位置 + 步長

緩動動畫的原理: 盒子本身的位置 + 步長 (不斷變化的)

( 缺陷：只能水平方向！隨後的“封裝運動框架單個屬性會進一步改進” )

我們訪問得到css 屬性，比較常用的有兩種：

點語法可以得到 width 屬性 和 top屬性 ** 帶有單位的 。 100px

但是這個語法有非常大的 缺陷**， 不變的。

後面的width 和 top 沒有辦法傳遞參數的。

var w = width;

box.style.w

最大的優點 ： 可以給屬性傳遞參數

我們想要獲得css 的樣式， box.style.left 和 box.style.backgorundColor

但是它只能得到 行內的樣式。

但是我們工作最多用的是 內嵌式 或者 外鏈式 。

怎麼辦？

核心： 我們怎麼才能得到內嵌或者外鏈的樣式呢？

外部（使用link）和內嵌（使用style）樣式表中的樣式（ie和opera）

兩個選項是必須的， 沒有偽類 用 null 替代

我們這個元素裡面的屬性很多， left top width ===

我們想要某個屬性， 就應該 返回該屬性，所有繼續封裝 返回當前樣式的 函數。

千萬要記得 每個 的意思 ： 那是相當重要

flag在js中一般作為開關，進行判斷。

等動畫執行完畢再去執行的函數 回調函數

我們怎麼知道動畫就執行完畢了呢？

很簡單 當定時器停止了。 動畫就結束了

案例源碼：

in運算符也是一個二元運算符，但是對運算符左右兩個操作數的要求比較嚴格。in運算符要求第1個（左邊的）操作數必須是字符串類型或可以轉換為字符串類型的其他類型，而第2個（右邊的）操作數必須是數組或對象。只有第1個操作數的值是第2個操作數的屬性名，才會返回true，否則返回false

案例源碼：

鏈接：

密碼：7fv8

.JS有哪些框架

目前來看，JS框架以及一些開發包和庫類有如下幾個，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx

Dojo （JS library and UI component ）：

Dojo是目前最為強大的j s框架，它在自己的Wiki上給自己下了一個定義，dojo是一個用JavaScript編寫的開源的DHTML工具箱。dojo很想做一個“大一統”的 工具箱，不僅僅是瀏覽器層面的，野心還是很大的。Dojo包括ajax, browser, event, widget等跨瀏覽器API，包括了JS本身的語言擴展，以及各個方面的工具類庫，和比較完善的UI組件庫，也被廣泛 應用在很多項目中，他的UI組件的特點是通過給html標籤增加tag的方式進行擴展，而不是通過寫JS來生成，dojo的API模仿Java類庫的組織 方式。 用dojo寫Web OS可謂非常方便。dojo現在已經4.0了，dojo強大的地方在於界面和特效的封裝，可以讓開發者快速構建一些兼容標準的界面。

優點：庫相當完善，發展時間也比較長，功能強大，據說利用dojo的io.bind()可以實現comet，看見其功能強大非一般，得到IBM和SUN的支持

缺點：文件體積比較大，200多KB，初次下載相當慢，此外，dojo的類庫使用顯得不是那麼易用，j s語法增強方面不如prototype。

Prototype （JS OO library）：

是一個非常優雅的JS庫，定義了JS的面向對象擴展，DOM操作API，事件等等，以prototype為核心，形成了一個外圍的各種各樣 的JS擴展庫，是相當有前途的JS底層框架，值得推薦，感覺也是現實中應用最廣的庫類（RoR集成的AJAX JS庫），之上還有 Scriptaculous 實現一些JS組件功能和效果。

優點：基本底層，易學易用，甚至是其他一些js特效開發包的底層，體積算是最小的了。

缺點：如果說缺點，可能就是功能是他的弱項

Scriptaculous （JS UI component based on prototype）：

Scriptaculous是基於prototype.js框架的JS效果。包含了6個js文件，不同的文件對應不同的js效果，所以說，如果底層用 prototype的話，做js效果用Scriptaculous那是再合適不過的了，連大名鼎鼎的digg都在用他，可見不一般

優點：基於prototype是最大的優點，由於使用prototype的廣泛性，無疑對用戶書錦上添花，並且在《ajax in action》中就拿Scriptaculous來講述js效果

缺點：剛剛興起，需要時間的磨練

yui-ext (JS UI component)：

基於Yahoo UI的擴展包yui-ext是具有CS風格的Web用戶界面組件 能實現複雜的Layout布局，界面效果可以和backbase媲美，而且使用純javascript代碼開發。真正的可編輯的表格Edit Grid，支持XML和Json數據類型，直接可以遷入grid。許多組件實現了對數據源的支持，例如動態的布局，可編輯的表格控件，動態加載的Tree 控件、動態拖拽效果等等。1.0 beta版開始同Jquery合作，推出基於jQuery的Ext 1.0，提供了更多有趣的功能。

優點：結構化，類似於java的結構，清晰明了，底層用到了Jquery的一些函數，使整合使用有了選擇，最重要的一點是界面太讓讓人震撼了。

缺點：太過複雜，整個界面的構造過於複雜。

Jquery ：

jQuery是一款同prototype一樣優秀js開發庫類，特別是對css和XPath的支持，使我們寫js變得更加方便！如果你不是個js高手又想寫出優 秀的js效果，jQuery可以幫你達到目的！並且簡介的語法和高的效率一直是jQuery追求的目標，

優點：注重簡介和高效，js效果有yui-ext的選擇，因為yui-ext 重用了很多jQuery的函數

缺點：據說太嫩，歷史不悠久。

Mochikit ：

MochiKit自稱為一個輕量級的js框架。MochiKit 主要受到 Python 和 Python 標準庫提供的很多便利之處的啟發，另外還緩解了瀏覽器版本之間的不一致性。其中的 MochiKit.DOM 尤其方便，能夠以比原始 JavaScript 更友好的方式處理 DOM 對象。MochiKit.DOM 大部分都是針對 XHTML 文檔定製的，如果與 MochiKit 和 Ajax 結合在一起，使用 XHTML 包裝的微格式尤其方便。Mochikit可以直接對字符串或者數字格式化輸出，比較實用和方便。它還有自己的 js 代碼解釋器

優點：MochiKit.DOM這部分很實用，簡介也是很突出的

缺點：輕量級的缺點

mootools ：

MooTools是一個簡潔，模塊化，面向對象的JavaScript框架。它能夠幫助你更快，更簡單地編寫可擴展和兼容性強的JavaScript代碼。Mootools跟prototypejs相類似，語法幾乎一樣。但它提供的功能要比prototypejs多，而且更強大。比如增加了動畫特效、拖放操作等等。

優點：可以定製自己所需要的功能，可以說是prototypejs的增強版。

缺點：不大不小，具體應用具體分析

moo.fx ：

moo.fx是一個超級輕量級的javascript特效庫（7k）,能夠與prototype.js或mootools框架一起使用。它非常快、易於使用、跨瀏覽器、符合標準，提供控制和修改任何HTML元素的CSS屬性，包括顏色。它內置檢查器能夠防止用戶通過多次或瘋狂點擊來破壞效果。moo.fx整體採用模塊化設計，所以可以在它的基礎上開發你需要的任何特效。

優點：小塊頭有大能耐

缺點：這麼小了，已經不錯了

如何實現JS的封裝和JS封裝的好處

而且對於JS代碼，因為本身就是一出現是一大段，自然如果不封包起來通過調用的方式進行整理的話，直接放到網站源碼中，自然就會加大的源碼的體積，而且還會影響到代碼的美現。而且現在很多的殺毒軟件都把JS代碼誤報為病毒，況且JS代碼外露也很容易讓不良分子找到攻擊網站的參照物。JS封裝的好處：1、提高網站的打開速度。2、符合SEO搜索引擎思路。3、加大網站的曝光力度。所以，對於提高網站訪問速度，最好把JS代碼封包起來，而且還要通過ROBOT文件把之屏蔽掉，畢竟這些都是搜索引摯不能識別的，外放對於提高收錄只有壞外沒有好處，所以，為了收錄為了訪問速度能封裝的JS代碼就盡時封裝。

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”); 

    } 

})

新手請教，如何將一段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有哪些內置的數據封裝類對象

1.JavaScript核心語言定義:包括數據類型,變量,常量,運算符,語句等.

2.原生對象和內置對象

3.瀏覽器對象BOM

4.文檔對象類型DOM

5.事件處理模型