JRT界面解耦范例

  • 开发
  • 19

在系统后端开发可以借助dll、jar、类来提供功能隔离。在前端调用一些公共功能一般就没隔离了，比如调用一个验证密码的窗口、调用CA、调用危急值。常规做法就是页面自己弹窗指定的功能页面，和功能页面约定弹窗id，由弹窗页面负责关闭window。这种写法是很初级的写法，不利于程序模块化，也不利于程序稳定。

直接暴露页面给使用者模式有以下问题：
1.页面大小变化后所有调用地方弹窗大小都得改。
2.不同页面都要求按子页面关闭的window的id来弹窗。
3.调用者需要关心提供页面细节，提供页面高度耦合调用页面。

JRT在开发时候对公共的页面模块采用彻底的解耦方式，需要公共提供的页面要求自己提供对于interface.js，调用者不需要关系页面地址和大小，及弹窗id等，或者按子页面逻辑提供特定方法和变量环境，从而为长期功能稳定提供基石。

这次拿调用摄像头截图来说明解耦实现，对于调用摄像头截图业务来说，业务只是需要弹窗个视频界面能点击截图得到图片即可，至于我的业务干嘛是业务自己操心的事。

那么业务述求有：
1.启动摄像头
2.指定摄像头展示窗口大小
3.指定弹窗是否模态
4.指定是一次截图自动关闭还是一直保留。
5.截图之后我能拿到图片

对于你摄像头怎么调用和怎么实现展示并不是业务关心的事，那么调用接口可以抽取如下：
在这里插入图片描述
接口js的实现与隔离

//调用摄像头取图接口
//调用CameraGetImageHandeler.ShowCameraWin()弹窗摄像头窗口

//选图对象
var CameraGetImageHandeler = {
    //显示摄像头弹窗
    //CallbackFunc:回调方法 (第一个参数是自己传的回调参数，第二个是图片Base64串)
    //CallbackPara:回调参数 (可空)
    //modal:是否模态弹窗
    //selectClose:选完图是否关闭
    //width:弹窗宽度 (可空)
    //height:弹窗高度 (可空)
    ShowCameraWin: function (CallbackFunc,CallbackPara,modal,selectClose,width,height) {
        SelectImageHandeler.CallBackFun = CallbackFunc;
        SelectImageHandeler.CallBackPara = CallbackPara;
        var HasCallBack = "";
        if (CallbackFunc != null) {
            HasCallBack = "1";
        }
        if ($("#winCameraGetImage").length == 0) {
            $(document.body).append('<div id="winCameraGetImage" title="摄像头调用" style="overflow: hidden"></div>');
        }
        if(selectClose==true)
        {
            SelectImageHandeler.SelectClose=true;
        }
        if(width==null)
        {
            width=900;
        }
        if(height==null)
        {
           height=700;
        }
        if(modal==null)
        {
            modal=true;
        }
        showwin("#winCameraGetImage", TranslateDataMTHD("Camera Image", "摄像头调用", ""), "../../window/form/frmCamera.html", width, height,true,null,null, modal);
		return;
		
    },
    SelectClose:false,
    //回调方法
    CallBackFun: null,
    //回调参数
    CallBackPara: null,
    //固定的登录回调方法
    SelectCallBack: function (base64) {
        //进行回调
        if (SelectImageHandeler.CallBackFun != null) {
            SelectImageHandeler.CallBackFun(SelectImageHandeler.CallBackPara,base64);
            if(SelectImageHandeler.SelectClose==true)
            {
                $("#winCameraGetImage").window("close");
            }
        }
    }
}

有了接口隔离之后业务就很简单了

引用接口js
在这里插入图片描述
驱动接口，给出回调处理截图图片
在这里插入图片描述
提交保存
在这里插入图片描述
操作文件服务
在这里插入图片描述

驱动摄像头页面的实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>摄像头调用</title>
    <!--图标-->
    <script src="../../resource/common/js/JRTBSBase.js" type="text/javascript"></script>
    <script src="../../jrtprint/js/JRTPrint.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        SYSPageCommonInfo.Init();
        var BasePath = '';
        var ResourcePath = '';
        var WebServicAddress = SYSPageCommonInfo.Data.WebServicAddress;
        //CSP初始化Session
        var UserDR = SYSPageCommonInfo.Data.Sesssion.UserDR;
        var WorkGroupDR = SYSPageCommonInfo.Data.Sesssion.WorkGroupDR;
        var Fun_Auth = SYSPageCommonInfo.Data.Function.Auth == 'True' ? true : false;
        var sysTheme = SYSPageCommonInfo.Data.Sesssion.Theme;
        //CSP初始化Session
        var SessionStr = SYSPageCommonInfo.Data.SessionStr;
    </script>
    <script src="../js/Camera.js" type="text/javascript"></script>
</head>
<body>
    <div class="easyui-layout" fit="true">
        <div data-options="region:'north',split:true" style="height: 48px;padding:5px 0 0 10px;" title="">
            <a id="btnCutImg" href="#" class="easyui-linkbutton" data-options="" plain="false" listranslate="html~Cameral" style="background-color:#12aa2c;">抓图</a>
            <span class="jrtsp6"></span>
            <a id="btnClose" href="#" class="easyui-linkbutton" data-options="" plain="false" listranslate="html~Cameral" style="background-color:#F1948A;">关闭</a>
        </div>
        <div data-options="region:'center'">
            <div id="divCamera" style="width: 100%;height:100%;background-color:#333333;">
            </div>
        </div>
    </div>
