javascript的高階應用
http://www.zzbang.cn/html/dev/js/2007/11/09/51/[@more@]
1、關於javascript的apply和call函式
Test
這是 上舉的例子,個人感覺沒什麼意思,反而讓我對bind,bindAsEventListener有些反感。(javascript就是這樣,明明大家都知道的語法,但寫出來的程式碼差別確很大)
看下面程式碼:https://compdoc2cn.dev.java.net/
Test
我從來沒讀過prototype.js的擴充套件專案程式碼,也不知道bind..的最佳實踐,一起挖掘吧。但你絕對不要把bind/bindAsEventListener從繫結的詞義上來理解,可能會讓你更加迷惑。從apply/call理解本質。應用某一物件的一個方法,用另一個物件替換當前物件。
Test
prototype.js中用了大量的apply和call函式,不注意會造成理解偏差。
官方解釋:應用某一物件的一個方法,用另一個物件替換當前物件。
apply與call的區別是第二個引數不同。apply是 陣列或者arguments 物件。而call是逗號隔開的任何型別。
官方解釋:應用某一物件的一個方法,用另一個物件替換當前物件。
apply與call的區別是第二個引數不同。apply是 陣列或者arguments 物件。而call是逗號隔開的任何型別。
apply,call方法最讓人混淆的地方也是apply,call的特色。但最好不要濫用。
能改變呼叫函式的物件。如下例,函式中用到this關鍵字,這時候this代表的是apply,call函式的第一個引數。
能改變呼叫函式的物件。如下例,函式中用到this關鍵字,這時候this代表的是apply,call函式的第一個引數。
2、關於閉包
prototype.js在Class.create,bind等中用到javascript的閉包特色。但整體上prototype.js對於強大的閉包特性用的不多。大家可以參閱我翻譯的篇文章瞭解閉包。
3、讓我比較反感的兩個方法
(1)var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
很討厭用別的語言的風格來寫javascript。用這個方法構造自定義類 並沒有覺得有多方便,減少程式碼行數,只會讓人難理解,多定義一個initialize方法。
其實討厭這條有些牽強,不過修改Object的原型物件就有點過分了。
(2)Object.prototype.extend
先不過你取個extend的名字會讓熟悉java的人引起的歧義。修改Object的prototype就說不過去了。不知道作者是怎麼考慮的。當你for in迴圈物件是,麻煩就來了。可能有人會問你for in幹嗎。 我一個專案中既用了DWR,也用了prototype.js,dwr返回的javascript物件都多了個exetend屬性,還得特殊處理。
以前我比較過dojo和prototype.js中繼承的實現,現在我明白個道理。對於javascript這種沒有靜態型別檢查,語法寬鬆的語言來講,如果你選擇了某個js類庫,那你也必須適應作者寫javascript的風格。prototype.js的作者對extend的使用爐火純青,如果我們不當它只是個屬性複製的函式的話,多讀讀prototype.js的程式碼是好的。
4、關於函式的繫結
類庫提供了Function.prototype.bind Function.prototype.bindAsEventListener兩個方法。首先我們從概念上解釋一個這兩個方法。
任何一個函式都可以呼叫這兩個方法;引數的是javascript物件或網頁上元素物件;返回型別是個函式物件。
本來我就是個函式,返回還是函式,到這兩個函式有什麼不同呢。看實現程式碼,關鍵還是applycall函式的程式碼。其實這裡只是轉化了一下方法呼叫的物件。
prototype.js在Class.create,bind等中用到javascript的閉包特色。但整體上prototype.js對於強大的閉包特性用的不多。大家可以參閱我翻譯的篇文章瞭解閉包。
3、讓我比較反感的兩個方法
(1)var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
很討厭用別的語言的風格來寫javascript。用這個方法構造自定義類 並沒有覺得有多方便,減少程式碼行數,只會讓人難理解,多定義一個initialize方法。
其實討厭這條有些牽強,不過修改Object的原型物件就有點過分了。
(2)Object.prototype.extend
先不過你取個extend的名字會讓熟悉java的人引起的歧義。修改Object的prototype就說不過去了。不知道作者是怎麼考慮的。當你for in迴圈物件是,麻煩就來了。可能有人會問你for in幹嗎。 我一個專案中既用了DWR,也用了prototype.js,dwr返回的javascript物件都多了個exetend屬性,還得特殊處理。
以前我比較過dojo和prototype.js中繼承的實現,現在我明白個道理。對於javascript這種沒有靜態型別檢查,語法寬鬆的語言來講,如果你選擇了某個js類庫,那你也必須適應作者寫javascript的風格。prototype.js的作者對extend的使用爐火純青,如果我們不當它只是個屬性複製的函式的話,多讀讀prototype.js的程式碼是好的。
4、關於函式的繫結
類庫提供了Function.prototype.bind Function.prototype.bindAsEventListener兩個方法。首先我們從概念上解釋一個這兩個方法。
任何一個函式都可以呼叫這兩個方法;引數的是javascript物件或網頁上元素物件;返回型別是個函式物件。
本來我就是個函式,返回還是函式,到這兩個函式有什麼不同呢。看實現程式碼,關鍵還是applycall函式的程式碼。其實這裡只是轉化了一下方法呼叫的物件。
Test
這是 上舉的例子,個人感覺沒什麼意思,反而讓我對bind,bindAsEventListener有些反感。(javascript就是這樣,明明大家都知道的語法,但寫出來的程式碼差別確很大)
看下面程式碼:https://compdoc2cn.dev.java.net/
Test
從上面程式碼可以看出bind/bindAsEventListener只是包裝了一下apply/call方法,改變方法的呼叫物件。如例子,你可以把obj.getName方法轉化成任何物件呼叫,並且把方法讓表單元素觸發。(bind和bindAsEventListener之間只是返回函式的引數不同)
這兩個方法也可以用在物件之間的方法重用,實現類似繼承方法的概念。看以下程式碼,其實是比較無聊的。
這兩個方法也可以用在物件之間的方法重用,實現類似繼承方法的概念。看以下程式碼,其實是比較無聊的。
我從來沒讀過prototype.js的擴充套件專案程式碼,也不知道bind..的最佳實踐,一起挖掘吧。但你絕對不要把bind/bindAsEventListener從繫結的詞義上來理解,可能會讓你更加迷惑。從apply/call理解本質。應用某一物件的一個方法,用另一個物件替換當前物件。
5、關於事件的註冊
Test
執行上面程式碼,你就能明白Event.observe與bind/bindAsEventListener之間的區別:
(1) 顯然Event.observe有限制,只能處理簡單的函式,並函式中不能有this之類的東西。
(2)Event.observe內部用到addEventListener/attachEvent。能把多個函式加到一個觸發事件(window.onload)。bind是覆蓋。
(1) 顯然Event.observe有限制,只能處理簡單的函式,並函式中不能有this之類的東西。
(2)Event.observe內部用到addEventListener/attachEvent。能把多個函式加到一個觸發事件(window.onload)。bind是覆蓋。
6、關於事件監聽最佳實踐
很顯然prototype.js提供的事件註冊方法不是很完善。那看看dojo的時間註冊吧(),更加複雜,估計很多人像我一樣,對於dojo暫時持觀望態度。
如果你看過的前篇關於閉包的介紹,可能見過以下程式碼。
看以下程式碼前我想表述一個觀點,任何網頁中元素,瀏覽器都會為你建立一個物件(見)。(我覺得)這些物件與你建立javascript物件區別是它們有事件監聽,會響應滑鼠鍵盤的事件。如果你用了以下程式碼,那麼把事件監聽程式碼很好的轉化到你的javascript程式碼中。
很顯然prototype.js提供的事件註冊方法不是很完善。那看看dojo的時間註冊吧(),更加複雜,估計很多人像我一樣,對於dojo暫時持觀望態度。
如果你看過的前篇關於閉包的介紹,可能見過以下程式碼。
看以下程式碼前我想表述一個觀點,任何網頁中元素,瀏覽器都會為你建立一個物件(見)。(我覺得)這些物件與你建立javascript物件區別是它們有事件監聽,會響應滑鼠鍵盤的事件。如果你用了以下程式碼,那麼把事件監聽程式碼很好的轉化到你的javascript程式碼中。
function associateObjWithEvent(obj, methodName){
return (function(e){
e = e||window.event;
return obj[methodName](e, this);
});
}
function DhtmlObject(elementId){
var el = getElementWithId(elementId);
if(el){
el.onclick = associateObjWithEvent(this, "doOnClick");
el. = associateObjWithEvent(this, "doMouseOver");
el. = associateObjWithEvent(this, "doMouseOut");
}
}
DhtmlObject.prototype.doOnClick = function(event, element){
... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
... // doMouseOut method body.
}
return (function(e){
e = e||window.event;
return obj[methodName](e, this);
});
}
function DhtmlObject(elementId){
var el = getElementWithId(elementId);
if(el){
el.onclick = associateObjWithEvent(this, "doOnClick");
el. = associateObjWithEvent(this, "doMouseOver");
el. = associateObjWithEvent(this, "doMouseOut");
}
}
DhtmlObject.prototype.doOnClick = function(event, element){
... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
... // doMouseOut method body.
}
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/92289/viewspace-988433/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- javascript高階函式的應用JavaScript函式
- javascript中replace的高階運用JavaScript
- AWK高階應用
- Redis 高階應用Redis
- load高階應用
- INSERT高階應用
- python中list列表的高階應用 高階函式Python函式
- react 高階元件的 理解和應用React元件
- 聊聊 KVC 和 KVO 的高階應用
- C語言巨集的高階應用C語言
- 向量(高階的隨機化應用)隨機
- 「Mybatis系列」Mybatis高階應用MyBatis
- 高階應用開發者手冊
- React 高階應用 -- 高階元件 Heigher Order ComponentReact元件
- 常用JavaScript的高階技巧JavaScript
- JavaScript 高階技巧JavaScript
- JDBC 高階資料型別的應用JDBC資料型別
- Docker 運維高階應用管理Docker運維
- 高階函式應用--currying函式
- Selenium webdriver Java 高階應用WebJava
- 高階iOS應用效能優化iOS優化
- 專案管理(EXCEL高階應用)專案管理Excel
- Mylearningpath(網路安全高階應用)TCP/IP高階技術TCP
- Javascript 高階函式JavaScript函式
- React 中的高階元件及其應用場景React元件
- 說說 vue-router 元件的高階應用Vue元件
- MACD技術的高階應用--MACD與波浪Mac
- 基於PostGIS的高階應用(5)–PolygonSplitingGo
- 分享Python的5種高階特徵應用Python特徵
- 精典的DOS批處理高階應用
- python中文分詞jieba的高階應用Python中文分詞Jieba
- Hive 高階應用開發示例(一)Hive
- 高階應用開發者手冊總結
- NetMeeting高階應用 (轉)
- C++高階應用_設計模式C++設計模式
- 高階玩法之類的裝飾器的應用
- JavaScript常用的簡潔高階技巧JavaScript
- javascript高階函式的介紹JavaScript函式