网易有道题库测试+女生节项目总结

[xingbofeng]

测试系统

• 数学公式的bug，没改出来。最后的解决方案是在componentDidMount里在调用MathJax的方法，而不能在一开始就调用，因为当时组件并没有渲染出来。。。使用MathJax.Callback.Queue()添个回调。
• 测试系统只看错题功能，虽然走redux，但写的有点复杂，分发了两次action。通过code review学了很多东西。
• 测试系统的一些bug修复：学到的一些东西，如transform-origin。默认使用transform的scale是会在中间进行缩放的。

女生节活动页面

• 大量用了transform属性但是并没有加前缀，导致了移动端内置浏览器的不兼容，后面去修改有花费了很多时间:autoprefixer
• 使用vendor的问题：其实就是获取window.location.href里面的参数。采用的是志鹏封装的组件。

      var vendor;

      function init() {
        bindVendors();
      }

      var getParameter = function(name) {
        var r = new RegExp("(\\?|#|&)" + name + "=([^&#]*)(&|#|$)"),
          m = location.href.match(r);
        return decodeURIComponent(!m ? "" : m[2]);
      };

      //追加vendor
      function transferLink(link) {
        if (link.indexOf("vendor") === -1) {
          if (link.indexOf('?') === -1) {
            link += "?vendor=" + vendor;
          } else {
            link += "&vendor=" + vendor;
          }
        }
        return link;
      }

      function bindVendors() {
        vendor = getParameter("vendor");
        var all = $("a");
        all.each(function(inx, item) {
          var $a = $(item);
          $a.attr('href', transferLink($a.attr('href')))
        })
      }
      init();
    }

其实后面今天再看了看奇舞周刊的199期的文章，学到了可以用HTML5的URLSearchParams()直接拿参数：

  var params = new URLSearchParams('src=so.com&data=1&data=2');
  params.has("src") === true;
  params.get("data") === "1";
  params.getAll("data");
  
  
  params.append("q","hello");
  params.append("data","world");
  params.delete("src");
  params.toString();

• 没有模块化和压缩代码:UglifyJS2、node-cssmin
• ydk.config()配置出了些问题。并没把评论系统注册进ydk。
• 资源都是通过http引入的，导致了ios客户端评论系统挂掉的情况。
• 一些编码方面的规范
• 做事情的优先级

针对以上问题

针对以上问题，我自己配置了一个webpack，组件化进行移动端的页面开发。 webpack-jQuery-cli

学到的一些东西

• 以前习惯了在命令行里看eslint报错，没在编辑器配过。可以在编辑器配下eslint(其实webpack的loader也可以配eslint报错展示到控制台和命令行的。。。)
• 改host解决本地开发环境cookie获取不到的问题。
• debug的时候可以用一用抓包工具看看网络请求

一些建议

评论系统、ydk、rlog的文档可以稍微完善一下。词典评论系统文档上的comments.min.js的路径还是相对路径。