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文件

1. 需要先读取package.json中的版本号，然后获取svn中的版本号，两者结合得到新的版本号，作为打包后的文件某一级目录名称
2. webpack打包后因为文件相对位置会发生变化，需要对xslt文件中的script和link，img的路径引用进行修改

• 难点：

1. 获取svn版本号是通过调用命令行的方式，获取package.json中的版本航是通过文件读取的方式，两者都是异步处理，而在webpack的配置参数中需要写入已经处理完毕的最终的版本号，webpack的配置项都是进来就会执行，不会等待
2. 没有现成的插件，需要自己写一个处理xslt引用路径的插件

• 解决：

1. 通过命令行获取svn版本号修改为同步；读取package.json修改为同步，并且写在webpack的配置项之前，保证在执行webpack的时候，已经生成了正确的版本号
2. 见另一篇笔记

5. 显示器分辨率调整后显示“输入超出范围”

• 解决：驱动精灵，驱动检测，升级显卡驱动即可