三、Array 数组侦测

数组 Array 虽然也是属于对象类型，但还是存在一些差别，它没办法像 Object 对象那样，通过 setter/getter 的方式来监听属性的变化，因此对于 Array 而言，需要用到另外一套变化侦测方案。

3.1 如何追踪变化

我们知道，Array 数组有很多个内置方法可以改变数组的值，比如 push,pop,shift等，这些方法都可以改变数组的内容，所以可以尝试通过监听这些方法的调用，来达到监听数组变化的目的。

但是，这些方法都是内置方法，而且 js 中并没有提供接口给我们覆盖，因此要如何修改这些方法，以达到我们需要的效果呢？

二、Object 变化侦测

变化侦测指的是，当运行时的状态发生变化时，应用程序可以知道哪个状态发生了变化，并作出相应的动作。

变化侦测的方式可以分为2种：一种是“推（push）”，一种是“拉（pull）”。

Vue 的变化侦测就属于“推，当状态发生变化时，它就会通知相应的依赖对象进行更新。

2.1 追踪变化

变化侦测原理

一、对象属性

对于 js 对象的属性，可以分为2种：数据属性和访问属性。

1.1 数据属性

数据属性就是普通的对象属性值，可以读入和写入值。

例如，下述的属性 data 就是数据属性：

1
2
3
4

var obj = {};
obj.data = 'data';

alert(obj.data) // "data"

对于数据属性，它有4个特性：

格式

1. 垂直格式

• 短的源文件比长的源文件会更好，一般在200行~500行之间为好
• 源文件的结构应该是从上往下展开，顶部是高层次概念，底下是实现细节，可以简单理解为 public 放在前，private 放在后
• 每组代码应该是完整的一条思路，不同组代码之间应该用空白行隔开
• 相关代码应该靠近，避免把相关的概念放到不同文件中，即避免过度使用 protected
• 变量声明应该尽可能靠近其使用位置
• 实体变量应该在类的顶部声明
• 函数调用应该放在一起，也就是被调用者在调用者的下面，保持程序的顺序性
• 概念相关的代码应该放在一起，相关性越强，彼此之间的距离就应该越短

2. 水平格式

注释

1. 注释的作用

• 为了弥补代码表达某种意图时不够清晰的一种手段

2. 注释的缺点

• 需要写注释，就说明代码很糟糕，代码不能够清晰表达它的意思
• 注释会随着时间变得腐烂，离其描述的代码越来越远，甚至变得全部是错误的，因为程序员往往不能坚持维护注释

3. 好注释

函数

1. 短小

• 函数在保证完整性的情况下，越短越好
• 每个函数都应该一目了然
• 长度为 20 行最佳

2. 只做一件事

• 每个函数应该保证只做一件事
• 要判断函数是否只做了一件事，可以看是否还能再拆出一个函数
• 一件事是指在同一抽象层次上完成的动作

3. 每个函数一个抽象层级

有意义的命名

1. 名副其实

• 变量、函数或类的名称应该能够准确地说明它的意义，比如它存在的意义，它做什么事，以及它应该怎么用。

• 一旦发现好的命名，就应该换掉旧的名称（当然要确定修改的难易程度）。

2. 避免误导

人的精力

摘自：https://zhuanlan.zhihu.com/p/266759994

一、人的精力是有限的

人的精力是有限的，做任何有益于自身成长的事情，都需要耗费大量的精力，这也就要求人要有节制地使用这一无形资本。

曾经有很长的一段时间我不明白为什么每当我参加一些人数众多，气氛热闹，互动频繁的活动时就会情绪低落，即使是参加大型同学聚会，面对大家欢快的讨论，我也多少有些拘谨。直到很久以后，我才明白这种性格特质叫：内向。而内向意味着个体在独处或面对有限的对象时精力充沛，而却对超出自我界限的对象则感到茫然无助，乃至疲惫不堪。

二、精力的损失

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment