Application Layout 程式開發入門介紹

今天要介紹的是初級的觀念，是關於Application Layout的話題，所謂的Application Layout就是你在撰寫程式的時候，如何決定你程式碼的風格，讓它具備有相當的易讀性。這樣做的好處，一來是在團隊裡面如果程式碼風格固定，別人要接手或支援你的專案會比較容易。二來如果以後你要修改程式，也必較容易。以我來說，由於每天開發實在很大，一周前寫的程式自己都越覺得很陌生。好啦，廢話不多說，至接近入正題。

一開始我們些略過JavaScript兩種建立物件的方法，我先把大概介紹一下，但是這篇文章不會談論到這個部分。

方法一是：

view plain copy to clipboard print ?

1.   
2. var MyObject = function(){   
3.     /*Your Code Here*/  
4. };  

var MyObject = function(){
	/*Your Code Here*/
};

方法二是：

view plain copy to clipboard print ?

1.   
2. var MyObject = function(){   
3.     return{   
4.     /*Your Code Here*/  
5.     }   
6. }();  

var MyObject = function(){
	return{
	/*Your Code Here*/
	}
}();

好，今天我們介紹的Application Layout是許多Javascript設計師常用的架構，當然每個人都又自己的偏好。不過我觀察到一個趨勢，今天介紹的架構是最受許多人歡迎的。

view plain copy to clipboard print ?

1.   
2. MyObject = function() {   
3.     // private variables : 私有屬性或稱為區域變數   
4.     // private functions : 私有方法或稱為區域方法   
5.     // public space   
6.     return {   
7.         // public properties, e.g. strings to translate : 公有屬性或稱為公開變數   
8.   
9.         // public methods : 公有方法或稱為公開方法   
10.         init: function() {   
11.             alert('Application successfully initialized');   
12.         }   
13.     };   
14. }(); //   

MyObject = function() {
	// private variables : 私有屬性或稱為區域變數
    // private functions : 私有方法或稱為區域方法
    // public space
    return {
        // public properties, e.g. strings to translate : 公有屬性或稱為公開變數

        // public methods : 公有方法或稱為公開方法
        init: function() {
            alert('Application successfully initialized');
        }
    };
}(); // 

上面一堆提到一堆公有/私有，公開/區域..等名詞都是翻譯的問題。我個人還是比較喜歡用英文來稱呼。

上面的架構已經把private 與public 的位置規劃出來了，所以如果把程式碼都放到正確的位置上，大致的架構應該如下

view plain copy to clipboard print ?

1.   
2. MyObject = function() {   
3.     var myFirstName='Jack';   
4.     var myLastName='Slocum'; //sorry jack : )   
5.   
6.     function getFirstName(){   
7.         alert(myFirstName);   
8.     }   
9.     function getLastName(){   
10.         alert(myLastName);   
11.     }   
12.     return {   
13.         NickName1: 'Super Jack',   
14.         NickName2: 'Good Futher Jack',   
15.         init: function() {   
16.             alert(this.NickName1); //在Public zone裡面的需要使用this.xxxx來存取變數   
17.             alert(myFirstName);    //在Public zone裡面的直接使用 xxx來存取  private zone裡面的變數   
18.         },   
19.         other : function(){   
20.             alert(this.NickName2); //在Public zone裡面的需要使用this.xxxx來存取變數   
21.             alert(myLastName);    //在Public zone裡面的直接使用 xxx來存取  private zone裡面的變數   
22.         }  //注意結尾的,需要去除不然龜毛的IE會拒絕執行   
23.     };   
24. }(); //   

MyObject = function() {
	var myFirstName='Jack';
	var myLastName='Slocum'; //sorry jack : )

    function getFirstName(){
		alert(myFirstName);
	}
	function getLastName(){
		alert(myLastName);
	}
    return {
		NickName1: 'Super Jack',
		NickName2: 'Good Futher Jack',
        init: function() {
            alert(this.NickName1); //在Public zone裡面的需要使用this.xxxx來存取變數
			alert(myFirstName);    //在Public zone裡面的直接使用 xxx來存取  private zone裡面的變數
        },
		other : function(){
			alert(this.NickName2); //在Public zone裡面的需要使用this.xxxx來存取變數
			alert(myLastName);    //在Public zone裡面的直接使用 xxx來存取  private zone裡面的變數
		}  //注意結尾的,需要去除不然龜毛的IE會拒絕執行
    };
}(); // 

有幾點重點要提供給新手注意，這也是我剛學習Javascipt會遇到的疑惑與困擾。
第一個是變數的宣告方式:
在Private zone的變數使用分號(;)隔開舉例如下:

view plain copy to clipboard print ?

1. var 變數1;   
2. var 變數2;  

	var 變數1;
	var 變數2;

但是在Public zone裡面的變數要使用逗號(,)隔開(註:其實這是JSON寫法的變型)舉例如下:

view plain copy to clipboard print ?

1. 變數1:變數1的值,   
2. 變數2:變數2的值  //注意結尾的逗點在IE無法通過檢查  

	變數1:變數1的值,
	變數2:變數2的值  //注意結尾的逗點在IE無法通過檢查

第二個是function(或稱方法)的宣告方式：
在Private zone的使用方法如下:

view plain copy to clipboard print ?

1. function fun1(){   
2. /*Your code HERE*/  
3. };   
4. function fun2(){   
5. /*Your code HERE*/  
6. };   

	 function fun1(){
		/*Your code HERE*/
	 };
	 function fun2(){
		/*Your code HERE*/
	 }; 

在但是在Public zone的使用方法如下,(註:還這是JSON寫法的變型):

view plain copy to clipboard print ?

1. fun1: function() {   
2.         /*Your code HERE*/  
3. },   
4. fun2: function() {   
5.         /*Your code HERE*/  
6. }  

	fun1: function() {
	        /*Your code HERE*/
	},
	fun2: function() {
	        /*Your code HERE*/
	}

最後我們來改寫Ajax XML data 的範例。
原始的程式如下，他是在Ext.onReady()裡面處理全部的工作：

view plain copy to clipboard print ?

