协定方功能实现问题总结

协定方总结

  • 问题一 劫持函数可能会出现的问题,在dom树加载完成之后,如果进行了操作,此操作未在劫持函数之后再次调用,那么就会出现原有函数功能丧失的问题。
  • 问题原因 在JavaScript中,可以通过addEventListener 或者直接给元素对象的属性赋值来添加事件监听器。这些操作通常在DOM树加载完成后执行。如果在添加事件监听器之前,对原有函数进行了修改或替换,那么在添加事件监听器后,调用的将是修改后的函数,而不是原有函数。
  • 解决方案 在劫持函数还原调用之后应再次调用函数来绑定click事件,即在grid.setChooseBox = function 后再次调用chkBox()。
javaScrip 复制代码
JQ(document).ready(function(){   
    //复选框监听
    chkBox();
    //复选框禁用
    dealCheckBoxUnUse(showTyp);
})

/**
*  劫持函数还原禁用,此处的setChooseBox是对复选框进行了一系列的操作,如换页重新渲染选取状态等
*/
var originalChangePage = grid.setChooseBox;
grid.setChooseBox = function () {
   originalChangePage.apply(this, arguments);
   dealCheckBoxUnUse(showTyp);    //复选框禁用
};

function chkBox(){
  JQ(this).find("td.gridBoxTd input").on('click', function() {
      .....操作
  }
}
//上述是出现问题的代码,首先在dom树加载完成时通过调用chkBox()函数,
为dom树上获取的元素绑定onclick事件,但是在劫持函数还原调用之后,未能成功触发事件。
  • 问题二 一种实现功能的思路,其实挺笨拙,且实现繁琐,记录此方法只为自己思维局限的应急之策
  • 需求描述 在不同页面复用同一页面时,要求根据不同的页面来实现不同的功能
  • 实现思路 根据需求来说首先应该确定同一页面的多种不同的所有功能,把这些实现的功能点都堆放在同一页面,默认隐藏,在需要的地方在进行显示,控制的显示方式即为在每个不同的页面内进行控制,代码逻辑如下:
javaScript 复制代码
//现有一个模态框
<!-- 模态框 --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
        <div class="modal-content"> 
        <div class="modal-header">
            <h5 class="modal-title" id="myModalLabel">模态框标题</h5> 
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
                <span aria-hidden="true">&times;</span> 
            </button> 
        </div> 
        <div class="modal-body"> 这里是模态框的内容。 </div>
        <div class="modal-footer"> 
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存更改</button> 
            <button id="btn3" type="button" class="btn btn-primary">导入</button> 
        </div> 
       </div>
    </div> 
</div>

//不同页面对导入按钮需求不同,有的显示,有的不需要显示
//不同页面需要调用的函数
function showSet(){
   //如果导入按钮存在
   if(JQ('#btn3')){
      JQ('#btn3').show();
      window.impTyp="1";  //发送到全域,解决子父页面同步问题
   }
}

在不同功能的页面只要调用showSet方法即可,因为这里是模态框,改变功能需要辨识功能的不同,除直接通过parent查找父页面外,也可定义一个全局变量,在变量改变后,可以有效解决子页面模态框在父页面打开时仍能获取到一个识别状态

  • 问题三 Mysql版本造成字段默认值会出现的错误
  • 问题描述 先看报错
SQL 复制代码
 -- SQL语句 --
 ALTER TABLE vmsets ADD DECOCT_TYP varchar(2) COMMENT '加工方式(10不代煎 20代煎 21浓煎 30制膏);

报错1067 - Invalid default value for 'MODIFY_TIME

  • 问题原因
  • 使用SHOW COLUMNS FROM vmsets like 'MODIFY_TIME'; 在mysql5.7版本中这样定义时间戳默认值是没有问题的,但是在升级了mysql8.0版本后这样的默认值就会有问题,那么如何解决这个问题,那自然是修改默认值去符合mysql8版本的默认值,值的范围是 1970-01-01 00:00:01 UTC2038-01-19 03:14:07 UTC 。顺便记录一下dateTime的以防忘记,datetime 的值的范围是 1000-01-01 00:00:009999-12-31 23:59:59 之间。

总结

本次协定方功能技术难度几乎没有,有的只是对已有代码的阅读和改进,不用造轮子固然方便简单 ,但是也会造成灵活性变差 ,问题二的方法很是笨拙,如果现在新有页面功能呢?新建一个改一个?我觉得代码非常冗余,完全可以在功能页去进行页面判断,通过window.location.href来获取当前页面路径,进而开放不同的功能,除上述我觉得可以总结的地方,其余就是jstl的各种条件判断,因为后端是Hibernate框架,所以此处还记录一个技巧,如果没有专门dto实体类接收前端表单,提交表单可以随便找一个冗余字段,在后端填充信息,然后在代码利用完后恢复其值。大概就总结这么多,一句题外话,1970年是unix纪元,但是真正的unix发布时间其实是1971年。

相关推荐
布Coder2 分钟前
前端 vue + element-ui 框架从 0 - 1 搭建
前端·javascript·vue.js
i_am_a_div_日积月累_7 分钟前
Element Plus 取消el-form-item点击触发组件,改为原生表单控件
前端·vue.js·elementui
集成显卡11 分钟前
网页 H5 微应用接入钉钉自动登录
前端·后端·钉钉
paintstar13 分钟前
el-scrollbar 获取滚动条高度 并将滚动条保持在低端
前端·学习·vue·css3
天天进步20151 小时前
前端测试策略:单元测试到 E2E 测试
前端·单元测试
fashia1 小时前
Java转Go日记(三十九):Gorm查询
开发语言·后端·golang·go
多啦爱梦的梦想2 小时前
项目中把webpack 打包改为vite 打包
前端·webpack
小刘不知道叫啥2 小时前
简单说一下 Webpack分包
前端·javascript·webpack·node.js
Dontla2 小时前
《黑马前端ajax+node.js+webpack+git教程》(笔记)——node.js教程+webpack教程(nodejs教程)
前端·ajax·node.js
繁依Fanyi2 小时前
项目记录:「五秒反应挑战」小游戏的开发全过程
前端·codebuddy首席试玩官