我经常听别人说，开发者要想提升自己的能力，阅读代码是一个很好的方法。

 因此我也下定了决心，阅读那些写的好的JavaScript库，尽可能多的从中学习经验。

 之所以选择Redux，是因为它有着相对较小的代码库。

 通过开源项目学习

 每当有新的开发者问我如何才能迅速提高的时候，我的回答总是让他们通过真正的项目去学习。

 当你真正的接触到一个项目的时候，你会不断的鞭策自己。当你在遇到问题的时候，你的责任心也会让你继续下去，不会中途放弃。

 但是如果整个项目只有你自己参与，你也会遇到一些问题。你将无法注意到自己的坏习惯，无法得到别人的意见和建议，无法接触到那些你不熟悉的框架和工具。在遇到困难的时候，也没有人能为你提供帮助。

 在可能的时候，我推荐你和其他开发者一起合作。

 和其他人合作（如果你幸运的话，也许能找到一个比你更有经验的开发者），能让你观察到其他人的思考过程。你还可以看到他们写代码的方式。你能学会他们使用的工具。

 对于很多人来说，找到其他开发者一起合作，是一件奢侈的事情。但是所有人都可以用一种另外的方式学习别人的经验和技巧：仔细研读其他人写的代码。

 阅读高质量代码，就像是阅读一本好的小说。许多代码中都加入了开发者的注释，这些注释能让你更好的了解代码。

 如果你觉得读别人写的代码没什么用，那我就给你讲个故事。从前，有一个叫比尔·盖茨的高中生，通过搜索一家公司的垃圾桶，找到了他们的源代码进行学习。

 连盖茨这样的天才都要去学习别人的代码，我们就更不要说了。现在就打开Github repo去学习别人写的代码吧。

 我所学到的经验

ESLint

 Linting是一个在你的代码中寻找潜在错误的过程。它可以改善代码的质量，让代码保持连贯性和简洁性。

在团队协作的时候，Linting非常有效。它可以让代码看上去像是一个人所写的。它还能督促人们遵循公司的代码样式指导（许多开发者都没有仔细阅读公司的指导）。

 Linters的作用当然不仅仅是让代码变得好看。它还能让你遵循最好的写代码方式。例如，它可以告诉你何时应该对变量使用“const”这个关键词。

 如果你使用React插件，它可以告诉你哪些组件会被重构，成为无状态函数组件。它还能让你很好的学习ES6语法，甚至可以告诉你合适应该升级代码。

 要想在项目中使用ESlint，你可以按照下列步骤进行安装和配置：

1.安装ESlint包

$ npm install --save-dev eslint

2. 配置ESlint选项

./node_modules/.bin/eslint --init

3. 建立npm脚本，在package.json文件中运行linter

 "scripts": {

  "lint": "./node_modules/.bin/eslint"

}

4. 运行linter.

$ npm run lint

更多的细节可以参看ESlint官方文档。

有的时候一些你所需要的代码，linters也会报错，例如console.log。如果出现这样的情况，你可以告诉linters在进行代码分析的时候跳过某个区域。

 方法是添加下面的comment：

  // Single line Ignore

 console.log(‘Hello World’); // eslint-disable-line no-console

// Multiline Ignore

 /* eslint-disable no-console */

 console.log(‘Hello World’);

 console.log(‘Goodbye World’);

 /* eslint-enable no-console */

 检查最小化

 在源代码中，我看到了一个叫做“isCrushed()”的函数，而且它并没有body。这让我有些奇怪。

 但是之后我发现，它唯一的目的，就是查看代码是否已经被最小化。在最小化过程中，函数的名称和变量都被缩短了。而这个函数，就是要查看“isCrushed()”函数是否依然存在，名字是否出现了编程。如果开发者在开发过程中使用了最小化代码，它就会给出警告。

 函数构成

 Redux中有一个compose()函数，它的作用是使用已有的函数生成一个新的函数：

  function compose(…funcs) {

   if (funcs.length === 0) {

     return arg => arg

   }

   if (funcs.length === 1) {

     return funcs[0]

   }

   const last = funcs[funcs.length — 1]

   const rest = funcs.slice(0, -1)

   return (…args) => rest.reduceRight((composed, f) => f(composed),    last(…args))

 }

 加入，我有一个对数字进行二次方的函数，还有一个将数字乘以2的函数，我就可以将两个函数结合在一起，创造一个新的函数：

  function square(num) {

   return num * num;

 }

function double(num) {

   return num * 2;

}

function squareThenDouble(num) {

   return compose(double, square)(num);

}

console.log(squareThenDouble(7)); // 98

 原生方法

 在我研究compose()方法的时候，又遇到了一个名为reduceRight()的方法，这个方法我从来没有听说过。我开始怀疑自己，究竟有多少native函数是我从来没听说过的？

 我们来看两个代码段，一段使用了native Array方法filter()。另一段则没有。

 function custom(array) {

   let newArray = [];

   for(var i = 0; i < array.length; i++) {

     if(array[i]) {

       newArray.push(array[i]);

     }

   }

   return newArray;

 }

 function native(array) {

   return array.filter((current) => current);

 }

 const myArray = [false, true, true, false, false];

 console.log(custom(myArray));

 console.log(native(myArray));

 你可以看到，使用了filter()方法的代码非常简洁。filter()已经被大量开发者广泛使用。

 我想说的是，在编写自己的解决方案前，你可以先看看语言本身是否已经提供了原生的解决方案。

 描述性函数名称

 在阅读源代码的过程中，我看到了许多名字特别长的函数：

 	getUndefinedStateErrorMessage

getUnexpectedStateShapeWarningMessage

assertReducerSanity

 我不禁要想，为什么要给这些函数起这么长的名字？

 后来我终于明白了：在代码中使用描述性较强的名称。阅读代码的时间比写代码的时间长的多，你未来还要为何这些代码。因此，你要让代码对你和其他人来说都容易理解。

 现在的代码编辑器都有自动补全功能，因此你不再需要害怕麻烦。

 console.error vs. console.log

不要再只用console.log了。如果你要打印出某个错误，请使用console.error。它能够在console中显示出整齐的信息：

有时间的话，一定要多看开源代码。你一定会学到很多新的东西。

原文来自:SDK.cn

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com