前端 ARTS 打卡计划（五）。

• 前端ARTS打卡计划（一）
• 前端ARTS打卡计划（二）
• 前端ARTS打卡计划（三）
• 前端ARTS打卡计划（四）
• 前端ARTS打卡计划（五）
• 前端ARTS打卡计划（终章）

ARTS 打卡计划

第四十一周(2021.01.11-2021.01.17)

• Algorithm：

  • 905. 按奇偶排序数组
  • 1684. 统计一致字符串的数目
  • 1704. 判断字符串的两半是否相似

• Review:

• Tip：

  • 最简单的解决精度问题：0.55 * 100 = 55.00000000000001 ，产生精度问题，改为0.55 * 1000 / 10（乘以可以抹掉小数位数再多一位的数，然后除以10）；
  • 页面禁止复制怎么办：设置 -> 隐私设置和安全性 -> 禁用JavaScript
  • Microformats：Microformats，翻译为微格式，是 HTML 标记某些实体的小模式，这些实体包括人、组织、事件、地点、博客、产品、评论、简历、食谱等。它们是在 HTML 中嵌套语义的简单协议，且能迅速地提供一套可被搜索引擎、聚合器等其他工具使用的 API。microformats的使用非常简单，它只使用标签的class属性作为载体，使用词典中的术语标记该标签的语义（语义化）。Microdata 属于 WHATWG（网页超文本应用技术工作小组：Web Hypertext Application Technology Working） HTML 规范，它并不是标准，但这是一个很典型的语义化发展和应用尝试。
  • 垂直水平居中总结

• Share：

  • 从打字机效果的 N 种实现看JS定时器机制和前端动画
  • 阮一峰 —— 尾调用优化
  • 10 分钟理解 BFC 原理
  • 简单介绍4种限流算法！（固定窗口计数器算法、滑动窗口计数器算法、漏桶算法、令牌桶算法）

• 心得感悟

  • 生意其实是为了成全别人，顺便成全了自己。

第四十二周(2021.01.18-2021.01.24)

• Algorithm：

  • 65. 有效数字
  • 989. 数组形式的整数加法
  • 面试题 16.20. T9键盘
  • 1338. 数组大小减半

• Review:

• Tip：

  • git 分支合并时如何忽略某个文件【译文】 | How to make Git preserve specific files while merging：git在merge分支时，有一个默认的merge驱动，这个驱动会去检查每个文件的每一行，如果按照一定规则发现两个分支的同一个文件有不同，那么认为两个分支都对这个文件做了修改，会merge两个文件，此时有可能产生冲突；那么如果我们自定义一个merge驱动，在里面定义一些不会被检查的文件，那git就会直接跳过这些文件，因此就不会merge了。
  • removeEventListener() 方法：

    //移除 addEventListener() 方法添加的 "mousemove" 事件:
    // 向 <div> 元素添加事件句柄
    document.getElementById("myDIV").addEventListener("mousemove", myFunction);
    // 移除 <div> 元素的事件句柄
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
    
    // 只有 capture 配置影响 removeEventListener(). options 不影响，详见MDN
    element.addEventListener("mousedown", handleMouseDown, true);
    element.removeEventListener("mousedown", handleMouseDown, false);     // 失败
    element.removeEventListener("mousedown", handleMouseDown, true);      // 成功
    

    • removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。
    • 注意： 如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如上实例所示 (myFunction)。
    • 匿名函数，类似 “document.removeEventListener(“event”, function(){ myScript });” 该事件是无法移除的。
    • MDN - EventTarget.removeEventListener
  • stopPropagation与stopImmediatePropagation的区别
  • 事件池 与 合成事件：
    • 事件池仅适用于 React 16 及更早版本、React Native。Web 端的 React 17 不使用事件池。
    • 从 v17 开始，e.persist() 将不再生效，因为 SyntheticEvent 不再放入事件池中。
    • 如需注册捕获阶段的事件处理函数，则应为事件名添加 Capture。例如，处理捕获阶段的点击事件请使用 onClickCapture，而不是 onClick。
    • 你可以使用 currentTarget 和 relatedTarget 来区分聚焦和失去焦点是否来自父元素外部。
  • JavaScript中判断函数是new还是()调用
  • JWT 身份认证优缺点分析以及常见问题解决方案

• Share：

  • Git中submodule的使用
  • React v17.0 RC 版本发布：没有新特性

  第四十三周(2021.01.25-2021.01.31)

