记录下最近旧网盘开发维护的感悟

[sakila1012]

写在前面

网盘接手已经将近2年的时间，但是，随着时间的推移，感觉自己在个项目上，进展不大，成长也很有限。说说最近关于维护IE浏览器上传的问题

现有的问题

仅仅能实现 chrome，Firefox的上传，大文件上传，IE 浏览器存在诸多问题，无法上传大文件，上传文件的数量有限，无法实现秒传（没有计算 MD5值）等等

解决方案

引入百度的 web uploader 来实现，避免因为兼容性问题导致用户无法使用。

问题

模态窗弹出隐藏滚动条

// 弹出模态框时，隐藏页面出现的滚动条
document.getElementsByTagName("body")[0].style.cssText='height:100%;overflow:hidden;';

// 关闭模态框时，隐藏页面出现的滚动条
document.getElementsByTagName("body")[0].style.cssText=''

实现块元素垂直水平居中（有滚动条，浏览器窗口发生变化时）

            center($('.qrcode-dialog'))   
            function center(obj) {
                var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高   
                    var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度   
                    var objLeft = (screenWidth - obj.width())/2 ;   
                    var objTop = (screenHeight - obj.height())/2 + scrolltop;   
                    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});   
                //浏览器窗口大小改变时   
                $(window).resize(function() {   
                    screenWidth = $(window).width();   
                    screenHeight = $(window).height();   
                    scrolltop = $(document).scrollTop();   
                    objLeft = (screenWidth - obj.width())/2 ;   
                    objTop = (screenHeight - obj.height())/2 + scrolltop;   
                    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});   
                });   
                //浏览器有滚动条时的操作、   
                $(window).scroll(function() {   
                    screenWidth = $(window).width();   
                    screenHeight = $(window).height();   
                    scrolltop = $(document).scrollTop();   
                    objLeft = (screenWidth - obj.width())/2 ;   
                    objTop = (screenHeight - obj.height())/2 + scrolltop;   
                    obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});   
                });  
            }  

解决升级 chrome（>=75） 最新版本后，input 自动填充问题

之前的解决方式时设置 autocomplete=off，但是现在这种处理方式没有用

<input type="text" autocomplete="off" >
<input type="password" autocomplete="new-password" style="display: none"/>

ie9 在input内容为空的情况下placeholder的值被当做value取出

由于 IE 9 不支持 placeholder，在input为空的情况下，通过jquery获取的val是 placeholder的值

解决方式，替换掉 placeholder

旧网盘使用的 jQuery 版本是 1.8.3，而新网盘的版本是 3.2.1

更换后出现了一个问题

原因：jquery 1.9*开始为了安全性，必须将script中的html内容parseHTML转换后使用。否则就报无法解析HTML内容的错误 。

$($.parseHTML(this.linkTemplate)) 

[sakila1012]

今天遇到一个问题，维护旧的网盘，使用 jQuery 获取 checkbox 为 true 的项，但发现原代码中使用的是 attr 来获取checked 的值，但发现，不管有没有勾选 checkbox 获取的值都是 undefined。后来查了下，如果没有在 input 上设置checked，无论是否勾选，返回的都是 undefined，这个时候应该通过 prop 来获取。