Better

本次打卡值得关注的内容有，算法题为判断两颗二叉树是不是相同，主要考察递归，Review 主要内容为 Practical Ways to Write Better JavaScript，本周 Tips 内容为工作上踩到的一些坑的总结，主要有 angular material 弹窗自动获取焦点，控制台显示 DOM 对象，TS 中 class 和 interface 的选择，以及最近使用 React 自己踩的两个坑，分享的内容为 provisional headers are shown 与跨域传递 cookie

Algorithm

本周继续完成 easy part，名为相同的数，给定两个二叉树，判断是否相同，主要考察递归，代码如下

var isSameTree = function(p, q) {
    if(isNull(p) && isNull(q)) {
       return true;
    }
    if((isNotNull(p) && isNull(q)) || (isNull(p) && isNotNull(q))) {
        return false;
    }
    if(p.val !== q.val){
        return false;
    }
    return isSameTree(p.left, q.left) && isSameTree(p.right, q.right);
};

var isNotNull = function(o) {
    return o !== null;
}

var isNull = function(o) {
    return o === null;
}

function TreeNode(val) {
    this.val = val;
    this.left = this.right = null;
}

Review

本周阅读的文章来自 JavaScript Weekly 推荐，内容为 Practical Ways to Write Better JavaScript。

• 使用 TypeScript
  • 类型安全
  • 重构大型应用成为可能
  • 团队沟通更简单
• 使用现代化特性
  • async await
  • let const
  • 箭头函数
  • 扩展运算符
  • 模板字符串
  • 对象解构
• Lint Your Code and Enforce a Style
  • eslint：AirBNB style
  • prettier
• Test Your Code
  • Test Driver - Ava，其他可选： Jest, Mocha, Jasmine
  • Spies and Stubs - Sinon
  • Mocks - Nock
  • Web Automation - Selenium

Tip

最近开发碰到一个奇怪的问题，使用 angular/material 打开一个 dialog 后，组件里的 input 总是自动获取焦点，但这并不是我需要的。原因是因为 dialog 有一个 autoFocus 属性默认值是 true，可能是因为组件开发者觉得这样很符合用户操作习惯吧，如果不需要，将其值为 false 即可

不知道你是否会困惑，在控制台使用 console.log 打印出来的是 DOM 结果，但通常我们需要的是 DOM 对象的信息，此时请使用 console.dir

typescript class interface 选择

由于 typescript 的宗旨是兼容 JS，运行时要擦除所有类型信息，因此 interface 在运行时是会被完全消除的。而 class 经过编译后，在运行时依然存在。因此如果要声明的类型只是纯粹的类型信息，只需要声明 interface 即可。

React 踩的两个小坑

• antd design 中 upload 组件默认不携带 cookie
• 自定义属性不要定义成 key，否则问题找的你头皮发麻

Share

本周分享的内容同样来自最近开发中关于 provisional headers are shown 一点困惑，以及如何跨域传递 cookie：provisional headers are shown 与跨域传递 cookie