1. /*  
2.  * Ext JS Library 1.1.1  
3.  * Copyright(c) 2006-2007, Ext JS, LLC.  
4.  * licensing@extjs.com  
5.  *  
6.  * http://www.extjs.com/license  
7.  */  
8.   
9. Ext.onReady(function(){   
10.     // create the Data Store   
11.     var ds = new Ext.data.Store({   
12.         // load using HTTP   
13.         proxy: new Ext.data.HttpProxy({url: 'sheldon.xml'}),   
14.         // the return will be XML, so lets set up a reader   
15.         reader: new Ext.data.XmlReader({   
16.                // records will have an "Item" tag   
17.                record: 'Item',   
18.                id: 'ASIN',   
19.                totalRecords: '@total'  
20.            }, [   
21.                // set up the fields mapping into the xml doc   
22.                // The first needs mapping, the others are very basic   
23.                {name: 'Author', mapping: 'ItemAttributes > Author'},   
24.                'Title', 'Manufacturer', 'ProductGroup'  
25.            ])   
26.     });   
27.   
28.     var cm = new Ext.grid.ColumnModel([   
29.         {header: "Author", width: 120, dataIndex: 'Author'},   
30.         {header: "Title", width: 180, dataIndex: 'Title'},   
31.         {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},   
32.         {header: "Product Group", width: 100, dataIndex: 'ProductGroup'}   
33.     ]);   
34.     cm.defaultSortable = true;   
35.     // create the grid   
36.     var grid = new Ext.grid.Grid('example-grid', {   
37.         ds: ds,   
38.         cm: cm   
39.     });   
40.     grid.render();   
41.     ds.load();   
42. });  

	/*
	 * Ext JS Library 1.1.1
	 * Copyright(c) 2006-2007, Ext JS, LLC.
	 * licensing@extjs.com
	 *
	 * http://www.extjs.com/license
	 */

	Ext.onReady(function(){
	    // create the Data Store
	    var ds = new Ext.data.Store({
	        // load using HTTP
	        proxy: new Ext.data.HttpProxy({url: 'sheldon.xml'}),
	        // the return will be XML, so lets set up a reader
	        reader: new Ext.data.XmlReader({
	               // records will have an "Item" tag
	               record: 'Item',
	               id: 'ASIN',
	               totalRecords: '@total'
	           }, [
	               // set up the fields mapping into the xml doc
	               // The first needs mapping, the others are very basic
	               {name: 'Author', mapping: 'ItemAttributes > Author'},
	               'Title', 'Manufacturer', 'ProductGroup'
	           ])
	    });

	    var cm = new Ext.grid.ColumnModel([
		    {header: "Author", width: 120, dataIndex: 'Author'},
			{header: "Title", width: 180, dataIndex: 'Title'},
			{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
			{header: "Product Group", width: 100, dataIndex: 'ProductGroup'}
		]);
	    cm.defaultSortable = true;
	    // create the grid
	    var grid = new Ext.grid.Grid('example-grid', {
	        ds: ds,
	        cm: cm
	    });
	    grid.render();
	    ds.load();
	});

我們可以把它改寫如下，在我的規劃裡面，我把ds,cm,sm分別放在Private的function裡面處理，當然您也可以自己規劃自己的架構。

view plain copy to clipboard print ?

1. var MyGrid=function(){   
2.     var sm;   
3.     var ds;   
4.     var cm;   
5.     var grid;   
6.     /**  
7.     * 初始化 sm: RowSelectionModel  
8.     */  
9.     function bulide_sm(){   
10.         sm = new Ext.grid.RowSelectionModel({singleSelect:true});   
11.     }   
12.     /**  
13.     * 初始化ds: Datasource  
14.     */  
15.     function bulder_ds(){   
16.         ds = new Ext.data.Store({   
17.             // load using HTTP   
18.             proxy: new Ext.data.HttpProxy({url: 'sheldon.xml'}),   
19.   
20.             // the return will be XML, so lets set up a reader   
21.             reader: new Ext.data.XmlReader({   
22.                    // records will have an "Item" tag   
23.                    record: 'Item',   
24.                    id: 'ASIN',   
25.                    totalRecords: '@total'  
26.                }, [   
27.                    // set up the fields mapping into the xml doc   
28.                    // The first needs mapping, the others are very basic   
29.                    {name: 'Author', mapping: 'ItemAttributes > Author'},   
30.                    'Title', 'Manufacturer', 'ProductGroup'  
31.                ])   
32.         });   
33.     }   
34.     /**  
35.     * 初始化cm: ColumnModel  
36.     */  
37.     function bulder_cm(){   
38.         cm = new Ext.grid.ColumnModel([   
39.             {header: "Author", width: 120, dataIndex: 'Author'},   
40.             {header: "Title", width: 180, dataIndex: 'Title'},   
41.             {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},   
42.             {header: "Product Group", width: 100, dataIndex: 'ProductGroup'}   
43.         ]);   
44.         cm.defaultSortable = true;   
45.     }   
46.     return{   
47.         init : function(){   
48.             bulder_cm();   
49.             bulide_sm();   
50.             bulder_ds();   
51.             this.init_grid(); //產生gird   
52.             ds.load();   
53.         },   
54.         init_grid : function(){   
55.             // create the grid   
56.             grid = new Ext.grid.Grid('example-grid', {   
57.                 ds: ds,   
58.                 cm: cm,   
59.                 selModel:sm,   
60.                 enableColLock:false,   
61.                 loadMask: true  
62.             });   
63.             grid.render();   
64.         }   
65.     }   
66. }();  

	var MyGrid=function(){
		var sm;
		var ds;
		var cm;
		var grid;
		/**
		* 初始化 sm: RowSelectionModel
		*/
		function bulide_sm(){
			sm = new Ext.grid.RowSelectionModel({singleSelect:true});
		}
		/**
		* 初始化ds: Datasource
		*/
		function bulder_ds(){
			ds = new Ext.data.Store({
				// load using HTTP
				proxy: new Ext.data.HttpProxy({url: 'sheldon.xml'}),

				// the return will be XML, so lets set up a reader
				reader: new Ext.data.XmlReader({
					   // records will have an "Item" tag
					   record: 'Item',
					   id: 'ASIN',
					   totalRecords: '@total'
				   }, [
					   // set up the fields mapping into the xml doc
					   // The first needs mapping, the others are very basic
					   {name: 'Author', mapping: 'ItemAttributes > Author'},
					   'Title', 'Manufacturer', 'ProductGroup'
				   ])
			});
		}
		/**
		* 初始化cm: ColumnModel
		*/
		function bulder_cm(){
			cm = new Ext.grid.ColumnModel([
				{header: "Author", width: 120, dataIndex: 'Author'},
				{header: "Title", width: 180, dataIndex: 'Title'},
				{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
				{header: "Product Group", width: 100, dataIndex: 'ProductGroup'}
			]);
			cm.defaultSortable = true;
		}
		return{
			init : function(){
				bulder_cm();
				bulide_sm();
				bulder_ds();
				this.init_grid(); //產生gird
				ds.load();
			},
			init_grid : function(){
			    // create the grid
				grid = new Ext.grid.Grid('example-grid', {
					ds: ds,
					cm: cm,
			        selModel:sm,
			        enableColLock:false,
			        loadMask: true
				});
				grid.render();
			}
		}
	}();

最後，我們使用 來載入們剛剛寫好的物件。

view plain copy to clipboard print ?

1. Ext.onReady(XmlGrid.init,XmlGrid,true);  

	Ext.onReady(XmlGrid.init,XmlGrid,true);

這樣做也許有人會覺得多此一舉，但是到程式開發的後期，你一定會遇到更複雜的架構，好比說一個Ext.Gird跟Ext.form互動，結構化的好處是以後再Javasript的開發上，你能將一個個的物件獨立出來，方便後期的修改與模組化。
我以後會發表Grid與form同步的教學文章。那時您大概就會了使用這個Application Layout的好處了。