blog
blog copied to clipboard
huruji
红日初升，其道大光:sun_with_face::house_with_garden:请star或watch，不要fork
 ### Partial 将泛型 `T` 的所有属性变为可选: 实现为： ```ts type Partial = { [P in keyof T]?: T[P]; }; ``` 例子： ```ts interface IGoods { sku: string name: string price: number...
 现在前端有非常多的工具（webpack、rollup、eslint、prettier、husky、lerna、commitlint等等），这些工具都是为了优化提高前端的开发体验而诞生的。但是问题来了，这些工具有非常多的配置字段，基本靠记忆是搞不定的，所以很多情况都是前人写好，后人拷贝。但是本着不想成为成为拷贝工程师的原则，我辛辛苦苦看完了各个文档，写的时候却发现压根记不住那些配置字段，我的内心是崩溃的，说好的开发体验呢，有个锤子体验呀。。。  编写配置文件应该是能够智能提示字段，并且当我字段写错的时候是能够标红的，就像编写 ts 一样  很多前端工具都支持rc文件、`.json`、`.yaml`、`.yml`、`.js` 文件中编写配置项目，因为其实基本上都是使用了 [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) 这个库（或者有类似功能的库）。 如果配置文件是 `.ts` 文件的话是能够通过编写声明文件来约束和智能提示的，但是如果说配置文件还需要通过 tsc 来编译过去，这样就有点傻了。 **所幸的其实我们可以通过 jsdoc 注释来实现对 js 的类型约束。** 首先配置下 vscode 的设置，打开 setting，设置 `javascript.implicitProjectConfig.checkJs` 为true，可以通过可视化栏目，搜索 `checkjs`，勾选对应的选项：  或者直接在...
 这只是一篇笔记，如果想要了解详细内容，你应该看一手知识，也就是官方的文档，如果你只是想要简单了解，可以看这篇。 ADB 全称 [Android Debug Bridge](https://developer.android.com/studio/command-line/adb.html)，即安卓调试桥，通过 ADB 能够与模拟器实例或者是连接的安卓设备进行通信，可以通过它来调试安卓应用，做应用的自动化测试，搭建云测试平台等。 ## 安装 ```bash brew cask install android-platform-tools ``` 通过 USB 连接手机，打开手机的开发者选项（允许通过 USB 调试、通过 USB 安装应用），使用 `adb devices` 可以查看连接的设备  输出格式为 [serialNumber]...
推荐阅读以下文章： [https://www.mattzeunert.com/2016/02/14/how-do-source-maps-work.html](https://www.mattzeunert.com/2016/02/14/how-do-source-maps-work.html) [https://github.com/wayou/wayou.github.io/issues/9](https://github.com/wayou/wayou.github.io/issues/9) [https://juejin.im/post/5d0790996fb9a07f0052dbbb](https://juejin.im/post/5d0790996fb9a07f0052dbbb) 读完以上文章大概可以了解到，sourcemap 的使用和相应字段的含义，如何从设计的角度逐步优化 sourcemap ，在某些情况下打断点失败的原因等 如果 sourcemap 的知识对你很重要，请阅读 sourcemap 的标准草案 [https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#](https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#) 你也可以加入对应的 google group ，[https://groups.google.com/forum/#!forum/mozilla.dev.js-sourcemap](https://groups.google.com/forum/#!forum/mozilla.dev.js-sourcemap) 以最简单的例子为例，文件内容仅仅有一个输出： ```js console.log(123) ``` 通过 `webpack` 编译打包后，内容如下： ```js !function(e){var t={};function n(r){if(t[r])return t[r].exports;var...
 -- ## list diff 在上篇文章中，已经基本可以完成视图的更新了，其实就目前来说，对于一个数组list，如果只是对数组进行 `push` 和 `pop` 来说，目前已经完成的很好了。 **每次更新的时候可以打开开发者工具选择 Element 面板，看到每次操作影响的DOM，影响的DOM会存在闪动的效果**。但是考虑一下数组移动的情况：  如将 [1,2,3,4] 修改为 [2,1,4,3]，如果你的这些 List 结构一致，可能仅仅是更新文本内容，但是如果内部可能会因数据的不同渲染不同的组件，那么这个时候甚至需要重新 tear down 所有的旧节点，然后再挂载新节点，也就是，create 2，delete1，create1，delete2，依次类推。同理如果是在中间插入也就会出现这种影响。看到这里，相信不会再有虚拟DOM比DOM操作快的这种谬误了，本质上来说，如果真的操作dom，肯定会是移动1或者2，再移动3或者4的，这才是最快的方法。 那么现在的问题就在于如何记录对应操作（增、删、移）？对于增删，相对来说比价简单， React 聪明地通过记录一个 `LastIndex` 的索引，目的就是只有大于 index...
**ReferenceError 是作用域判别失败，TypeError 是作用域判断成功，对结果的操作非法或不合理** + RHS：right-hand side + LHS：left-hand side > 如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出 ReferenceError 异常。值得注意的是，ReferenceError 是非常重要的异常类型。 相较之下，当引擎执行 LHS 查询时，如果在顶层（全局作用域）中也无法找到目标变量， 全局作用域中就会创建一个具有该名称的变量，并将其返还给引擎，前提是程序运行在非 “严格模式”下。 “不，这个变量之前并不存在，但是我很热心地帮你创建了一个。” ES5 中引入了“严格模式”。同正常模式，或者说宽松 / 懒惰模式相比，严格模式在行为上 有很多不同。其中一个不同的行为是严格模式禁止自动或隐式地创建全局变量。因此，在 严格模式中 LHS 查询失败时，并不会创建并返回一个全局变量，引擎会抛出同...
这一年陆陆续续、跌跌撞撞看过一些实现 react 的文章，但是还没有自己亲自动手过，也就谈不上深入理解过，希望能够通过代码和文字帮助鞭策自己。 ## jsx 语法 在 React 中一个 Node 节点会被描述为一个如下的 js 对象： ```js { type: 'div', props: { className: 'content' }, children: [] } ``` 这个对象在 React 中会被 `React.createElement`...
 ## 使用 `if else` ```jsx import React from 'react' interface Feed { name: string price: string } const FeedList: React.FunctionComponent = props => { const { feeds } =...
大多数时候，是这样使用 React 组件的：  通过显示地修改传递给组件的 `props` 来改变组件的状态（显隐、颜色、内容等），这在大多数时候非常好用，并且这就是 React 的设计哲学，这属于声明式调用，但考虑一下我们经常用到的弹框组件（toast、modal、loading），因为弹框组件会被经常调用，并且可能同时存在多个实例，这样就需要维护多个props的状态，同时还需要手动修改父组件的 state 来控制显隐，这是非常繁琐的。 类似于 antd 的message 的使用方式 `message.info('This is a normal message')` ，antd 称其为全局提示组件。 这种调用方式就是**命令式调用**，这种调用方式非常类似于以往 jQuery 时代的js库，好处在于不再需要不断地维护 组件 的状态，这对于 `toast`、`modal`、`loading` 来说非常有用。 其实设计这样一个组件并不难，其核心在于主动调用...
## cover-view 1. 不支持背景图片  2.wufa无法覆盖textarea的placeholder  3.显示隐藏时有时上下闪屏瞬移  4.可以覆盖textarea中输入的文字，但无法覆盖emoji  5.不支持设置阴影，不支持伪类 小程序：   H5: 