Attack on Life ⚔️

记得之前看过一篇文章《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，于是就尝试申请下，果然搞定了，这里简单记录下申请过程。

更新

目前JB对于开源项目的审核门槛儿提高，如果不是社区具有影响力的项目，审核通过率会降低。

Over the past few years, our Open Source Program has helped numerous projects thrive. As JetBrains has grown, we’re evolving the program to focus on building deeper collaborations with a smaller group of projects that broadly impact the developer community and the open-source ecosystem.

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

举个例子

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);

原生内联下的事件绑定