您的位置：首页 > Web前端

对Extjs一类前端技术的分析思维总结

2015-07-16 17:57 323 查看

我在Extjs上面浪费了不少生命。我觉得我的青春不能糟蹋在这上面，让我有些讨厌这类前端的体力活。因此，我花了点时间把这时间里面的一些经验总结一下。

Extjs用于在前端显示表格化数据，是个比较好的工具。而且能拓展一些类Excel的功能。但是Extjs用js写的，也具有了js一些缺点：
（1）难以定位错误地点。错了也不提示。

（2）变量多。C语言的写法，却没有C语言的优点。

（3）调试工具较少。

（4）有时不容易区分是前端错误还是后端。

怎么在这些问题上少受点气，多节省点时间，享受生命的美好呢？

应该用工具来解决问题，而不是靠结满老茧的双手。所以，

我总结了几点思路：
（1）分开前端和后端。

（2）构建模板原型。

（3）由简到繁。

（4）局部测试，及时回退。

下面一一述之。

（1）分开前端后后端。

首先缩小定位范围。对于后台有数据要传到前端，首先先查看后端的数据能不能传到前端。我在做SSH项目时，用Struts2做跳转时，是这样弄的：

建一个jsp文件，内容：

<body>
<s:form action="user_execute">
<s:submit value="test" />   <!-- 点击显示前端的数据 -->
</s:form>
</body>

当然有更好的方式。这里重在提醒：先分开前、后端。

（2）构建模板模型。

初识Extjs，会对它繁多的变量感到乏味。这种感觉在其它的情境像初学一门语言时也有。尽管互联网信息发达了，但问题仍有很多。

比如：

（1）只是介绍Extjs的属性，然后还是只是介绍Extjs的属性。

（2）介绍的例子缺斤少两的。
我相信这些发布信息的人是聪明的，但是在组织信息的时候欠缺考虑。我们都知道一个人有一个头，四肢，躯干，外加一些细节。光知道一个头很难让人联想到一个人来，其它器官同样。我们在想事物的时候，倾向于从整体构建。所以，在介绍某个技术和某个例子的时候，重要的是：先整体。

比如我在弄懂Extjs的时候，倾向于先整一个模板：

Ext.onReady( function() {
var data=[                                  //数据源
[1,'hello','hello','hello'],
[2,'hello2','hello2','hello2']
];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","sex","job"]});  //匹配数据源
var cm=new Ext.grid.ColumnModel([    //表格的列属性
{header:"编号",dataIndex:"id"},
{header:"姓名",dataIndex:"name"},
{header:"性别",dataIndex:"sex"},
{header:"工作",dataIndex:"job"}
]);
var grid=new Ext.grid.GridPanel({    //GridPanel控件
renderTo:"grid",    //指示将表格渲染到什么地方
title:'HelloWorld', //标题
width:300,
height:200,
cm:cm,       //载入列属性
store:store, //载入数据源
});
});

然后一点一点的添加成分，比如添加分页和工具栏：

Ext.onReady( function() {
var data=[                                  //数据源
[1,'hello','hello','hello'],
[2,'hello2','hello2','hello2']
];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","sex","job"]});  //匹配数据源
var cm=new Ext.grid.ColumnModel([    //表格的列属性
{header:"编号",dataIndex:"id"},
{header:"姓名",dataIndex:"name"},
{header:"性别",dataIndex:"sex"},
{header:"工作",dataIndex:"job"}
]);
var grid=new Ext.grid.GridPanel({    //GridPanel控件
renderTo:"grid",    //指示将表格渲染到什么地方
title:'HelloWorld', //标题
width:300,
height:200,
cm:cm,       //载入列属性
store:store, //载入数据源
bbar : new Ext.PagingToolbar({ // 添加分页工具栏
pageSize : 50,//每页显示几条数据
store : store,
displayInfo : true,//是否显示数据信息
displayMsg : '显示 {0}-{1}条 / 共 {2} 条',
emptyMsg : "无数据- -!"
}),
tbar :[{text:'查询'}]           //添加工具栏
});
});

