Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

单向数据流,这是大自然的规律

  以前 jQuery 时代,我们的开发是事件驱动的。比如一个按钮点击后要处理哪些事情,这全是属于按钮的点击事件。对于简单的交互需求而言,这确实足够了,而且开发起来非常迅速。但业务一旦复杂,这种基于事件驱动的东西就会变得很乱,变得很容易出错。
  一个典型的例子是单页应用中页面渲染和 URL 的处理。如果是基于事件驱动,那么点击按钮后就应该做两件事:更新 DOM,更新 URL。但是如果我们不是点击按钮进入这个 URL,而是直接浏览器访问,那么我们也需要更新 DOM。这里「更新 DOM」这个部分就重复了。
  产生这个问题是因为这个流程中有两个事件源,一个是进入页面的事件,另一个是按钮点击事件。如果是两个完全独立的事件,那这么做也无可厚非,可是上面的这两个事件操作是有关联的。点击事件会修改 URL,而页面进入事件是基于 URL 做操作,这个地方就非常不协调。
  其实这个问题很容易解决,我们不在点击按钮时操作 DOM 而是修改 URL,然后在 URL 变化的事件中操作 DOM 即可。因为页面进入和按钮点击都会造成 URL 变化,最终 DOM 操作只有一处调用。整个流程变得很清晰,按钮只更改 URL,DOM 渲染只由 URL 变化来触发。
  渐渐地,单向数据流的概念就出现了。更新 DOM 的数据总是从顶层流下来,用户事件不直接操作 DOM,而是操作顶层数据。这些数据从顶层流下来同时更新了 DOM。这就如同「云腾致雨,露结成霜」一样是大自然的规律,当业务复需求杂到某种程度时自然就会出现的东西。下面这张图我记得是小学自然课本上的一个插图,大概就是这种感觉吧?

  虽然每次要从顶层开始流,看起来很蠢。但这样可以让逻辑更简单,让程序更不容易出错。在性能允许的情况下我是推荐这么做的。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^