ExtJs UI框架學習八

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

爲什麼要搞客戶端三層？

ExtJS這個框架是個功能很強大的框架，由於它給了開發者很大的自由度跟細粒度。開發者在開發的過程中，配置、使用一個組件需要編寫許多的代碼。工作量大不說，效率低，可重用性低卻是致命的。所以，聰明的開發者，應該積極利用ExtJS裏的面向對象功能，簡化自己的工作。定製自己的組件。才能提高自己的效率。所以，除了在服務器端也搞三層，我們也可以在客戶端搞三層，定製組件，簡化工作。

基本知識

Ext.ns() （或Ext.namespace()函數）。相信很少有人去使用這個函數，這個函數用以構建一個新的命名空間。概念跟C#的命名空間或Java中的包概念 一樣。觀察源代碼我們可以發現。實際上這個函數只是建立了一個跟命名空間一樣的類而已。比 如：Ext.ns('buzz.data.utility');，就會新建一個類，名稱是buzz.data.utility。有了這個概念，我們就好辦 了。

實例函數與靜態函數，這兩種函數的區別我就不講了，主要講講如何在JS中實現。用例子說明或許會比較直觀。

1. 1 Ext.ns('test.cls');
2. 2 test.cls = function() {
3. 3
4. 4 }
5. 5 test.cls.staticShow = function() {
6. 6    alert('這是靜態函數');
7. 7 }
8. 8
9. 9 test.cls.prototype.instanceShow = function() {
10. 10    alert('這是實例函數');
11. 11 }

複製代碼

調用如下：

1. 1 var temp = new test.cls();
2. 2 temp.instanceShow()
3. 3 test.cls.staticShow()

複製代碼

數據訪問層

1. 1 Ext.ns('buzz.data.utility');
2. 2 buzz.data.utility.buildHttpStroe = function() {
3. 3    return new Ext.data.Store({
4. 4        proxy: new Ext.data.HttpProxy()
5. 5    });
6. 6 }

複製代碼

該層用於返回一個進行基本封裝的Store對象。

中間層

1. 1 Ext.ns('buzz.user);
2. 2 buzz.user = Ext.data.Record.create([
3. 3    { name: 'PersonName', mapping: 'name', type: 'string' },
4. 4    { name: 'PersonID', mapping: 'id', type: 'int' }
5. 5 ]); //數據模型，對應服務器端的數據模型
6. 6
7. 7 buzz.user.load = function(url, loadedCallback) {
8. 8    var st = buzz.data.utility.buildHttpStroe();
9. 9    st.proxy.getConnection().url = url;
10. 10    st.reader = new Ext.data.JsonReader({ root: 'data' }, buzz.user);
11. 11    st.on('load', loadedCallback);
12. 12    st.load();
13. 13 }  //靜態方法，用以從服務器端返回數據，返回類型爲buzz.user類型，參數url是要調用數據的地址，loadedCallback是回調函數

複製代碼

中間層部分，我們新建了一個buzz.user類（命名空間），該類直接創建自Record對象，該對象是定製的，與服務器端數據模型對應的。注意使用mapping進行映射。而buzz.user.load方法是一個靜態方法。不需要實例化即可使用。

表現層部分

1. 1 Ext.onReady(function() {
2. 2    Ext.get('btn1').on('click', function() {
3. 3        buzz.user.load('json1.ashx', callback);
4. 4    });
5. 5 });
6. 6
7. 7 function callback(st, res, op) {
8. 8    for (var i = 0; i < res.length;  i++) {
9. 9        alert(String.format('{0},{1}', res.get('PersonID'), res.get('PersonName')));
10. 10    }
11. 11 }
12. 12

複製代碼

回調函數三個參數，st：store對象；res：Record數組；op：其它附加選項

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