</body>
</html>

页面js

$(function () {
	//#跟上0就代表截图后不关闭窗口，跟1就代表截图后自动关闭窗口
    JRTBaseMsg.StartCameral($("#divCamera"));

    //从内嵌摄像头抓图
    $("#btnCutImg").click(function () {
       var base64=JRTBaseMsg.GetCameralImg();
       window.parent.CameraGetImageHandeler.SelectCallBack(base64);
    });

    //停止内嵌摄像头
    $("#btnClose").click(function () {
       //#跟上0就代表截图后不关闭窗口，跟1就代表截图后自动关闭窗口
       //JRTBaseMsg.Send("StopCameral#0");
       window.parent.$("#winCameraGetImage").window("close");
    });

    //截图回调，截图后会把图片Base64串回调到此方法
    function CameraMsgCallBack(base64) {
       $("#divImgShow").append('<img src="' + "data:image/png;base64," + base64 + '" alt="截图" style="margin-bottom:10px;width:400px;height: 300px;margin:10px;"/>');
    }

    //失败回调
    function NoConnCallBack() {
       $.messager.alert(TranslateDataMTHD("Info", "提示", ""), TranslateDataMTHD("Unable to connect to the messaging service!", "无法连接消息服务！", ""));
    }
});

效果
在这里插入图片描述

这样就把一个复杂的驱动摄像头操作剥离出去了，业务实现也轻松了，摄像头调用的实现也轻松了，同理对CA、危急值、密码验证、取消审核等需要独立提供功能服务的使用。

取消审核的接口实现实例：

//通用取消审核的接口
//调用UnAuthReportHandeler.ShowWin()弹窗取消审核窗口

//选图对象
var UnAuthReportHandeler = {
    //显示报告选图窗口
    //ReportDRS:报告主键，多个用英文逗号分隔
    //ToStatus:要取消到的状态，不给默认1
    //UnAuthUserDR:取消审核用户，不指定为当前会话用户
    //CallbackFunc:回调方法 (可空)
    //CallbackPara:回调参数 (可空)
    ShowWin: function (ReportDRS,ToStatus,UnAuthUserDR, CallbackFunc, CallbackPara) {
        UnAuthReportHandeler.CallBackFun = CallbackFunc;
        UnAuthReportHandeler.CallBackPara = CallbackPara;
        UnAuthReportHandeler.WinPara={};
        if (ToStatus == null) {
            ToStatus = "";
        }
        if(UnAuthUserDR==null)
        {
            UnAuthUserDR="";
        }
        //缓存参数
        UnAuthReportHandeler.WinPara.ReportDRS=ReportDRS;
        UnAuthReportHandeler.WinPara.ToStatus=ToStatus;
        UnAuthReportHandeler.WinPara.UnAuthUserDR=UnAuthUserDR;
        if ($("#winUnAuthReport").length == 0) {
            $(document.body).append('<div id="winUnAuthReport" title="召回报告" style="overflow: hidden"></div>');
        }
        showwin("#winUnAuthReport", TranslateDataMTHD("UnAuth Report", "召回报告", ""), "../../window/form/frmUnAuthReport.html", 540, 320, true);
		return;
		
    },
    //缓存要传递给弹窗的消息
    WinPara:{},
    //回调方法
    CallBackFun: null,
    //回调参数
    CallBackPara: null,
    //固定的回调方法
    CallBack: function () {
        //进行回调
        if (UnAuthReportHandeler.CallBackFun != null) {
            UnAuthReportHandeler.CallBackFun(UnAuthReportHandeler.CallBackPara);
        }
    }
}
阅读全部

相关推荐

  6. 异步解耦之RabbitMQ(一)

    2024-07-14 21:34:01       58 阅读

  8. 解耦、异步、削峰是什么

    2024-07-14 21:34:01       30 阅读

  10. 分层解耦-三层架构

    2024-07-14 21:34:01       30 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-14 21:34:01       67 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-14 21:34:01       72 阅读

  9. 在Django里面运行非项目文件

    2024-07-14 21:34:01       58 阅读

  19. Python语言-面向对象

    2024-07-14 21:34:01       69 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-07-14 21:34:01       64 阅读

热门阅读

  10. SVN 分支管理深入解析

    2024-07-14 21:34:01       16 阅读

  13. 栈与队列---滑动窗口最大值

    2024-07-14 21:34:01       19 阅读

  14. 查询(q_proj)、键(k_proj)和值(v_proj)投影具体含义

    2024-07-14 21:34:01       17 阅读

  15. Django核心面试题

    2024-07-14 21:34:01       19 阅读

  19. B树与B+树的区别

    2024-07-14 21:34:01       17 阅读

  21. 第三方登录、任意用户登录漏洞总结

    2024-07-14 21:34:01       19 阅读

  24. Selenium WebDriver中的显式等待与隐式等待：深入理解与应用

    2024-07-14 21:34:01       21 阅读

  25. qmlRegisterSingletonType用于将一个 C++ 类注册为 QML 单例类型

    2024-07-14 21:34:01       20 阅读

  28. 关于RiboSeq分析流程的总结

    2024-07-14 21:34:01       20 阅读

  30. T113-i 高清倒车支持解串器MAX96708驱动

    2024-07-14 21:34:01       22 阅读