Question

我有一个jQuery繁重的应用程序我正在其中有许多jQuery插件，我想重组应用程序，所以我正在寻找不同的框架，如Angular，React，Riot 2.0等。

我喜欢React和Riot，但我无法弄清楚我是如何将这个典型的jQuery应用程序（对DOM进行无限制访问）转换为虚拟DOM的新世界等。

其中一些组件很复杂，我不想将它们全部重写为“VDOM方式”，并造成另一场噩梦。

有没有人对此有答案？也许jQuery插件繁重的应用程序不适合，或者有没有办法使用两者来拆分/组合UI，或者可能是一个与jQuery兼容的React / Riot框架？

Answer 1

要在Riot 2.0自定义标记内使用jQuery访问DOM，您可以使用 mount 事件和this.root，如下所示：

<my-custom-tag>
  <h3>Riot.JS Custom tag + jQuery plugin</h3>
  <p>My paragraph</p>
  <script>
    this.on('mount', function() {
      var $node = $(this.root);
      $node.find('p').html('updated by jQuery!');
    });
  </script>
</my-custom-tag>

我不确定这是“最佳做法”，但它适用于Riot 2.0。10（2015年2月19日）。

如果自定义标记包含表单或输入元素，它更简单，您可以通过其name属性访问它们，您不需要mount事件：

<my-custom-form>
  <input name="email" type="text">
  <script>
    $(this.email).val('mike@worldcompany.com');
  </script>
</my-custom-form>

Answer 2

Riot 2.0仅在4天前发布，所以显然还没有扩展。

但它是将基于jQuery的应用程序转换为＆＃34;现代世界＆＃34;使用自定义标签或＆＃34;组件＆＃34;在React社区。

自定义标记允许您构建可重用的客户端代码片段，而不需要jQuery选择器和操作方法。 HTML和JS在文件系统上的分散程度较低。

Riot 2.0旨在与jQuery一起发挥作用。您可以将jQuery插件与自定义标签一起使用，这样您就可以迭代转换应用程序 - 如果您愿意，可以在当时使用一个标签。

Answer 3

这是使用React组件包装DOM库的绝佳指南：

https://github.com/rpflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md

Answer 4

有些人可能已经重新创造了你想要的东西。您可以使用指令来实现可重用组件或包装现有组件。包装插件：

在链接中初始化（基于隔离范围）
使用scope.$watch(key, fn)在内容发生变化时更新插件
在插件回调中使用scope.$apply()告诉角度可能已更改的内容，更新任何相关的双向绑定，并调用任何相关的表达式绑定
使用scope.$on('$destroy', fn)清理
有关示例和api设计，请参阅ui-bootstrap。

这同样适用于React，但适用于组件而不是指令。

在componentDidMount中初始化（基于道具）
更新componentDidUpdate中的插件（基于道具）
在插件回调中调用this.props.onWhatever
清理componentWillUnmount
请参阅react-bootstrap以获取示例和api设计。

我并不认为Riot与此相关。

Answer 5

我们遇到了同样的问题，即将一个相当大的全局jquery管理员前端变成可嵌套的无冲突组件 - 为我们的合作伙伴提供大量培训 - 所以riotjs对我们来说是理想的。

我们同意下面的解决方案（另请参阅Michael Rambeau的回答）并且到目前为止对此非常满意。

通过mixin，我们为所有的暴乱组件标签提供了这个功能：

var ComponentTagsMixin = {
  init: function () {
     //<other stuff needed in all tags>

     // jquery local to the vDom of this instance:
     $: function(selector) {
            // you could fail here if (!this.isMounted)                                        
            return $(this.root.querySelector(selector))           
     }          
}

```

所以，在标记中，您只需将$转换为this.$即可。例如，jquery nestable：

$('#nestable').nestable(....)
$('.dd').nestable('expandAll');

进入

this.$('#nestable').nestable(....)
this.$('.dd').nestable('expandAll');

现在，这允许在同一页面中拥有许多这些组件，而不存在冲突和本地名称空间和数据。

正如已经指出的那样，只有在挂载标记后才能访问，所以在this.on('mount'...)块中运行你的东西。

这对于遗留jquery库非常有效，因为它们通常允许用户在页面内重新定义其Dom选择器以实现双重运行。

如何在React，Riot 2.0中使用jQuery插件

5 个答案: