原文出处：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的开发上，你能将一个个的组件独立出来，方便后期的修改与维护。
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
