iT邦幫忙

5

extjs 4 系列 2/5:使用 extjs 必須了解的重要觀念與 javascript 技巧與知識

smlsun 2013-05-07 16:30:4913189 瀏覽

在使用類似 extjs 這樣的 framework 時,一定會被他的方便性還有物件化所吸引,但是如果你對 javascript 的一些基礎或是進階技巧不了解,可能會錯用造成無法預知的麻煩,甚至錯把 javascript 原生當做 extjs 特有的以致於在進行程式開發時扼殺了一些變化的可能性,這些問題也都是筆者曾經經歷過的問題,本篇將就一些在使用 extjs 時一定要知道的觀念與 javascript 的技巧進行介紹。

也許熟手會覺得這是基本中的基本,實際上在業界還不會走路就要會飛的例子比比皆是…不是每個人都是東尼,為了不要摔的太大力,馬步還是蹲好一點。

本系列將分為五天內容與大家分享:

第一天:extjs 4 的新特性與基本概念
第二天:使用 extjs 必須了解的 js 技巧與知識(本篇)。
第三天:extjs mvc 架構:繼承與模組重覆使用。
第四天:利用 sencha architect 快速開發 extjs。
第五天:企業級開發框架:extjs 與 grails 的完美組合。
雖說是為了 extjs 而介紹,基本上就算是使用其他的 js 框架,也是需要這些技巧與知識的,就讓我們一個一個來,下面的文章連接皆從我的 blog 而來,歡迎大家進來參觀。

<span style="color: green;"><span style="font-size: 30px;">javascript 基礎技巧與知識</span></span>

<span style="font-size: 20px;">this</span>

在使用 extjs 時,很多時候妳必須存取物件的屬性來進行顯示或判斷,特別在物件導向的世界,為了能夠更完美封裝,有些時候妳必須從操作物件的本體來取得相關的物件或屬性,因此,搞懂 this 的對象就非常重要,對於 this 的原理與特性,連結中將有介紹:

連結:What Is This?

<span style="font-size: 20px;">Scope</span>

Scope 也就是所謂的作用域,了解作用域特性相關的知識在使用 extjs 這樣的框架是很有幫助的,在 extjs 物件導向的特性中很多時候需要利用 Scope 的特性來達成,甚至是在使用 javascript 時,若有效能上的問題,理解 scope 也是個改善方向:

連結:Scope

<span style="font-size: 20px;">callback</span>

寫 javascript 不得不知道什麼是 callback,extjs 建構於 javascript,使用 extjs 也必須了解,特別是使用 ajax 向後端取得資料時所產生的延遲,為了確保函式執行的順序,callback 就是你要使用的技巧,在使用 extjs 時,可不要認為 callback 形式的函數是 extjs 特有得的:

連結:Callback

<span style="font-size: 20px;">Closure</span>

閉包,是個很強大的特性,但確也是兩面刃,需要花一些時間理解,對於初階開發者也許沒辦法靈活應用,但其特性不得不知,特別是在使用 extjs 這樣的框架,大量使用了閉包的特性來封裝物件,也因此,了解閉包將有助於理解 extjs:

連結:Closure

<span style="font-size: 20px;">setTimeout</span>

從 javascript 原生函式 setTimeout 的運作可以一窺 javascript 在瀏覽器引擎中如何處理接踵而來的任務,雖然與 extjs 沒有直接的關係,但是,在 javascript 的世界裡開車,怎能不了解引擎的運作原理呢:

連結:setTimeout

<span style="font-size: 20px;">Performance</span>

Performance 的問題一直是個不單純的課題,即使是使用 extjs 這樣的框架,也不得從日常開始養成好習慣,來避免應用程式效率低下,有些效能上的知識能夠越早知道才能一點一滴的累積高效能的程式碼:

連結:Performance & Tip

<span style="font-size: 20px;">Memory Leaks 偵測</span>

知道影響效能的原因,當能然也要能夠解決效能瓶頸,我們不能瞎摸期待哪天碰到死耗子,要找到問題發生的點,才能夠對症下藥,如何利用工具客觀的找出也是很重要的技能:

連結:Memory Leaks 的情況以及如何解決與偵測

<span style="color: green;"><span style="font-size: 30px;">extjs 之重要觀念</span></span>

使用 extjs 時,常常出現類似屬性,如果沒有仔細研讀官方的 API,有些關鍵資訊往往無法單純從屬性名稱上理解,因此在這要特別說明的是,在 extjs 中 id 與 itemid 的差異以及如何透過屬性以及方法來找出相關元件進行操作,詳細可以參考下列文章:

連結:Extjs: Component 的使用,找尋 Parent & Child,以及區別 Id、itemid

基本工是很重要的,就像倚天屠龍記裡的張無忌,有九陽神功護體學什麼東西都快的道理,掌握基礎,除了能夠理解框架的運作,也可以避免無知的錯誤,特別是像 extjs 這樣龐大的架構,在撰寫時更要注意,請讀者定要耐心,蹲好馬步!

下一篇將會進入 extjs 實際如何運用 MVC 與物件導向特性,來使物件能夠重覆使用。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言