记住：

• 用更少的代码。
• 用更少的变量。

3. 应用主动语态

主动语态比被动语态更直接，跟有力量，尽量多直接定名事物：

• myFunction.wasCalled()优于myFunction.hasBeenCalled()
• createUser优于User.create()
• notify()优于Notifier.doNotification()

定名布尔返回值时最好直接反竽暌功其输出的类型:

• isActive(user)优于getActiveStatus(user)
• isFirstRun = false;优于firstRun = false;

函数名采取动词情势：

• increment()优于plusOne()
• unzip()优于filesFromZip()
• filter(fn, array)优于matchingItemsFromArray(fn, array)

事宜处理以及生命周期函数因为是限制符，比较特别，就不实用动词情势这一规矩;比拟于“做什么”，它们重要用来表达“什么时刻做”。对于它们，可以“<什么时刻去做>，<动作>”如许定名，朗朗上口。

• element.onClick(handleClick)优于element.click(handleClick)
• element.onDragStart(handleDragStart)优于component.startDrag(handleDragStart)膳绫擎两例的后半部分，它们读起来更像是正在测验测验去触发一个事宜，而不是对其作出回应。

生命周期函数

对于组件生命周期函数(组件更新之前调用的办法)，推敲一下以下的定名：

• componentWillBeUpdated(doSomething)
• componentWillUpdate(doSomething)
• beforeUpdate(doSomething)第一个种我们应用了被动语态(将要被更新而不是将要更新)。这种方法很白话化，但含义表达并没有比其它两种方法更清楚。

第二种就很多多少了，但生命周期函数的重点在于触发处理事宜。componentWillUpdate(handler)读起来就似乎它将急速触发一个处理事宜，但这不是我们想要表达的。我们想说，“在组件更新之前，触发事宜”。beforeComponentUpdate()能更清跋扈的表达这一设法主意。

component.beforeUpdate(doSomething)优于component.beforeComponentUpdate(doSomething)

函数混淆是指将办法作为属性添加到一个对象膳绫擎，它们就像装配流水线给传进来的对象加上某些办法或者属性。

我爱好用形容词来定名函数混淆。你也可以经常应用"ing"或者"able"后缀来找到有意义的形容词。例如：

按代率攀类别分组：

const duck = composeMixins(flying, quacking);

const box = composeMixins(iterable, mappable)

4.避免连续串构造松散的，不知所云的代码

开辟人员经常将一系列事宜串联在一个过程中：一组松散的、相干度不高的代码被设计依次运行。大年夜而很轻易形成“意大年夜利面条”代码。

因为这个原因，有经验的开辟者会尽可能地删除不须要的变量。

这种写法经常被反复调用，即使不是严格意义上的反复，也只有细微的差别。例如，界面不合组件之间几乎共享雷同的核心需求。 其存眷点可以分化成不合生命周期阶段，并由零丁的函数办法进行治理。

推敲以下的代码：

这个办法做了三件事：获取数据，根据获取的数据计算view的状况，以及衬着。

在大年夜部分现代前端应用中，这些存眷点中的每一个都应当推敲分拆开。经由过程分拆这些存眷点，我们可以轻松地为每个问题供给不合的函数。

比如，我们可以完全调换衬着器，它不会影响法度榜样的其他部分。例如，React的丰富的自定义衬着器：实用于原生iOS和Android应用法度榜样的ReactNative，WebVR的AFrame，用于办事器端衬着的ReactDOM/Server 等等...

if 语句

drawUserProfile的另一个问题就是你不克不及在没稀有据的情况下，简单地计算要展示的数据并生成标签。如不雅数据已经在其他处所加载过了会怎么样，就会做很多反复和浪费的工作。

分拆存眷点也使得它们更轻易进行测试。我爱好对我的应用法度榜样进行单位测试，并在每次修改代码时查看测试结不雅。然则，如不雅我们将衬着代码和数据加载代码写在一路，我不克不及简单地将一些假数据传递给衬着代码进行测试。我必须大年夜端到端测试全部组件。而这个过程中，因为浏览器加载，异步I/O请求等等会消费时光。

膳绫擎的drawUserProfile代码不克不及大年夜单位测试测试中获得即时反馈。而分拆功能点许可你进行零丁的单位测试，获得测试结不雅。

上文已经已经分析出零丁的功能点，我们可以在应用法度榜样中供给不合的生命周期钩子给其调用。 当应用法度榜样开端装载组件时，可以触发数据加载。可以根据响应视图状况更新来触发计算和衬着。

这么做的结不雅是软件的职责进一步明白：每个组件可以复竽暌姑雷同的构造和生命周期钩子，并且软件机能更好。在后续开辟中，我们不须要反复雷同的事。

函数调用时，避免用null以及undefined代替某一个参数

很多框架以及boilerplates规定了法度榜样文件组织的办法，个中文件按照代率攀类别分组。如不雅你正在构建一个小的寂?骥，获取一个待做屎?的app，如许做是很好的。然则对于较大年夜的项目，经由过程营业功能特点将文件分组在一路是更好的办法。

按营业功能特点分组：

. 
├── todos 
│   ├── component 
│   ├── reducer 
│   └── test 
└── user 
    ├── component 	
			
 3/5   首页 上一页 1 2 3 4 5 下一页 尾页
	
			

　　推荐阅读
　　状态决定视图——基于状态的前端开发思考
也决定了前端只负责全部Web应用上的视觉和交互层，凡是涉及到数据的，后端必定要做严谨的校验，不信赖任何前端的请求。跟着前端的成长，Web应用的状况治理愈发复杂，然而因为前端的一些特点：    代码开源    请求透>>>详细阅读


本文标题：JavaScript代码风格要素
地址：http://www.17bianji.com/lsqh/36122.html
 1/2    1