nemozhong / blog-nemo

• 👋 Hi, I’m @NemoZhong
• 👀 I’m interested in metal music, type moon, games, intersting coding
• 🌱 I’m currently learning echarts on react-native
• 💞️ I’m looking to collaborate on ...
• 📫 How to reach me ...

blog-nemo's Issues

搭建初始app项目遇到的问题

新架构搭建

js对象是无序的，那么 Object.keys 转成数组的顺序是由什么决定的

【工具】付费文章网页内容分享给没有会员的人来看

https://www.v2ex.com/t/999551

搭建离线npm仓库遇到的问题

pmndrs

去年学习threejs找到一个非常喜欢的库react-three-fiber，然后今天去了解了下这个团队pmndrs，发现了很多东西！！学习

Mac对文件夹大小写不敏感，提交代码时一定要注意大小写

问题：mac开发，本地启动，打包都正常，到k8s容器平台linux构建时报错，找不到xxx文件

This relative module was not found:

* ../Sichuan/RevisitRecordList in ./src/pages/.umi-production/router.js

 ERROR CODE  ERR_WEBPACK_MODULE_NOT_FOUND

 DETAILS 

问题原因：本地配置路由时没有注意大小写，因为mac文件夹大小写不敏感所以开发时没问题

// 实际文件在  /SiChuan 下
          {
            path: '/systemManage/revisit-manage/revisitRecordList',
            component: './Sichuan/RevisitRecordList',
            title: '回访记录列表',
          },

关于教育的学习

学习一下应该怎样教育（因为现在互联网上糟粕太多了，年轻人不可能远离互联网，没有正确的引导孩子太容易误入歧途了）

读Little React Things: Cleaning up dependencies笔记

• 通过useCallback包裹事件函数，依赖项为空，可以减少rerenders，事件函数中如果用到了state，通过setState函数方式获取最新的state处理

exp:
const handleClone = useCallback((todo) => {
    setTodos(currentTodos => [...currentTodos, cloneTodo(todo)])
}, [])

VSCode中批量替换正则用法

需要梳理一份文档，把路由文件route.ts和翻译文件zh-CN.js整理生成一份 菜单名+url的文件，写脚本替换文件修修改改后，发现中文没有加上引号，这个时候撤回又要丢到之前修修改改的工作，研究了下vscode替换中使用正则

TextArea录入的换行，渲染的时候保证样式一致

    <Row>
        <Col span={3}>消息内容:</Col>
        <Col>{content ?? '--'}</Col>
      </Row>

textArea录入的内容，换行，空格会带上\n和'' ，回显直接渲染结果是

增加样式后 whiteSpace: 'pre'

• ant的Col需要全部分配，容器才不会随着内容而改变
  第二个Col增加span={21}后，达到预期效果

开发中遇到的问题，及解决方案

学习prompt-engineering

关于child_process在mac上在windows上的区别

需求：公司项目以前一直没有使用eslint，导致有很多不规范的写法。之前项目安装了lint-staged和husky强制提交代码走eslint审查后，发现有大量的老文件存在lint写法错误，比如map当forEach来使用，只执行遍历功能。因此想写一个脚本，执行eslint后，自动把报错的行的map改为forEach

这里脚本想法是使用child_process子进程来跑eslint，然后把错误收集起来，再进行文件修改

一些问题解决方案

一些问题的搜索答案

【gitlab LFS upload】https://stackoverflow.com/questions/44822146/githeroku-repository-or-object-not-found

数据动态变化的树/列表，编辑时如果数据源在树/列表中被删了，回显个id怎么办

今天从同事那里听到一个比较好的办法
Select/Tree 组件，数据源构造一个name-id的字段(例如A), value取该字段，label取分割后的name，
这样就算数据源该项没有了，回显数据时，接口数据处理字段A为name-id，回显数据直接显示value也不会只有一个干憋憋的id来得好😂😂😂😂，如果回显是name-id，那么也表示该数据在数据源里已经不存在了

渐变色文字

2022年年终总结

复盘

• 2022 年规划：

✅ 学习 RN 开发 app，熟悉 app 调试方法，解决常见的 app 开发中的问题
✅ 学习 docker
✅ 结合公司业务拓展知识储备，提升技术广度，深度
✅ 写 blog 记录学到的东西
➕ 用 nodejs 写工具

❌ 每两个月做一次技术分享
❌ 沟通时尽量不携带个人主观情绪

• 分析原因

