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

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

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

通过开源项目学习

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

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

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

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

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

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

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

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

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

阅读源代码的收获0

我所学到的经验

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中显示出整齐的信息:

阅读源代码的收获1

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

余下全文(1/3)

本文最初发表在www.sdk.cn,文章内容属作者个人观点,不代表本站立场。

分享这篇文章:

请关注我们:

发表评论

电子邮件地址不会被公开。 必填项已用*标注