DDD实战与进阶学习之值对象

DDD实战与进阶 - 值对象

整体思路：

在实现此效果之前，我们先来捋一下思路，用思维导图来设计一下我们的实现步骤，如下：

 

你可以审查元素，下载数字背景图片，复制图片地址，或者使用其他背景图片、背景颜色

然后作者用“地址”这一概念给大家扩充了一下什么是值对象，我们应该怎么去发现值对象。所以你会发现现在很多的DDD文章中都是用这个例子给大家来解释。当然读懂了的人就会有一种醍醐灌顶的感觉，而像我这种菜鸡，以后运用的时候感觉除了地址这个东西会给他抽象出来之外，其他的还是该咋乱写咋写。

何为值对象

首先让我们来看一看原著 《领域驱动设计:软件核心复杂性应对之道》 对值对象的解释：

很多对象没有概念上的表示，他们描述了一个事务的某种特征。
用于描述领域的某个方面而本身没有概念表示的对象称为Value Object（值对象）。

页面渲染完毕后，我们来让数字滚动起来，设计如下两个方法，其中 increaseNumber 需要在 Vue 生命周期 mounted 函数中调用

思考：背景框中有了数字以后，我们现在来思考一下，背景框中的文字，一定是 0-9 之前的数字，要在不打乱以上 html 结构的前提下，如何让数字滚动起来呢？这个时候我们的魔爪就伸向了一个 CSS 属性： writing-mode ，下面是它属性的介绍：

• horizontal-tb：默认值，表示水平排版，从上到下。
• vertical-lr：表示垂直排版，从左到右。
• vertical-rl：表示垂直排版，从右到左。

For Example ：

// CSS代码
<style>
.box-item {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 82px;
  /* 背景图片 */
  background: url(./number-bg.png) no-repeat center center;
  background-size: 100% 100%;
  font-size: 62px;
  line-height: 82px;
  text-align: center;
}
</style>

// htm代码
<div class="box">
  <p class="box-item">
    <span>1</span>
   </p>
</div>

OK，现在我们来仔细理解和分析一下值对象，虽然概念有一点抽象，但是至少有一关键点我们能够很清晰的捕捉到，那就是值对象没有标识，也就是说这个叫做Value Object的东西他没有ID。这一点也十分关键，他方便后面我们对值对象的深入理解。
既然值对象是没有ID的一个事物（东西），那么我们来考虑一下什么情况下我们不需要通过ID来辨识一个东西：

// html部分
<p class="box-item">
  <span>0123456789</span>
</p>

// style部分
.box-item {
  display: inline-block;
  width: