在軟體架構中,特別是B/S架構中,很流行使用三層架構（數據層、中間層、表現層）來建立軟體.但這從來都是伺服器端的專利.在傳統的概念中,客戶端的職責就只是用來對數據進行展現而已.如果說客戶端也搞三層,確實是一樣不可思議的事件.
為什麼要搞客戶端三層？
,聰明的開發者,應該積極利用ExtJS里的面向對象功能,簡化自己的工作.定製自己的組件.才能提高自己的效率.,除了在伺服器端也搞三層,我們也可以在客戶端搞三層,定製組件,簡化工作.
基本知識
Ext.ns()（或Ext.namespace()函數）.相信很少有人去使用這個函數,這個函數用以構建一個新的命名空間.概念跟C#的命名空間或Java中的包概念一樣.觀察源代碼我們可以發現.實際上這個函數只是建立了一個跟命名空間一樣的類而已.比如：Ext.ns('buzz.data.utility');,就會新建一個類,名稱是buzz.data.utility.有了這個概念,我們就好辦了.
實例函數與靜態函數,這兩種函數的區別我就不講了,主要講講如何在JS中實現.用例子說明或許會比較直觀.
| 1 Ext.ns('test.cls'); 2 test.cls = function() { 3 4 } 5 test.cls.staticShow = function() { 6 alert('這是靜態函數'); 7 } 8 9 test.cls.prototype.instanceShow = function() { 10 alert('這是實例函數'); 11 } |
調用如下：
| 1 var temp = new test.cls(); 2 temp.instanceShow() 3 test.cls.staticShow() |
數據訪問層
| 1 Ext.ns('buzz.data.utility'); 2 buzz.data.utility.buildHttpStroe = function() { 3 return new Ext.data.Store({ 4 proxy: new Ext.data.HttpProxy() 5 }); 6 } |
該層用於返回一個進行基本封裝的Store對象.
中間層
| 1 Ext.ns('buzz.user); 2 buzz.user = Ext.data.Record.create([ 3 { name: 'PersonName', mapping: 'name', type: 'string' }, 4 { name: 'PersonID', mapping: 'id', type: 'int' } 5 ]); //數據模型,對應伺服器端的數據模型 6 7 buzz.user.load = function(url, loadedCallback) { 8 var st = buzz.data.utility.buildHttpStroe(); 9 st.proxy.getConnection().url = url; 10 st.reader = new Ext.data.JsonReader({ root: 'data' }, buzz.user); 11 st.on('load', loadedCallback); 12 st.load(); 13 } //靜態方法,用以從伺服器端返回數據,返回類型為buzz.user類型,參數url是要調用數據的地址,loadedCallback是回調函數 |
中間層部分,我們新建了一個buzz.user類（命名空間）,該類直接創建自Record對象,該對象是定製的,與伺服器端數據模型對應的.注意使用mapping進行映射.而buzz.user.load方法是一個靜態方法.不需要實例化即可使用.
表現層部分
| 1 Ext.onReady(function() { 2 Ext.get('btn1').on('click', function() { 3 buzz.user.load('json1.ashx', callback); 4 }); 5 }); 6 7 function callback(st, res, op) { 8 for (var i = 0; i < res.length; i ) { 9 alert(String.format('{0},{1}', res[i].get('PersonID'), res[i].get('PersonName'))); 10 } 11 } 12 |
回調函數三個參數,st：store對象；res：Record數組；op：其它附加選項
該篇文章只作拋磚引玉的作用.實際開發中,還需要更多考慮的地方.
[火星人 ] 利用ExtJS構建客戶端三層初探已經有758次圍觀
