利用ExtJS構建客戶端三層初探

火星人 @ 2014-03-10 , reply:0


  在軟體架構中,特別是B/S架構中,很流行使用三層架構(數據層、中間層、表現層)來建立軟體.但這從來都是伺服器端的專利.在傳統的概念中,客戶端的職責就只是用來對數據進行展現而已.如果說客戶端也搞三層,確實是一樣不可思議的事件.

  為什麼要搞客戶端三層?

  ExtJS這個框架是個功能很強大的框架,它給了開發者很大的自由度跟細粒度.開發者在開發的過程中,配置、使用一個組件需要編寫許多的代碼.工作量大不說,效率低,可重用性低卻是致命的.,聰明的開發者,應該積極利用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:其它附加選項

  該篇文章只作拋磚引玉的作用.實際開發中,還需要更多考慮的地方.




[火星人 via ] 利用ExtJS構建客戶端三層初探已經有50次圍觀

http://www.coctec.com/docs/java/show-post-62081.html