• Algorithm：

  • 215. 数组中的第K个最大元素
  • 347. 前 K 个高频元素
  • 1736. 替换隐藏数字得到的最晚时间

• Review:

• Tip：

  • 关于 rel=”noopener noreferrer”的作用 | rel=noopener/noreferrer简介

    <a href="http://other.site" target="_blank" rel="noopener noopener">LINK</a>
    

  • DNSSec：DNS做为互联网早期产物，使用无连接的UDP协议虽然降低了开销也保证了高效的通信，但是没有考虑安全问题。由于DNS使用目的端口为53的UDP明文进行通信，DNS解析器识别是自己发出的数据包的唯一标准就是随机的源端口号，如果端口号匹配则认为是正确回复，而不会验证来源。所以也带来了许多DNS安全问题，如DNS欺骗，DNS Cache污染，DNS放大攻击等。针对DNS安全问题，业界提出了DNSSec(Domain Name System Security Extensions，也叫”DNS安全扩展”)机制，使用密码学方法解决DNS安全问题，让客户端对域名来源身份进行验证，并且检查来自DNS域名服务器应答记录的完整性，以及验证是否在传输过程中被篡改过，但不保障DNS数据加密性和可用性。DNSSEC依靠数字签名来保证DNS应答报文的真实性和完整性。简单来说，权威服务器使用私钥对资源记录进行签名，递归服务器利用权威服务器的公钥对应答报文进行验证。如果验证失败，则说明这一报文可能是有问题的。
  • webpack中require.ensure()实现按需加载

    module.exports={
      // 需要配置chunkFilename,和publicPath。
      // 按需加载单独打包出来的chunk是以publicPath为基准来存放的，chunkFilename:[name].js这样才会最终生成正确的路径和名字
      entry:'./js/entry.js',
      output:{
          path:path.resolve(__dirname,"./dist"),
          filename:'js/a.bundle.js',
          publicPath:"./",
          chunkFilename:'js/[name].js'
      }
    }
    

    • webpack中require.ensure()实现按需加载
    • require.ensure实现webpack按需加载
  • 一图胜千言, 何况是四图? 图解DVA：值得多读读
  • Monorepo(monolithic repository) 和 Multirepo，这两者都是管理组织代码的方式，顾名思义 monorepo 就是把所有的相关项目都放在一个仓库中（比如 React, Angular, Babel, Google…），multirepo 则是按模块分为多个仓库。
    • monorepo 它是一种管理 organisation 代码的方式，在这种方式下会摒弃原先一个 module 一个 repo 的方式;
    • 取而代之的是把所有的 modules 都放在一个 repo 内来管理。目前诸如 Babel, React, Angular, Ember, Meteor, Jest 等等都采用了 Monorepo 这种方式来进行源码的管理。
    • Lerna 它是基于 Monorepo 理念在工具端的实现【Lerna是Babel自己日用并开源的多模块管理工具，用来帮助维护monorepo】。
    • Why is Babel a monorepo?
    • monorepo 新浪潮 - introduce lerna
    • REPO 风格之争：MONO VS MULTI
  • 支付宝前端应用架构的发展和选择
  • this.setState中的第一个参数除了可以写成一个对象以外，还可以写成一个函数，函数中第一个值为prevState，第二个值为prePprops：this.setState((prevState,prop)=>({})) ；
  • Immutable Data：Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。
  • 函数参数

    const funC = ({a}, {b}) => {
        console.log(a,b) // 1 2
    };
    funC({a:1},{b: 2})
    

  • Svelte 官方文档：通过静态编译减少框架运行时的代码量
    • Svelte 是一个前端 UI 框架。
    • 特性：
      • 解决网站的臃肿危机。Svelte 将你的模板变成快速、轻量级的 vanilla JavaScript。
      • 简单易用。使用你掌握的语言，从可组合、易写的模块中构建应用。
      • 快速而又坚固。编译时静态分析确保浏览器不再需要更多的工作。
    • Svelte——不止于快
  • queueMicrotask：
    • queueMicrotask - MDN
    • 使用 queueMicrotask 来执行微任务

• Share：

  • lerna入门指南
  • DvaJS
  • 一图胜千言, 何况是四图? 图解DVA
  • 使用 Dva 开发复杂 SPA
  • Dva 源码解析
  • React Loadable 简介
  • Immutable 详解及 React 中实践
  • 深入探究immutable.js的实现机制（一）
  • 深入探究immutable.js的实现机制（二）
  • Chrome 88 新功能解读
  • 可以用WebRTC来做视频直播吗？
  • 2020 年的 JavaScript 后起之秀
  • 为什么要选择 Tailwind？
  • 精读《snowpack和vite》
  • Svelte——不止于快

