冬Blog

醉心技术、醉心生活
随笔 - 109, 文章 - 0, 评论 - 956, 阅读 - 32万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

使用ExtJs开发MIS系统(5):使用Action抽象客户端操作

Posted on   冬冬  阅读(2819)  评论(5编辑  收藏  举报

在客户端系统中,或者说在任何系统中,同样的操作是可以通过不同的方式激发的,比如说我们使用的浏览器,刷新当前页面可以点击刷新按钮,可以在右键菜单中选择刷新,还可以按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="#">纵向项目列表</a>
    </li>
    <li id="MenuBarItem-li-project-horizontal-list">
        <a id="MenuBarItem-a-project-horizontal-list" class="" href="#">横向项目列表</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的动态加载就用到了,上面代码中,处理尚未实现的操作时,也用到了这个特性。

编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
历史上的今天:
2006-12-21 常用的数据访问方式
点击右上角即可分享
微信分享提示