在系统后端开发可以借助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);
}
}
}
968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
