JavaScript代码布局 Applocation Layout

原文出处：http://www.extjs.com.tw/?p=12#more-12 原文作者：Ext Js 正體中文站 原文是在一个繁体网站上，觉得这篇文章对于规模稍大点的Js程序还是挺有帮助的，算是翻译吧...：）        所谓的Application Layout就是你在写程序的时候，如何决定你程序代码的风格，让他具备相当的易读性。这样做的好处，依赖是在团队里面如果程序代码风格固定，别人要接手或者维护会比较容易。二来如果以后你要修改程序，也比较容易。以我来说，由于每天开发实在很大，一周前写的程序自己都觉得很陌生，好啦，废话不多说，进入正题！ 我们来看看JS建类的两种方法： 方法一：

var MyObject = function() {

        /* Your Code Here */

};

方法二：

var MyObject = function() {

    return {

    /* Your Code Here */

    }

}();//注意最后的()，在IE浏览器中不加会出错

        今天我们介绍的Application Layout是许多Javascript设计师常用的架构，当然每个人都有自己的偏好。不过我观察到一种趋势，今天介绍的架构是最受欢迎的。

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 的位置规划出來了，所以如果把代码都放到正确的位置上，大致的架构应该如下：

MyObject = function() {

    var myFirstName = 'Jack';

    var myLastName = 'Slocum'; // sorry jack : )



    function getFirstName() {

        alert(myFirstName);

    }



    function getLastName() {

        alert(myLastName);

    }



    return {

        NickName : 'Super Jack',

        NickName : 'Good Futher Jack',



        init : function() {

            alert(thisNickName); // 在Public zone里面的需要使用thisxxxx来存取变量

            alert(myFirstName); // 在Public zone里面的直接使用 xxx來存取 private zone里面的变量

        },



        other : function() {

            alert(thisNickName); // 在Public zone里面的需要使用thisxxxx来存取变量

            alert(myLastName); // 在Public zone里面的直接使用 xxx来存取 private zone里面的变量

        }

    };

}(); //   

有几点重点要提供给新手注意，这也是我刚学习Javascipt会遇到的疑惑或困扰。 第一个是变量的声明方式。 在Private zone的变量使用分好(;)隔开，举例如下：

var variable1;

var variable2;

但是在Public zone里面的变量要使用逗号(,)隔开(注:其实这是JSON写法的变型)举例如下：

variable1 : value1,

variable2 : value2

第二个是方法的声明方式。 在Private zone的方法声明方式如下：

function fun() {

    /* Your code HERE */

};

function fun() {

    /* Your code HERE */

};

带式在Public zone 的声明方法如下：

fun1: function() {

     /*Your code HERE*/

},

fun2: function() {

     /*Your code HERE*/

}

最后改写一个Ext Ajax读取Xml的示例，原始代码是在Ext.onReady()中处理全部工作，如下：

/*

 * Ext JS Library 1.1.1 Copyright(c) 2006-2007, Ext JS, LLC. [e-mail]

 *

 * 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();

});

现在把这段代码改写如下：

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();

        }

    }

}();

最后在页面中载入刚写好的类：

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

      这样做也许会有人觉得多此一举，但是到程序开发的后期，你一定会遇到更复杂的架构，好比说一个Ext.Gird跟Ext.form互动，结构话的好处是以后在Javasript的开发上，你能将一个个的组件独立出来，方便后期的修改与维护。