使用ExtJs开发MIS系统（5）：使用Action抽象客户端操作

在客户端系统中，或者说在任何系统中，同样的操作是可以通过不同的方式激发的，比如说我们使用的浏览器，刷新当前页面可以点击刷新按钮，可以在右键菜单中选择刷新，还可以按F5快捷键。但不管操作方式如何变化，操作本身是不变的，所以我们可以把这些操作抽象出来。

来看以下代码：

1:　Srims.Action = new function(){
2:　};
3:
4:　Srims.Action.doAction = function(e, t){
5:　　　e.stopEvent();
6:　　　var actionName = t.id.replace('MenuBarItem-a-', '');
7:
8:　　　if (!Srims.Action.actions[actionName]) {
9:　　　　　alert('对不起，该功能尚未实现。');
10:　　　　　return;
11:　　　}
12:
13:　　　Srims.Action.actions[actionName]();
14:　};
15:
16:　Srims.Action.actions = {
17:　　　'project-vertical-list': function(){
18:　　　　　Srims.Action._callProjectAction('Srims.projects.listVerticalProject();');
19:　　　},
20:　　　'project-horizontal-list': function(){
21:　　　　　Srims.Action._callProjectAction('Srims.projects.listHorizontalProject();');
22:　　　}
23:　};
24:
25:　Srims.Action._callProjectAction = function(fn){
26:　　　if (Srims.projects) {
27:　　　　　eval(fn);
28:　　　}
29:　　　else {
30:　　　　　Srims.loadProjectModule(fn);
31:　　　}
32:　}

以上代码在使用ExtJs开发MIS系统（2）：Js的动态加载出现过。该段代码通过Srims.Action.actions定义系统中的所有操作，通过Srims.Action.doAction调用操作。Srims.Action.doAction接受两个参数，第一参数是点击事件的参数，第二个参数是激发该点击操作的元素。如果激发该操作的元素的ID和对应操作有一定的关系，那么就可以直接映射到某一个操作。例如我们将Srims.Action.doAction绑定到以下html上

<ul class="">
<li id="MenuBarItem-li-project-vertical-list">
<a id="MenuBarItem-a-project-vertical-list" class="" href="http://www.bianceng.cn/index.php#">纵向项目列表</a>
</li>
<li id="MenuBarItem-li-project-horizontal-list">
<a id="MenuBarItem-a-project-horizontal-list" class="" href="http://www.bianceng.cn/index.php#">横向项目列表</a>
</li>
</ul>

其中a标签的ID和操作名称的对应关系是在操作名称前加前缀“MenuBarItem-a-”，所以我们在Srims.Action.doAction中使用var actionName = t.id.replace('MenuBarItem-a-', '')替换掉前缀后，就可以得到对应的操作名称了了，然后就可以调用Srims.Action.actions[actionName]()执行该操作。当然执行操作以前，还可以使用

if (!Srims.Action.actions[actionName]) {
alert('对不起，该功能尚未实现。');
return;
}确定该操作是否已经完成。

绑定操作使用ExtJs中的事件处理方法，示例代码如下：

var ab = Srims.MenuBar.getMenuBar().body;
ab.on('mousedown', Srims.Action.doAction, null, {delegate:'a'});
ab.on('click', Ext.emptyFn, null, {delegate:'a', preventDefault:true});

把操作抽象在一个地方最大的好处就是可以统一的控制操作的流程，这一点在使用ExtJs开发MIS系统（2）：Js的动态加载就用到了，上面代码中，处理尚未实现的操作时，也用到了这个特性。

本文配套源码