云极客工具开发日志

最后更新于2020/6/2

#写在前面

这篇博客记录我的 ygktool 开发历程。

#缘起

大概是19年7月份的时候，那时我已经厌倦了停留在html和css无脑拼装的层次上，希望能向前端大神更近一步，加之一直追随的前辈也有自己的（很强的）工具箱，就想到了做工具箱的点子上。

#志向

~~至少在中国有和一个木函一样的影响吧？~~

能被别人的文章推荐到。譬如知乎

#历程

2020年二月份之前，一直都是传统的php和jq架构。为了营造出SPA的效果还死磕iframe. 没想到视觉效果还不错。

2020年二月之后开始接触NPM，因为之前已经有了react基础，很快就用Create-react-app搭建了ygktool pro。紧接着开始了移植工作，移植的过程十分枯燥（当时没用vscode都得手动格式化代码）。很快，pro成为了正式版，从此告别php + jquery。

#技术栈

感谢这些优秀的库/框架。另外一些小规模使用的库没有列出。

Create-react-app
Typescript
Sass
MDUI
Express

#技术细节

#使用npm link时Hook报错

使用npm link测试UI库时，如果组件使用了Hook就会报错。在Github 关于 hook的issue下找到了解决方案。问题原因是两个库使用各自的React依赖。解决方法是将app的react链接到UI库的react下。

    npm-link-shared ./node_modules/mdui-in-react/node_modules . react && npm start

#无声明文件的类引用

gif.js这个库作者没有发布声明文件，只好自己添加模块。在react-app-env.d.ts中添加

declare module 'gif.js' {
    class GIF {
        constructor(config);
    }
    export = GIF;
}

#检测设备的夜间模式

不要遗漏查询串的括号！

window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

#React事件池

在开发文件树工具时发现了一个有趣的事

    for (var i = 0; i < e.target.files.length; i++) {
        var freader = new FileReader();
        freader.readAsDataURL(file);
        console.log(e.target.files)// ok
        freader.onload = fe => {
            console.log(e.target.files)// error!
        }
    }

循着控制台的提示查了官档：

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. such, you cannot access the event in an asynchronous way. SyntheticEvent 是合并而来。这意味着 SyntheticEvent 对象可能会被重用，而且在事件回调函数被调用后，所有的属性都会无效。出于性能考虑，你不能通过异步访问事件。

这下就明白了，只要在回调函数之前用变量保存事件属性就可以在回调里使用了

#忽略隐式类型转换而浪费大把时间

开发设置页面时，列表组件会返回选中项目的下标，而设置业务函数没有值传入就会退出。

if (!name || !value) return originSetting

这样写的话，如果value为0也会退出...

#解决方案

if (!name || !value && value !== 0) return originSetting

ECMA2020新特性有对类似问题的解决方案

let number = 0
let myNumber = number ?? 7 // => 0

#思考

END