Attack on Life ⚔️

SPA技术下，对于WEB前端路由，有两个选项HashRouter，BrowserRouter，两个选择，有利有弊，需要根据实际情况去选择，这里就总结下。

HashRouter vs BrowserRouter

1. 两种路由展示形式不同，HashRouter使用的URL哈希形式(比如https://1991421.cn#posts)来区分各个路由URL，而BrowserRouter使用的传统URL形式(比如https://1991421.cn/posts)来区分

2. BrowserRouter需要后台进行一定的设置，因为用户可能在某个URL下是可以执行浏览器刷新，这事服务端收到请求，那么需要确保该路由下，返回SPA的宿主页面，当然HashRouter不需要

   1 2 3

   app.get('*', function (req, res) { res.sendFile(path.join(__dirname + '/index.html')); });

3. HashRouter因为利用的URL Hash，假如页面内部有目录锚点，而目录锚点如果放在URL上就会造成额外的问题，比如这样一个URLhttps://1991421.cn/#posts/detail/1234567#comment如果想获取目录锚点comment，使用location.hash结果将是#posts/detail/1234567#comment，这种情况下只能文本匹配。

4. HashRouter地址如果是表单提交，本身hash部分是不会作为地址的一部分发出

结论

我们开发的网页需要运行在各种各样的浏览器下，而不同浏览器，不同版本对于网页解析都会有些许差异，如果是IE，就更麻烦。曾几何时，前端er聊起IE兼容就蛋疼，内心骂了IE多少次。

如何优雅的处理兼容性问题，是个固定的课题。现在对于这个问题已经有了相对系统化的方案来解决，这里就Mark下。

说明：场景不同，习惯不同，因此配置方式不唯一，这里以我个人的实践来说明，仅供参考。

browserslist

配置

项目根目录下创建.browserslistrc文件，根据需求写下目标浏览器范围，比如我这里配置如下

记得之前看过一篇文章《Github带来的不止是开源，还有折叠的认知》，文章意思就是不要被这些开源的框架，模块，占据了你的全部，不要只会CV，如果我们今天跟着ABC框架走，明天跟着EFG框架走，我们永远学不完，我们也永远不是真的懂。

如果说我们自己创建了一个框架，一个工具，那么这个创造过程中一定会遇到一系列的问题，而攻坚克难的这个过程会强化我们的能力与认知。

GitHub的好，不只是我们能从中免费拿到别人创造的东西，还有给予了我们机会去同样创造，贡献自己的东西给社区。

长久以来，我也不怎么贡献开源社区，核心原因就是懒。而2020年到现在1年多的时间，我有了些许的社区贡献，比如ADR，awesome-mac，IDEA插件，v2ray-docker，Alfred-workflows等。贡献花费了时间，但回报也很客观，比如自身的技术，比如结识了一些网友，比如英文书写的提高等等。总之开源贡献对自身有益。

那么如何贡献开源项目呢，这里Mark下开发流程。

如何贡献

一般更为标准的项目会有专门的文件介绍如何贡献，准确流程要以介绍为准，比如awsome-mac

这里介绍一般的操作流程，假设我只是个普通开发者，非项目管理员

最近后端项目中投入使用了SonarQube，响应他们的号召，我在前端也开始使用。随着使用的同时，也发现之前对于Sonar的认知有错，这里Mark下。

SonarQube VS ESLint

作为前端ESlint再熟悉不过了，ESLint本身确保了代码风格的一致，再加上我们的UT，之前认为不需要Sonar的存在，但当实际使用后发现SonarQube与ESLint有所不同。

1. ESLint仅仅是代码风格的检测，我们关注的是每次检测出现的问题，然后人工/自动修复问题
2. Sonar代码除了风格检测，还可以检测出一些写法上的问题即潜藏BUG，并且提供了趋势图，这样可以了解进展情况

由此可以确定，Sonar更强大丰富些，一定程度可以与ESLint互补，在大型项目及人员参差不齐的情况下，可以一定程度的为项目保驾护航，值得一试。

因为我司不提供JB License，但盗版又不想用，苦于囊中羞涩，因此一直使用家人的学生License，但这样做，每次临到期时还得麻烦别人，因此这个方案不愿意再搞。

了解JB对于开源项目开发有支持计划，可以免费申请全家桶License，于是就尝试申请下，果然搞定了，这里简单记录下申请过程。

License价值

首先了解下该license的具体福利

• 为期一年免费使用JetBrains IDE全家桶但不包括付费的插件，咨询等服务，比如AI Assistant插件需要自行付费订阅。到期可renew。

最近在开发中遇到了数组遍历次数不对的问题，原因是未初始化，由此发现数组遍历次数不见的与数组长度一致。这里就总结下这个坑。

举个例子

1
2
3
4
5
6
7

let array = [undefined, , 1, 2, 3];
     console.log(array[0]); // undefined
     console.log(array[1]); // undefined

     array.forEach((item, idx) => {
       console.log(item, idx);
     });

输出结果如下

框架类库极度流行，它们都提供了各种各样简单的方式来操作JS，也或者其他的语言技术。使用一时爽，更为可怕的是它们也会折叠一部分的认知。比如这里要说的内联JS实现事件绑定，在实际开发中确实不怎么使用，但不代表不会使用，且需要懂。

React中事件绑定

先说下React中的事件绑定，React帮我们包装了一些事情。

1. 比如事件绑定，我们使用onClick，原生JS是onclick，一个是驼峰，一个是纯小写，很好区分

2. React下比如一个列表我们循环增加事件绑定，不会造成性能的浪费，因为React最终还是会实现事件委托，当然写法上，还是不建议，每个单独的事件绑定，毕竟source code维护及调试也会是个问题

3. React下进行事件绑定，我们可以方便的拿到事件参数event，当然这个参数名字我们也可以自定义

   1 2 3 4 5

   <Button onClick={this.handleClickCancel}> <GlobalI18n.CANCEL /> </Button> private handleClickCancel = (e) => this.props.callback(e.target.id);

原生内联下的事件绑定

最近修复一个数据问题，其中用到了左连接，我的意识里还以为A左连接B，查询出的记录数量会是A的记录数，然而实际操作后发现认知严重错。

网上关于左连接的一张图

摘自网上的一张图，图确实没毛病，但我却产生了误解，我会认为记录数量依然是A表的记录数量。

这里举个例子来说明问题

很喜欢开源项目获得的成就感，近一年坚持做了几个开源项目，也收获了网友的一些Star，有些还加微信，提需求等，开源魅力也就在这里吧。

那么比如有人Star你的项目，能够及时收到电报通知会更好点，因为之前已做过NPM包发版通知，因此这个做起来也就简单了，但还是有些坑，这里Mark下。

配置

1
2
3
4
5
6
7
8
9
10

env:
  REPO_NAME: ${{ github.event.repository.name }}
steps:
      - name: Notify
        uses: appleboy/telegram-action@master
        with:
          to: ${{ secrets.TELEGRAM_TO }}
          token: ${{ secrets.TELEGRAM_TOKEN }}
          message: Someone stars **${{env.REPO_NAME}}** repository, see [here](https://github.com/${{github.repository}}).
          format: markdown

完整配置戳这里

Surge进行网络代理很方便，但比如其它设备也需要网络代理，比如互联网电视、Nintendo Switch，这时如何快速解决墙的问题呢，个人总结有以下两个办法。

这里以NS设备需要爬墙-发推举例

允许WI-FI连接，充当代理设置

1. 确保iPhone，NS连接同一个Wi-Fi网络即内网环境一致

2. 启动了Surge的iPhone开启允许Wi-Fi访问

3. NS上Wi-Fi设定代理，参数以Surge中提示的Wi-Fi IP，端口

4. NS尝试发推，翻墙成功

注意：使用Mac版Surge也可，这里是以iPhone为例