第四十四周(2021.02.01-2021.02.07)

• Algorithm：
  • 剑指 Offer 64. 求1+2+…+n
  • 535. TinyURL 的加密与解密
  • 643. 子数组最大平均数 I
  • 1282. 用户分组
  • 1561. 你可以获得的最大硬币数目

• Review:

• Tip：

  • 移除umi项目中的momentjs
    • 优化方案一：
      • umi项目配置ignoreMomentLocale：momentjs Gzipped 从 79.83kb 到 20.02kb；
    • 优化方案二：
      • dayjs（2kb）、miment（1kb）替换moment（200kb）
        • 移除国际化
        • npm run i18n-remove;（umi - 不需要国际化）
        • 手动删除 src/components/SelectLang 、 src/locales 、 src/pages/user/login/locales 文件夹;
        • 从 src/components/GlobalHeader/RightContent 和 src/layouts/UserLayout 文件中移除关于 src/components/SelectLang 组件的引用。
      • 移除Antd时间控件的moment：Replace Moment.js in Ant Design (Antd) with Day.js
        • Replace Moment.js in Ant Design (Antd) with Day.js
        • 替换 Moment.js
        • antd-dayjs-webpack-plugin | 源码
        • webpack-chain文档

          // 在umi项目里面怎么配置？ #47 https://github.com/ant-design/antd-dayjs-webpack-plugin/issues/47#issuecomment-783229661
          // 源码中是通过alias别名的方式实现的
          const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
          export default {
            // ...
            chainWebpack(config) {
                config.plugin('antd-dayjs-webpack-plugin').use(AntdDayjsWebpackPlugin);
              // 如果是antdv3，使用下面的配置，antdv3不预设会出现https://github.com/ant-design/antd-dayjs-webpack-plugin/issues/57的现象
              // config.plugin('antd-dayjs-webpack-plugin').use(AntdDayjsWebpackPlugin, [{ preset: 'antdv3' }]);
            },
            // ....
          }
          

      • dayjs + antd-dayjs-webpack-plugin方案：Gzipped 5.73kb

• Share：

  • 观察者模式 vs 发布订阅模式
  • 发布订阅模式与观察者模式
  • Tree-Shaking性能优化实践 - 原理篇
  • Tree-Shaking性能优化实践 - 实践篇
  • tree-shaking不完全指南
  • 你的Tree-Shaking并没什么卵用
  • Webpack Tree shaking 深入探究
  • Webpack 中的 sideEffects 到底该怎么用？
  • 【干货】Chrome插件(扩展)开发全攻略 | 博客园

第四十五周(2021.02.08-2021.02.14)

• Algorithm：

  • 303. 区域和检索 - 数组不可变
  • 1441. 用栈操作构建数组
  • 剑指 Offer 57. 和为s的两个数字
  • 1694. 重新格式化电话号码

• Review:

• Tip：

  • CMS是什么，能做什么，怎么用呢？：CMS是英语Content Management System的缩写，按英语的字面翻译就是内容管理系统，顾名思义，它主要是为了方便发布网络内容而存在的一体化Web管理系统。
  • Gridsome
    • gridsome中文教程
    • gridsome – 初识
    • 什么是JAMstack？
  • 前端UI组件及文档管理：
    • Storybook | Learn Storybook
      • StoryBook 使用指南
      • 使用storybook管理React组件
      • Vue项目中接入 StoryBook 展示组件示例
      • Storybook for vue - 前端ui组件管理神器
    • React Styleguidist
      • demo
      • UCloud React Components
    • react-docgen

• Share：

  • markdown-it 原理浅析

第四十六周(2021.02.15-2021.02.21)

• Algorithm：

  • 284. 顶端迭代器
  • 922. 按奇偶排序数组 II
  • 1710. 卡车上的最大单元数
  • 剑指 Offer 53 - I. 在排序数组中查找数字 I
  • 剑指 Offer 21. 调整数组顺序使奇数位于偶数前面

• Review:

