5

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

我喜欢 React 和 Riot，但我不知道如何将您的典型 jQuery 应用程序（对 DOM 的无限制访问）变成这个虚拟 DOM 的新世界等。

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

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

4

5 回答 5

14

要在 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>
于 2015-02-22T21:27:57.893 回答
5

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

但是，在 React 社区中使用自定义标签或“组件”将基于 jQuery 的应用程序转换为“现代世界”是一个不错的选择。

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

Riot 2.0 旨在与 jQuery 配合使用。您可以自由地将 jQuery 插件与自定义标签一起使用，这样您就可以迭代地转换您的应用程序 - 如果您愿意，可以一次使用一个标签。

于 2015-01-25T04:07:40.007 回答
3

这是使用 React 组件包装 DOM 库的优秀指南：

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

于 2015-01-24T21:23:50.107 回答
2

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

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

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

  • 在 componentDidMount 中初始化（基于 props）
  • 在 componentDidUpdate 中更新插件（基于 props）
  • 调用this.props.onWhatever插件回调
  • 在 componentWillUnmount 中清理
  • 有关示例和 api 设计，请参阅 react-bootstrap。

而且我认为 Riot 与此无关。

于 2015-01-24T19:54:11.540 回答
1

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

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

通过一个 mixin，我们给所有的 riot 组件标签这个函数：

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(....)
$('.dd').nestable('expandAll');

进入

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

现在这允许在同一个页面中拥有许多这些组件，而不会发生冲突以及本地命名空间和数据。

正如已经指出的，这只能在安装标签后访问，所以在一个this.on('mount'...)块中运行你的东西。

这与旧的 jquery 库一起工作得非常好，因为它们通常允许用户重新定义他们的 Dom 选择器以在页面内实现双重运行能力。

于 2016-05-30T18:17:30.587 回答