ExtJS优化（一）：删除冗余代码提高运行速度

说到ExtJS，大家都知道它是个“重量级”选手。加载慢几乎是标配，但好消息是，咱们程序员能做的，就是想办法给它“减负”。之前聊过JS打包的优化，这次来聊聊怎么通过减少冗余代码，让运行速度再上一个台阶。

这次要讲的优化思路，核心围绕三个通用化：删除代码通用化、提交表单通用化、初始化Grid通用化。篇幅所限，本篇先聚焦“删除代码”这一块。

先看一段典型的通用删除功能代码，这段代码在项目中几乎每个Grid都会用到——把选中记录的主键ID提取出来，弹个确认框，再发个Ajax请求到后端删除。

复制代码 代码如下:

/**
* 获取个GridPanel的选择的记录
*/
function $getGdSelectedIds(grid, idName) {
var selRs = grid.getSelectionModel().getSelections();
var ids = Array();
for (var i = 0; i < selRs.length; i++) {
ids.push(eval("selRs[i].data." + idName));
}
return ids;
}
/**
*删除
*/
function $postDel(a) {
Ext.Msg.confirm("信息确认", "您确认要删除所选记录吗？",
function(b) {
if (b == "yes") {
Ext.getBody().mask("正在删除，请稍等");
Ext.Ajax.request({
url: a.url,
params: {
ids: a.ids
},
timeout: 100000000,//default 30000 milliseconds
method: "POST",
success: function(c, d) {
Ext.getBody().unmask();
Ext.ux.Toast.msg("操作信息", "成功删除该记录！");
if (a.callback) {
a.callback.call(this);
return;
}
if (a.grid) {
a.grid.getStore().reload();
}
},
failure: function(c, d) {
Ext.getBody().unmask();
Ext.ux.Toast.msg("操作信息", "操作出错，请联系管理员！");
}
});
}
});
}
/**
* Gird批量删除操作
*/
function $delGridRs(a) {
var b = $getGdSelectedIds(a.grid, a.idName);
if (b.length == 0) {
Ext.ux.Toast.msg("操作信息", "请选择要删除的记录！");
return;
}
var c = {
url: a.url,
ids: b,
grid: a.grid
};
$postDel(c);
}

这段代码大约24行，功能很完整，但说实话，每次写新页面都要复制粘贴这么一堆，看着也累。而且，如果改一个公共组件，所有地方都得跟着改，维护成本不小。

优化后的思路很简单：把这些公共逻辑抽成一个通用函数，调用时只需传几个关键参数。来看看优化后的效果——单条删除，从原来的24行代码直接压缩到5行，而且结构清晰多了。

复制代码 代码如下:

var a = Ext.getCmp("PlanBookAllGrid");
//单个删除
$postDel({
url: __ctxPath + "/traincost/multiDelPlanBook.action",
ids: b,
grid: a
});

批量删除同样简洁：

复制代码 代码如下:

$delGridRs({
url: __ctxPath + "/traincost/multiDelPlanBook.action",
grid:c.gridPanel,
idName:'mainid'
});

这样一改，代码量减少了将近80%，阅读起来也一目了然。更重要的是，后续如果要调整删除逻辑（比如增加二次确认、更换弹窗样式），只需要修改通用函数就行，所有调用方自动生效。这就是“代码通用化”带来的实际收益。

下一篇会继续聊“提交表单通用化”和“初始化Grid通用化”的做法，感兴趣的话不妨先自己动手试试这套删除优化的思路，效果立竿见影。