• Tip：

  • 使用code命令在同一编辑器界面打开不同项目（同一工作区）：code -a .
  • 详细介绍git clone –depth=1的用法
  • git clone几种可选参数的使用与区别
  • {JSON} Placeholder：快速搭建RESTful API接口
  • Vue 3 Template Explorer
  • axios拦截器封装http请求，刷新token重发请求
  • Snowpack
    • Getting Started with React
    • app-template-react
  • JS实现页面全屏功能 | js实现f11的全屏效果
  • try-catch-global.js：AST 自动插入try catch脚本，通过使用AST技术，自动使用自定义全局异常处理程序包裹代码。

• Share：

第四十七周(2021.02.22-2021.02.28)

• Algorithm：

  • 136. 只出现一次的数字
    • n ^ n === 0 且 n ^ 0 === n
    • 并且，异或遵循交换律
    • [4,1,2,1,2] 将数字全部异或运算一遍：
    • 4 ^ 1 ^ 2 ^ 1 ^ 2 => 1 ^ 1 ^ 2 ^ 2 ^ 4 => 0 ^ 2 ^ 2 ^ 4 => 2 ^ 2 ^ 4 => 0 ^ 4 => 4
    • 出现 2 次的数字在异或中都抵消了，最后得出只出现 1 次的数
  • 剑指 Offer 56 - I. 数组中数字出现的次数
  • 1716. 计算力扣银行的钱

• Review:

• Tip：

  • form表单提交方式
  • git撤销commit
    • git撤销commit但未push的文件
    • git reset –hard HEAD^后显示more?的解决方案
  • 理解 CRLF，LF
  • css-loader中importLoaders的理解：importLoaders 选项允许你配置在 css-loader 之前有多少 loader 应用于@imported 资源。详情。
  • Object.getPrototypeOf()
  • react-app-rewired customize-cra
    • 使用react-app-rewired和customize-cra 个性化配置
    • react学习：react-app-rewired customize-cra 配置装饰器

• Share：

  • React Context
    • React Context(上下文) 作用和使用 看完不懂 你打我
    • React系列——React Context
      • 在react-redux、React-router中的使用
      • 旧版React context的局限性
        1. 在组件树中，如果中间某一个组件 ShouldComponentUpdate returning false 了，会阻碍 context 的正常传值，导致子组件无法获取更新。
        2. 组件本身 extends React.PureComponent 也会阻碍 context 的更新。
  • 没有用到React，为什么我需要import引入React?
    • 本质上来说JSX是React.createElement(component, props, …children)方法的语法糖。所以我们如果使用了JSX，我们其实就是在使用React，所以我们就需要引入React。
    • React17 通过新的转换，您可以使用JSX而不导入React。
  • getDerivedStateFromProps
    • 拥抱react新生命周期–getDerivedStateFromProps
      • 当外部多个属性在很短的时间间隔之内多次变化，就会导致componentWillReceiveProps被多次调用。这个调用并不会被合并，如果每次内容都会触发异步请求，那么可能会导致多个异步请求阻塞。
    • React16新的生命周期函数getDerivedStateFromProps的使用，你也许并不需要派生状态【译】
  • 《记忆化技术memoize-one》
  • React17新特性：启发式更新算法
  • 再谈Chrome的最小字体12px限制
  • 为什么现在我更推荐 pnpm 而不是 npm/yarn?
  • Yarn 的 Plug’n’Play 特性
  • npm和yarn的区别，我们该如何选择？

第四十八周(2021.03.01-2021.03.07)

• Algorithm：

  • 剑指 Offer 24. 反转链表
  • 222. 完全二叉树的节点个数
  • 589. N 叉树的前序遍历

• Review:

