JavaScript 模板与 Web 组件

Question

网络开发新手。当用户按下图表中的元素时，我需要实现一个包含更多数据的滑动窗口。已经有了这个漂亮的带有 CSS 的滑动 View ，现在所有人都在尝试弄清楚如何在每次按下元素时在其中填充数据。

看到 javascript 模板，想问一下这是一个好的方法吗？也许我应该为那个滑动 View 实现 web 组件？我不确定我是否理解这些差异(除了 css 封装在 Web 组件中..)

Answer 1

当谈到选择这类东西时，一切都取决于您正在使用的代码的大小和复杂性。听上去，您的应用程序需要一种简单的机制来获取一些数据并更新一堆 DOM 元素。

如果您没有太多要更新的元素，您可以仅使用 AJAX 请求和每次点击时的一些 DOM 更新代码来完成此操作，无需库，无需依赖项且简单。

如果您要更新的 UI 有点复杂，请尝试类似 knockout.js 的内容.它不是完全不干涉的，它使用基于数据属性的数据绑定(bind)，因此您不必存储和请求模板，它就在那里，已经在标记中。

现在，至于区别:

Web Components 提供了一种将离散功能封装到可重用代码块中的标准化方法。这是通过即将推出的浏览器 API(如 Shadow DOM、HTML 导入等)完成的。这个想法是，浏览器 vendor 将实现诸如影子 DOM 操作之类的东西(就像每个浏览器都有自己的标准 DOM 实现一样)。请务必注意，虽然这些 API 正在开发中，但您需要使用诸如 Polymer 之类的库。或同时使用 X-Tags 以获得最佳的浏览器支持)

另一方面，对于 JavaScript 模板(使用 JS 模板库)，您实际上是在接受库对如何解析和呈现模板的意见。您还可能获得或多或少的功能，具体取决于您选择的库。秤的一侧有类似的东西:

• React.js - 使用差异引擎更新 DOM，并提供类似 Web 组件的方法来声明自定义元素。

然后在天平的另一边，您可以使用如下设置:

• Hogan.js - 获取 mustache 模板、解析、编译并以字符串形式提供结果的功能。在这种情况下，您有更多的控制权:

  • 您必须决定如何将 mustache 模板加载到应用中

  • 您必须采用生成的模板并相应地更新 DOM

这并不是说不使用 Web 组件就无法获得干净、可重用的控件 - 您只需要在编写 JavaScript 时遵守纪律并保持良好的实践。

希望这有帮助(抱歉缺少链接，我的代表不允许我在一分钟内发布超过 2 个)

斯图