2007年3月8日 星期四

jQWebExt - jQuery Simple MVC and plugins Components framework

jQWebExt 是一個以 jQuery 為基礎的簡單 MVC pattern 及 plugins 元件架構的一個網頁開發框架。
它讓您能有效的分離 HTML 及 Javascript 程式,讓 HTML 設計者能接觸到最少的 Javascript 程式,並能有效的應用 Javascript 所開發出來的 plugins 元件於 HTML 之中。
也讓 jQuery plugins 能更容易的被使用。
##CONTINUE##

源起:
在 2007/01 發表了 BloggerExt - jQuery Way 系列後,在眾多的回應及信件中,阿土伯發現了一件非常有趣的現象。
即始不懂 HTML / CSS / Javascript 的好朋友們,也都很勇敢且很有興趣的在設定及嘗試修改著他們的 Blogger,而他們其實已經在和 Javascript 打交道了。
這讓阿土伯有了導入這個觀念到專案團隊上的想法,Server-Side 雖用 RoR ,能把程式和網頁邏輯分離,然而最後這個 View 也就是 (X)HTML/CSS/Javascript 怎麼讓它亦能有效的分離出來,畢竟不是團隊中的網頁設計都會 Javascript 程式寫作。
整個專業流程常常是: 程式人員寫 Model/Controller => 設計人員依資料及動作設計網頁 =>交回程式套變數或 Javascript .
如果能讓網頁設計人員只需要設定 options 即可把大部份的 Javascript 運作起來,就如同使用 BloggerExt 一樣,相信能降低網頁設計人員的門檻。
所以在專案上實驗了一個月,發現網頁設計人員的接受度很高,且已能自行完成很多,如常見的 ZebraTable / TabControll / TreeMenu 等,都能自己設定掛上去而不用再和技術人員協調。
所以阿土伯將程式碼整理整理,放出來和大家分享,程式不大,主要在於觀念的應用。


jQWebExt Function:
  • register: 用來將 Javascript Function 或 Extension 註冊進 jQWebExt 中,它會在 DOM ready 時呼叫您註冊的 Function , 並把設定 Options 傳給您。
  • require: 用來動態載入 third-party 的 javascript .js 檔案,由寫作 Extension 的您來呼叫,網頁設計人員不用去瞭解什麼 javascript 互相關聯要引用載入。

jQuery plugins to Components:

Javascript Programmer 可以先把 jQuery 的 plugins 寫一個簡單的 extension function ,在 function 處理 plugins 的應用及設定細節,並開放出 Options 供網頁設計人員應用,然後註冊進 jQWebExt 中。
這樣網頁設計人員並不需要瞭解 jQuery plugins 怎麼被 create 及 initial , 只要設定好 Options 就能動了,完全不需要寫任何 Javascript 程式碼。


Zebra Table Extension Sample

ZebraTableExtension sample code is here. [DEMO]


jQuery Tabs Plugin Sample

jQueryTabsExtension sample code is here. [DEMO]



Open Source:
和阿土伯的其它程式一樣,它是完全 open source 的,您可以下載回去修改或應用在任何專案上。
jQWebExt 目前依然是 Hosting 在 Google Code 之中,您能任意取得最新的 Source Code,所有的說明及範例已寫在 Google Code 的 Wiki 中,更歡迎您加入 member 一同開發。

http://jqwebext.googlecode.com/svn/


Discussion Group:
阿土伯亦開了一個討論群組,您有任何建議或想法,歡迎來一起討論。
jQWebExt Discussion Group



Technorati Tags: , , , ,

3 則留言:

gasolin 提到...

我喜歡這個概念:)

關於 文件部份, 'Source' 區塊指的是 "jqwebext.zebratable.js" 這個 js 的 Source 嗎?

是不是可以註明一下,
不然讀起文件來很容易就和使用者需要寫的 js 混淆了.

另外, 近期有發佈什麼其他 jqwebext 元件的計畫嗎?

Unknown 提到...

Dear gasolin:
嗯,我已修改文件,讓它讀起來更清楚。
又,這是一個長效的專案,我的工作專案會一直使用此架構開發,所以用到的元件我都會放出來。
我會再放出 jdMenu / jTooltip / sidebarExpandable 的元件。

禾本族 提到...

請問站長
我要怎麼弄您左邊那個摺疊功能
覺得很棒
可以教我嗎