2018第二季度工作总结-遇到的困难和解决
遇到的困难和解决办法
1. xslt生成html的url动态填充二维码
- 描述:xslt转化xml文件为html后,需要在页面生成一个二维码,该二维码的信息时当前html的信息,需要实现,手机扫描后,在移动端打开该链接
- 困难1:当xslt在转化xml文件后,html内容就已经生成(也就意味着此时二维码应该是已生成状态),所以需要在xslt中获取到浏览器相关的url信息填充能到二维码的元素当中。这就需要前面word结构化过程等来配合,提前知道服务器地址,写到xml中,然后xslt文件获取到xml中的url,转化输出到html中。该转化引擎会被不同的服务端调用,也就意味着不可能提前在结构化等过程中知道url
- 困难2:移动端扫描后出来网址,之前一直是静态页面开发,利用webstorm自动生成的本地服务器调试代码,所以二维码里面的url是localhost类似的格式。
- 解决1:首先用xslt转化输出一个空的html二维码元素,然后用js控制,在生成页面之后,立即调用浏览器的
window.location
,获取当前的url地址,并填写在事先准备好的html元素中 - 解决2:利用node的express开启服务,通过服务访问xml文件即可生成局域网内都可访问的二维码
- 代码:
var express = require("express")
var app = express();
app.use(express.static('../journal-web'));
var server = app.listen(3001, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
总结:凡事要多角度思考,一般情况下,我们解决问题都是要从根源去思考解决办法的,但是这次经历刚好相反,因为来源太多,索性在最后一步汇总直接了当解决问题。
2. 浏览器页面父子元素滚动事件不互相干扰的办法
- 描述:左边有个文章导航栏,fixed定位,右侧是正文。左侧可滚动,右侧也可滚动,右侧的滚动其实是整个window窗体的滚动
- 问题:当鼠标滚轮滚动左侧时,滚动较快,滚动到顶部,继续滚动,此时因为左侧已经到顶,所以window的滚动事件会继而发生,这个现象虽然是浏览器默认的,但其实是符合用户使用习惯的,无可厚非。但是!此时一直滚不要停,立即反方向滚动的时候,会有两种情况发生(都不是我们所期待的左侧滚动),一种是滚动的依旧是右侧的正文部分,另一种是直接卡死不会动了,直到滚轮稍微缓一缓之后,才会恢复正常。(这是浏览器的默认行为)
- 应该是:左侧滚动到顶部,再滚动时右侧可滚动,但是此时在左侧往下滚,不管鼠标滚轮速度多快,有没有停歇,都应该滚动的是左侧部分;直到到底部,继续滚动右侧才可往下滚。
- 分析:上述当然是最理想的办法,但是实现起来难度颇高,所以结合了一下两种滚动,拿出了一个折中的方案
- 解决:当鼠标位于左侧的时候,只有左侧会被滚动;当鼠标不在左侧的时候,右侧才会被滚动
- 代码(基于
jQuery
),并且只针对mousewheel
事件:
注:火狐浏览器没有
mousewheel
事件,替代的是DOMMouseScroll
事件
// #jo-scroll-nav 为左侧导航滚动元素
$('#jo-scroll-nav').scrollUnique();
// 子元素滚动时阻止父元素的默认滚动行为
$.fn.scrollUnique = function () {
return $(this).each(function () {
var eventType = 'mousewheel';
// navigator.userAgent.indexOf("Firefox") > -1
// document.mozHidden !== undefined
if (navigator.userAgent.indexOf("Firefox") > -1) {
eventType = 'DOMMouseScroll';
}
// console.log(eventType)
$(this).on(eventType, function (event) {
// 一些数据
var scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = this.clientHeight;
var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);
if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
// IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
this.scrollTop = delta > 0 ? 0 : scrollHeight;
// 向上滚 || 向下滚
event.preventDefault();
}
});
});
};
3.工作步骤
- 有bug的时候:解决问题,完成需求,遇到不懂得问人或者百度,一切以解决问题为最终目标。
- 但是在过程中如果遇到某个或者某系列知识,不太明白,虽然问题解决了,但是知识未成体系,需要在解决问题中标记一下这部分知识
- 等暂时bug解决完毕,回过头来,看自己这段时间解决的问题,以及问题中涉及到的知识,研究,整理,消化为自己的知识体系
- 一般来说整理知识周期会是半个月到一个月,受项目发布周期影响
- 及时记录问题解决的思路和用到的技术,哪怕就是一个链接一句话,好每个季度都能够做到一次问题总结
4. webpack打包xslt
- 问题描述:webpack打包xslt文件
- 需要先读取package.json中的版本号,然后获取svn中的版本号,两者结合得到新的版本号,作为打包后的文件某一级目录名称
- webpack打包后因为文件相对位置会发生变化,需要对xslt文件中的script和link,img的路径引用进行修改
- 难点:
- 获取svn版本号是通过调用命令行的方式,获取package.json中的版本航是通过文件读取的方式,两者都是异步处理,而在webpack的配置参数中需要写入已经处理完毕的最终的版本号,webpack的配置项都是进来就会执行,不会等待
- 没有现成的插件,需要自己写一个处理xslt引用路径的插件
- 解决:
- 通过命令行获取svn版本号修改为同步;读取package.json修改为同步,并且写在webpack的配置项之前,保证在执行webpack的时候,已经生成了正确的版本号
- 见另一篇笔记
5. 显示器分辨率调整后显示“输入超出范围”
- 解决:驱动精灵,驱动检测,升级显卡驱动即可