问题越来复杂也不少见。比如加入JSON传递数据。

Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([   //表格的列属性
new Ext.grid.RowNumberer(), // 自动行号
{header:"姓名",dataIndex:'username',width : 90},
{header:"密码",dataIndex:'password',width : 90},
{header:"性别",dataIndex:'sex',width : 90}
]);
// 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象
var userObject = Ext.data.Record.create( [ {
name : 'username',
mapping : 'username',
type : 'string'
},{
name : 'password',
mapping : 'password',
type : 'string'
}, {
name : 'sex',
mapping : 'sex',
type : 'string'
}]);
// 创建 jsonReader
var jsonReader = new Ext.data.JsonReader( {
id : 'username',
totalProperty : 'totalProperty',// 数据总数
root : 'users',//必须与action中的List数据格式用例名对应
successProperty : 'success' // 数据获得状态
},userObject);
// 创建 Data Store
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'user_execute.action',   //执行action以载入数据。
method : 'GET'
}),
reader : jsonReader   //获取后台返回的数据
});
var grid=new Ext.grid.GridPanel({
title:'show data', //标题
renderTo:"grid",   //指示将表格渲染到什么地方
width:400,
height:300,
cm:cm,       //载入列属性
store:store, //数据源
bbar : new Ext.PagingToolbar({ // 添加分页工具栏
pageSize : 50,//每页显示几条数据
store : store,
displayInfo : true,//是否显示数据信息
displayMsg : '显示 {0}-{1}条 / 共 {2} 条',
emptyMsg : "无数据- -!"
}),
tbar :[{text:'查询'}]           //添加工具栏
});
grid.getStore().load();  //自动传入数据
});

用JSON的方式传递数据，其实是数据的获取方式改变了。原来的data以这种方式显示到前端：

// 创建 jsonReader
var jsonReader = new Ext.data.JsonReader( {
id : 'username',
totalProperty : 'totalProperty',// 数据总数
root : 'users',//必须与action中的List数据格式用例名对应
successProperty : 'success' // 数据获得状态
},userObject);
// 创建 Data Store
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'user_execute.action',   //执行action以载入数据。
method : 'GET'
}),
reader : jsonReader   //获取后台返回的数据
});

这看起来似乎有些理所当然。先别高兴太早！

我之前遇到的bug就是，我的数据就是出不来。问题原因是：

grid.getStore().load();  //自动传入数据

这行代码是自动传入数据，而我不知道应该为程序加上这行代码。

这行代码也可以写成：

store.load();

二者效果一样。不过，由于一个是grid，一个store，都各有一些属性，可玩的花样也会不一样。

面对这些类似“不知道还有更多的细节”，虽然“我不知道不知道”的问题无解，我倾向于“化繁为简”。
（3）由简到繁。

我倾向于化繁为简。繁杂的东西，让人一开始摸不清变量的作用，后来就直接诱导大脑干脆买刮刮乐了。所以，在对程序调试了许多次后，记忆痕迹开始模糊，对特定因果关系记不清的时候，最好回归原始，回归最开始的“模板原型”。

（4）回退。

问题：某论坛的一个求助：这个程序，我这个也改了，那个也添加了，不行；然后又重装了环境变量，还是不行；删了eclipse，myeclipse,重装了更新的版本，始终不行；始终在折腾，就是不行，最后干脆耍赖了：在线等！在线等……

我也遇过不少这类的问题。这时候，构建模板原型就重要了。

思路：

（1）先避开程序的缺点。

就是诸如无法运行、提示一大堆错误、折腾24小时也没让它运行起来，反而

问题越来越复杂的一类问题，先放弃！一定先放弃！

（2）想一想要实现的功能点。

一个程序有许多功能点，但除了陶哲轩，一般人无法在脑中并行运算。这时，就要拆开，一个一个来。想一想要实现的一个功能点，它是如何构建的，并重新为它构建一个项目。在探索中，原来比较乱的线索会逐渐清晰起来。

（3）将多个功能点合并。

这时，还是需要一个母版，确保每个功能点都能容纳进去。八仙过海，各显神通吧！

这个思路听起来好像很慢，还要拆分成许多小项目？那好麻烦！但是，大项目一旦改起来，回退也麻烦，而且错误几率大。这个思路可以让你有时间慢慢玩回退。

总结：Extjs的细节远不止这些。这篇文章侧重的是从思维的角度来分析比较复杂的问题。

至于调试的工具，我这里有几个链接：
http://extjs.org.cn/node/323/ http://www.cnblogs.com/iamlilinfeng/archive/2012/06/23/2558813.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航