[技术周刊 v7] 安全三角区优化级联菜单体验

什么是ARTS打卡？

Algorithm 算法

• 101. 对称二叉树

  参考上期周刊中100. 相同的树解法，通过node.left和node.right进行比较

function isSymmetric(root: TreeNode | null): boolean {
    const isSameTree = (p: TreeNode | null, q: TreeNode | null): boolean => {
        if (!p && !q) {
            return true;
        }
        if (!p || !q) {
            return false;
        }
        if (p.val !== q.val) {
            return false;
        }
        return isSameTree(p.left, q.right) && isSameTree(p.right, q.left);
    }
    return isSameTree(root.left, root.right);
};

• 104. 二叉树的最大深度

  递归获取左右子树的最大深度

function maxDepth(root: TreeNode | null): number {
    if (!root) {
        return 0;
    }
    return Math.max(maxDepth(root.left), maxDepth(root.right)) + 1;
};

Review 英文阅读

Article:

• Better Context Menus With Safe Triangles — Smashing Magazine

Review:

级联菜单是一种常见的前端交互组件，鼠标在不同层级选项间进行移动交互，容易出现焦点丢失而收起选项的情况。早在2013年 Amazon 就提出了安全三角区的想法，将父级元素的点击位置和子级菜单的区域画成一个安全三角区，在此区域内报错正常级联菜单展开，超出区域则收起子级菜单。通过细节调整来优化组件交互，为用户带来优雅体验。

Tip 技术技巧

• 图片压缩

在前端页面，资源体积大小直接影响加载速度，尽可能压缩资源是有效的性能优化策略，这里推荐一个好用免费的在线工具：TinyPNG，支持WebP、JPEG、PNG类型的图片压缩，让图片资源更快的呈现！

Share 分享

• 好书推荐：《The Missing Readme》 / 《程序员的README》

就像这本书的名字所说，它是程序员遗失的一份工作README。我们经过代码编写这项能力学习后，接到一份Offer，开始作为程序员进行工作。学习项目、协作开发、1on1沟通等等事务迎面而来，没有一份有效的文档会让我们手足无措，这份README从如何接触老代码、进行Code Review、技术设计流程、代码测试、如何与老板共事、敏捷开发流程等方面，让我们成为一个职业的程序员 ：）