使用jQuery的单向数据流

时间:2017-08-03 21:21:17

标签: jquery reactive-programming

我理解单向数据流和声明性(过度命令式)编码在反应式前端js框架中的好处,如react,inferno或preact。我目前正处于这样一种情况:jQuery是我唯一可用的工具,但是我想做一下这个固有命令性的库可以做的事情,以更加反应的方式处理我的编码。

有没有办法在jQuery驱动的页面中实现单向数据流和声明式样式?

我很清楚,有人写的任何代码都可以介入并破坏我的代码所假设的内容将由我编写的代码的反应位控制;我可以将我的代码包装在一个插件中,并将其作为该领域中使用的方法,并声明由插件管理的DOM应该能够预期它是唯一触及它所管理的东西 - 有点类似于它。

我没有像SPA路由和redux以及所有其他好东西那样的东西。我只是希望DOM管理更加理智,可预测,更容易推理。

1 个答案:

答案 0 :(得分:0)

在考虑更多之后,我认为答案是,没有(好吧,请参阅下面的更新)

jQuery是强制性DOM操作的绝佳工具。如果我想要一个反应式库或框架,我应该使用一个 - 不要希望能够以与自身相反的方式表现出根本不同的东西。

也许最好的办法就是在管理给定DOM元素的代码中有一个单点,并且拥有需要让该元素执行调用该单个控制点的所有必需代码,而不是狂野西部 - 每个人都可以免费获得所有代码,其中脚本中的任何行都可能影响DOM的任何部分。

更新

使用jQuery DataTables插件一段时间之后,我意识到有一种方法可以实现我在问题中的目标。当然,它仍然没有实现梦想。但我的目标是看看是否有任何可以将React的基本原则的一些好处带到当前项目的jQuery代码中。

以下是我一直在尝试的一些已经产生了一些好处:

  • 我将HTML位放在页面底部的隐藏div中(按照惯例)并使用data- *属性标记它们。
  • 在页面加载时,我使用jQuery来.remove()它们,并将它们存储在一个名为templates的对象中,在适当的键下。
  • 当我需要最初在UI 中表示状态或当事件引入状态更改时,我将数据传递给.clone()模板的函数,命令填充/装饰它使用传递的数据,并将准备好的克隆设置为文档中相应父级的.html()(如果有的话,替换以前的内容)

是的,任何开发人员都可以编写命令式代码来改变此模式之外的DOM。是的,它与React实现的一切相距甚远。但它至少让我开始使用UI作为状态的反映,而不是依赖于它依赖于存储任何数量的状态。 YMMV,但对于那些仍在维护jQuery代码的人来说,它可能会让生活变得更轻松。