1. 用nodejs写工具是以前每次总结都会写的敷衍话，所以去年规划干脆不写了。今年公司业务开发基本完成了的情况下，上级问我有没有兴趣写一个自动生成初始化页面代码模板的小工具。本着相信自己的可能性这个做事观念，最后完成了一个基本的生成代码工具。这个过程中收货还是非常多的：

• 1. 以前对 nodejs 写东西总有一种畏惧心理：那么多库和方法，我咋知道用哪个？，现在觉得只要有明确的需求，注释梳理出来，用什么方法，用什么库，其实只是去检索的过程，只需要把每步注释功能实现即可。
• 2. 学到了 ES model 和 commonjs 库不能混用。
• 3. 存在的问题：需求不是自己主动发现的。这点和自己的性格有关，对于很多重复的工作，个人的可忍受程度是比较高的。作为一个技术人员，这点应该有所调整，毕竟主动做事比什么都不干，个人的成长差别太大了

2. 每两个月做一次技术分享没有达到预期，去年只做了 3 次，并且首次打破团队的每周做一次技术分享规则。当时的想法是最近业务很忙，比较累，下班不想准备技术分享，并且在是否每周做一次技术分享有点过于形式主义和没有规则约束，分享的积极性会更低，成年人的自驱能力很不靠谱这两个问题中思考技术分享最优方案，最终也没有想出来。后面理性分析了下，主要原因还是因为去年满 30 岁对个人现状的焦虑，沉不下心来。

3. 沟通尽量不带个人主观情绪，理性思考，情绪稳定，目前还是只做得到理性思考，个人的情绪不太容易藏得住。比如说：工作中，一直是以有问题解决问题为主要**，如果沟通过程中，接收到的信息判断为对解决问题没有任何帮助的“甩锅”、“推诿”的信息就会非常生气，需要向情绪稳定的同事学习，毕竟生气对解决问题也没任何用

---

收获

在公司的产品迭代和开发过程中，自己的各项能力有了明显的提高：

• 代码能力：相较于去年，第一次做数字化能源系统项目开发时，应该是燃气和班组模块的开发。当时由于项目代码熟悉程度不够，尽可能地采用了如果功能类似，就复用以前的组件代码进行的开发，结果由于涉及到了抄表日的概念，时间选择组件出现了很多问题，甚至加班改 BUG。之后进行了反思，后面的开发即使界面功能类似，我也不会直接拷贝代码，除非是自己非常认可的代码外，都需要自己重新构思优化，注入自己的**，而不是单纯的搬砖工。这样的开发模式让自己后续开发过程中 bug 越来越少，代码越来越工整，逻辑越来越清晰。

• 沟通能力：对比去年，沟通能力也有了很大的提高。无论是和产品沟通需求，或者遇到问题需要寻求同事帮助时，对问题的描述，现在都十分顺畅

• 问题解决能力：入职公司之前，我对自己的定位就是解决问题的能力比较强，入职公司工作后，才发现以前只着眼于代码的问题解决能力，由于自身知识体系比较零散，一些宏观的，技术解决方案方向的解决能力还是偏弱。随着工作中，知识体系的储备提高，参与团队基建：前端发版后页面自动刷新和生成初始页面代码模板工具，解决项目中存在的缓存问题，负责公司一些个性化项目三联屏、抽奖系统等，自身的问题解决能力提高很多

---

个人 2023 年规划

• 工作上扬长避短，做好本职工作，保持情绪稳定
• 主动发现基建需求，参考优秀案例，多写 node
• 持续学习前端 3d 可视化技术，分章节学习
• 积极分享，可以围绕工作中解决的某个问题学到的小知识点再展开
• 关注的前端大佬的技术分享不要落下
• 学习装修知识，装修尽量少被坑，把房子装了
• 积极找对象
  [新增]
• 学习pmndrs的工具集

关于老项目不支持可选链?.语法的解决办法

1. 编译：安装配置"@babel/plugin-proposal-optional-chaining"，如果是 "umi": "2.13.3" 以下的版本需要升级到"2.13.3"保证内部引用了该插件
2. 格式化： 升级prettier版本 -> >="^2.5.1"，eslint版本 -> >= "^7.5.0"
3. 坑： 更新prettier版本后需要重新打开vscode，否则脚本prettier --write可以通过，但是编辑器的formatOnSave还是不能识别?.

RN开发踩坑

带背景图的容器，内容实现滚动到顶部渐变消失

r3f学习笔记

最近几个月都在沉迷《八方旅人2》，由于最近比较空闲，想把“卡斯蒂”卡妈妈在海里的小船里漂荡的画面用react-three-fiber绘制出来。于是去网上找了个非常贴切的模型 作者只卖船，不卖海😭

