原文出处: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. 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(); });现在把这段代码改写如下:
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的开发上,你能将一个个的组件独立出来,方便后期的修改与维护。