• Tip：

  • 浏览器市场份额
  • 纯JS services方法生成【nodejs生成，直接写入文件参考第四十四式：不做工具人 —— 使用 nodejs 根据配置自动生成文件】

    [{
      filename: 'modifyIDCPriceUnitInfo.js',
      url: '/sku/rest/v1/idc/price/modifyIDCPriceUnitInfo',
      comment: '修改IDC计价单位',
    },
    {
      filename: 'queryIDCPriceUnitInfoListByPage.js',
      url: '/sku/rest/v1/idc/price/queryIDCPriceUnitInfoListByPage',
      comment: '按照展示名称或原料种类查询IDC计价单位',
    },
    {
      filename: 'batchUpdateIDCPhysicalInfos.js',
      url: '/sku/rest/v1/idc/physical/batchUpdateIDCPhysicalInfos',
      comment: '批量更新IDC物理机房-商务负责人、供应商、签约主体信息',
    },
    {
      filename: 'queryIDCPhysicalInfoListByPage.js',
      url: '/sku/rest/v1/idc/physical/queryIDCPhysicalInfoListByPage',
      comment: '分页查询IDC物理机房信息',
    }].map(item => {
    return new Function(`    // ${item.comment} export
    async function ${item.filename}(params) {
      return request('${item.filename}', {
        method: 'post',
        data: params,
      });
    }`.replace(/\.js/g, ''))
    });
    // 若 使用new Function生成函数（需去掉export，否则报错），然后可以在Sources面板拷贝函数
    // 如 不使用new Function，则可直接从数组中拷贝字符串形式的函数体
    // 生成示例：
    // 修改IDC计价单位 export
    async function modifyIDCPriceUnitInfo(params) {
      return request('modifyIDCPriceUnitInfo', {
        method: 'post',
        data: params,
      });
    }
    

  • img元素中的crossorigin属性
  • 前端Jquery-Ajax跨域请求，并携带cookie
  • 前端水印
    • Nodejs给图片批量添加水印 | node-images
    • Web前端水印方案
    • 前端水印生成方案(网页水印+图片水印) | jimp | gm
    • 不能说的秘密——前端也能玩的图片隐写术

      (function () {
        // canvas 实现 watermark【基础方案】
        function __canvasWM({
          // 使用 ES6 的函数默认值方式设置参数的默认取值
          // 具体参见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters
          container = document.body,
          width = '200px',
          height = '150px',
          textAlign = 'center',
          textBaseline = 'middle',
          font = "20px microsoft yahei",
          fillStyle = 'rgba(184, 184, 184, 0.8)',
          content = '请勿外传',
          rotate = '30',
          zIndex = 1000
        } = {}) {
          var args = arguments[0];
          var canvas = document.createElement('canvas');
      
          canvas.setAttribute('width', width);
          canvas.setAttribute('height', height);
          var ctx = canvas.getContext("2d");
      
          ctx.textAlign = textAlign;
          ctx.textBaseline = textBaseline;
          ctx.font = font;
          ctx.fillStyle = fillStyle;
          ctx.rotate(Math.PI / 180 * rotate);
          ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
      
          var base64Url = canvas.toDataURL();
          const watermarkDiv = document.createElement("div");
          watermarkDiv.setAttribute('style', `
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:${zIndex};
            pointer-events:none;
            background-repeat:repeat;
            background-image:url('${base64Url}')`);
      
          container.style.position = 'relative';
          container.insertBefore(watermarkDiv, container.firstChild);
        }
        window.__canvasWM = __canvasWM;
      })();
      // 调用
      __canvasWM({
        // content: '自定义水印！'
      });
      

• Share：

  • 记一次 GraphQL 真正的详细入门：原生、koa2、的实战分享会
  • 前端浏览器动画性能优化
  • Event Loop
    • 进程与线程的一个简单解释
    • 什么是 Event Loop？
    • JavaScript 运行机制详解：再谈Event Loop
    • 面试官：前端跨页面通信，你知道哪些方法？
    • 前端路由的两种模式：hash模式和 history模式

第四十九周(2021.03.08-2021.03.14)

• Algorithm：

  • 21. 合并两个有序链表
  • 94. 二叉树的中序遍历
  • 剑指 Offer 25. 合并两个排序的链表

• Review:

• Tip：

  • 【译】如何在React hooks useEffect中使用异步函数
  • webpack loader 的三种使用方式：配置、内联、CLI；

• Share：

第五十周(2021.03.15-2021.03.21)

• Algorithm：

  • 141. 环形链表
  • 142. 环形链表 II
  • 143. 重排链表
  • 144. 二叉树的前序遍历

• Review:

• Tip：

  • Http option 请求是怎么回事：跨域的复杂请求需要preflight request（预检）
  • http跨域时的options请求
  • Promise.done()，Promise.finally()
  • Mac 使用git出现xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools)：终端输入xcode-select --install并按照提示进行安装即可。
  • 使用vscode编写markdown的一些小插件：Markdown Preview Enhanced插件、Maridown pdf插件（将.md转换为其他格式，如html、png、pdf等）

• Share：

  • 前端low-code意味着什么？
  • 低代码，要怎么低？和低代码有关的 10 个问题
  • ES6 class与ES5 function区别及联系
  • 关于js中function和class的内在关系及区别的理解
  • 慎用JSON.stringify