使用【every】方法的时候特别要注意【空数组】的情况

空数组始终会返回true

Next router does not provide route guards to intercept jumps

Next JS: Warn User for Unsaved Form before Route Change

😂😂😂 the only way to cancle route change is THROW ERROR!

import Router from 'next/router'
import { useEffect } from 'react'
import { Modal } from 'antd'

const { confirm } = Modal

const usePrompt = (flag: boolean, message: string) => {
  useEffect(() => {
    const beforeRouteHandler = (url: string) => {
      if (Router.pathname !== url) {
        confirm({
          title: message,
          onOk: () => {
            Router.events.off('routeChangeStart', beforeRouteHandler)
            Router.push(url)
          },
          onCancel: () => {},
        })

        Router.events.emit('routeChangeError')
        throw `Route change to "${url}" was aborted (this error can be safely ignored). See https://github.com/zeit/next.js/issues/2476.`
      }
    }
    if (flag) {
      Router.events.on('routeChangeStart', beforeRouteHandler)
    } else {
      Router.events.off('routeChangeStart', beforeRouteHandler)
    }

    return () => Router.events.off('routeChangeStart', beforeRouteHandler)
  }, [flag, message])
}

export default usePrompt

关于写js代码时，es6语法有哪些？这个问题的实际应用😂

平时在写js代码时，无意识地基本上全在写es6+，只记得到数组的迭代式方法，class，promise，css3等是ES6语法。面试的时候也经常被问”ES6语法有哪些？“这种基础问题，总是没有引起重视，觉得背这种问题没有意义。今天关于这个问题，自己踩到一个坑差点爬不出来，记录下😂😂

mac装包的坑&安装python环境&启动python项目

ts问题

记录一些ts中遇到的问题，及一些type-challenges

一些非常好用的库

Soga!!!

yarn workspaces

浏览器(chrome)在nginx不设置缓存策略时的表现

公司一个比较老的项目出现过这样一个缓存问题：
时隔很久，项目发版后，访问项目地址，发现页面资源始终是老版本的内容😅😅！！该项目在其他页面登陆，然后跳转到该项目根路径/，路由做了重定向 /home的操作。访问根路径时，是上个版本的资源，重定向到/home后，刷新变为新版本的资源，url里删除/home，资源又变成老版本了。

先说解决方案：
nginx配置html文件走协商缓存，另外无奈之举，通知客户：这次更新需要清除浏览器缓存，以后就不需要了（to b项目的优势😌😌）

因为以前nginx没有配置cache-control,expires等缓存策略的字段，所以在不清除浏览器缓存的情况下，浏览器的缓存是否有效完全是由浏览器自己去判断了，这里比较好奇就去研究了一下（顺便水成下次技术分享主题）

感谢一位非常纯粹的同事的指路
从 MDN 上get到2个信息：

在不设置缓存策略的情况下

freshnessLifetime=(Date - Last-Modified) / 10
expirationTime = responseTime + freshnessLifetime - currentAge

PS：下面那个公式完全没看懂，currentAge通篇没有找到指的是啥，有点误入歧途了
freshnessLifetime=(Date - Last-Modified) / 10 这个才是浏览器默认缓存行为的核心

• freshnessLifetime 新鲜度，缓存是否有效
• Date 响应资源的时间。（如果是强缓存disk cache,Date指缓存的时间）
• Last-Modified 服务器更新资源的时间。（如果是强缓存，表示是该缓存记录的服务器更新资源的时间）

所以新鲜度实际上是浏览器判断资源是否稳定，如果服务器资源越久没有更新，说明这个文件越稳定，再次请求资源越应该使用缓存，过期时间也相对更久一点。比如说发版前去访问一个一年前没有访问过的，且没有设置缓存策略的老项目的资源，服务器响应的资源新鲜度为：（Date - Last-Modified ）/ 10 ，表示这个缓存有效时间要到1.2个月 (1年/10)才失效，期间，如果不清缓存访问资源。强缓存始终命中，即使发版了由于缓存有效，所以始终走强缓存。

另外普通刷新由于相当于浏览器给请求头加了cache-control:max-age=0，走协商缓存，所以刷新会返回新的资源。并且公司项目的根路径会重定向到/home，在/home刷新实际上是服务器拿叫home的资源，由于nginx配置了try_files字段，资源404时返回index.html，并且这份index.html不会更新根路径/下的index.html，浏览器认为属于不同的资源。所以理论上，如果用户手速很快，在访问根路径时，在重定向之前，如果执行了刷新，拿到新资源就会覆盖掉之前的缓存