Vue&生物畅谈

作者: Ricoywang | 来源:发表于2017-08-09 20:16 被阅读183次

聊一聊Vue和生物，有时候转换一下思考模式，会让编程更开心^.
好记性不如烂笔头，本来已经整理好思路了，项目忙了大半个月，又得重新思考，于是我特意做了一张图对比图加深印象和理解

从最简单的单细胞生物结构，再到复杂的人体，其实都可以看作一个正在运行的程序。微观到整体，你会发现真的是惊人的一致。
DNA（源代码）··>细胞（功能的js、结构HTML、表现CSS）··>器官（组件）··>组织（功能模块）··>人体（完整的项目）

复杂，高效，完美，这就是生物给我们展现出的魅力。

DNA

DNA在生物学上是一切的根源，通过解旋和拷贝后形成一小段携带有特定信息的RNA，RNA可以看作是一个对象，这个对象中的信息中有，它将要去做什么，以及它的下游将要做什么，最终成为什么，可能只是头发的一小段，也可能是眼睛的某一个细小的部分。这个段RNA的信息是什么就已经确定它将要做得接下来的事。

DNA&RNA.jpeg

Vue

Vue全称vue.js是用于web开发中的MVVM双向绑定框架，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
vue 在对模板进行解析通过渲染函数产生一个虚拟DOM，这个虚拟dom中包含有该节点的名称，属性，将要完成的功能，以及它子节点的相关信息。

DOM&RNA.jpg

细胞——最小的组件

含有完整的功能，可以与父组件通过细胞表面的糖蛋白（props）进行交互，有一部分细胞它的功能以及体态无法进行很大的变化，主要功能是传递信息，比如脑细胞-神经元，vue中可以通过new Vue创建一个eventBus,他没有复杂的ui甚至连函数都没有，作用就是进行信息传递，就像神经元通过神经递质传递信息，神经元并不关心自己所传信息是什么，它只是机械的传到下一个神经元。也有需要高度形变，适应各种布局的白细胞，就如同项目中需要自适应的控件，放到哪个位置都能够产生合理的“形变”，

组件，可以跟外界（父组件）进行交互，数据交互或者其他交互，但它并不能直接去影响父组件。而根据不同功能位置划分，组件会分为很多不同的种类。

cell.jpg

器官--完整功能的组件

网页嵌套不同功能的组件，于是就形成了如同器官一样，具有细化功能。多个不同功能的细胞群聚合在一起，于是形成了器官。

系统--多个不同器官协调完成某一项功能(模块)

具有不同功能，进行功能上的耦合，完成一项功能，呼吸系统组成：鼻、口腔、喉、肺等，完成人体整个呼吸过程。

呼吸系统.jpg

就像乐高积木一样，我们将"方块"拼合在一起，并赋予功能，就成了手中的玩具。我们也可以把若干组件聚合起来，实现某个目的，这就构成了应用（application）或者子系统（sub-system）。应用的表现形式是一个由若干目录组成的项目。它的边界由它的名字，应用的入口（比如 main 函数）组成。应用类似于生物体中的系统，再往上生物学上就是一个生命个体，而编程中若干应用组成的则是适应业务需求的解决方案。

细细碎碎

1、每个细胞中含有的细胞器算组件么？
细胞中的细胞器，细胞核，更像是一个单文件中的scripts、template、style。每一个带有.vue后缀的文件是为一个组件细胞，组件细胞中的细胞器按照功能有明显的划分，但细胞器（scripts、template、style）又可以互相影响，彼此耦合在一起组成一个组件。
2、vuex用于组件间信息传递，那么生物呢？
我们先看看vuex中有哪些东西，储存信息的state,而state只能通过mutation修改。人体则是拥有遍布各大大小小细胞组件，器官组件的循环系统，通过激素调节细胞中酶的产量来调节生物行为和传递信息。激素作为传递中的信息，游走在循环系统中，它可以跟所有的组件接触，但只要组件上有对应的锚点（vuex的getter），细胞组件才能获取激素所要传递信息。举个栗子：大脑：噢，我的天啊，这个人还在单身，快让他反思下吧。于是，下垂体分泌激素，人体获得指令，人体本身是无法去修改这个信息的，只要在信息驱动下完成一定的操作（action），走到超市里买到娃娃，获得愉悦，反馈回信息处理的总部，携带信息的激素才会修改。^.
当然以上只是个玩笑，生物学上的信息传递更为复杂，理念上却很相似，通过人体循环系统游走在各细胞间，特定组件接收对应信息，但不能直接修改这些信息，只能通过(action)来操作，专门管理信息激素的(mutation)它对信息的操作是同步的，但是细胞组件则需要通过反馈操作(action)来改变mutation这个过程是异步的。