数据驱动
持续+间隙性更新中...
- 写法上的不同
- 数据层与结构层关系
- 指定时机性
- 操作的形式不同
- 样式
写法的区别
-
DOM 操作是页面级别的，写的一般就是一个页面要承载的页面结构和数据。
-
数据驱动是组件级别的（或者原子级别的）。实现了组件化，每一个组件只是完成一个页面中的一小部分，不同的组件可以整合起来，形成一个一个的应用。
数据层与结构层关系
- DOM 操作是通过操作 DOM，修该 DOM 上面的数据，通过找到对应的结构层，做响应的 DOM 操作。（结构层与数据层未完全分离）
- 数据驱动，数据往往"模板"的形式放在存在，需要更新的时候是直接用指定修改数据的方式，修该数据。不用于结构产生关系。（结构层与数据层分离）
操作时机性
DOM 操作以jQuery 最为使用广泛。jQuery 的执行时机一般都在，DOM 文档准备完毕了进行 DOM 操作。jQuery 封装了专门的方法。
// dom文档树加载完之后执行一个函数, ready 是 DOM树加载完成，不是onload的页面资源加载完成的
$(document).ready(function(){
// 开始写 jQuery 代码...
});
// 语法糖
$(function(){
// 开始写 jQuery 代码...
});
注意这里要区别，window.onload 和 DOM 加载完毕的区别, 前者是网页资源全部加载完毕之后执行，且之执行一次。后者是 DOM 结构加载完毕之后就能执行，且不止执行一次。
数据驱动中不需要太注意这些概念，数据驱动往往有自己的运行，在运行时钟已经准备好了操作需求。
操作的形式不同
DOM 操作是找到元素，然后进行指定的操作。在 jQuery 中就提供了大量的选择器，使用选择器选择指定的元素进行操作。
常用的选择方式：
- id 选择器
- class 选择器
- 标签选择器
- ...
jQuery 的选择器众多，这里只是说明问题, 选择器可以参照对应 CSS 选择器来理解。操作，其实就是操作元素，和对应的事件。jQuery 提供了链式操作。操作对应着事件，事件在浏览器中都是一样的，这一样是的是：不管是 DOM 操作还是数据驱动。只是写法不一样，最后做的事情行为是一样的。
- 鼠标事件
- 键盘事件
- 表单事件
- 文档窗口事件
- ...
一句话，jQuery 中的 DOM 操作，操作和事件是 JavaScript 选择器语法糖的封装。通过事件行为，操作 DOM的变化。
数据驱动中，处理操作行为的方式是绑定到"模板"上，操作指定的方法单独的独立出来。然后在独立出来的函数中通过修改数据进行相应的操作
样式
在数据驱动中，往往借助了构建工具，可以提供强有力的样式书写能力，一般在数据驱动框架中往往，提供了动态的方式处理动态的 CSS 的类或者内联样式 Style。
在 DOM 操作中，我们也可以借助 JavaScript 的能力进行样式的变化，但是本质还是在直接操作 DOM 属性。
