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

来源：互联网发布：关于单片机的毕业设计编辑：程序博客网时间：2024/05/29 14:47

我在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

0 0