Angular 2 组件使用普通/香草 JavaScript答案

【问题标题】：Angular 2 component using plain/vanilla JavaScriptAngular 2 组件使用普通/香草 JavaScript
【发布时间】：2017-10-03 09:56:49
【问题描述】：

由于一些架构决策，我的团队决定回退到使用没有任何框架依赖项（Angular 或 react）的 Javascript。

我现在想编写不依赖于框架的自定义组件（与 Angular 的组件做同样的事情：一个可以在 HTML 中使用的选择器，它有一个作用域和一个可以使用的控制器）。

jQuery 小部件是我们想到的一个选项。但是有一个对 jQuery 的依赖 :(

最好的方法是什么？ ES6 是否提供了任何方法来做到这一点？

【问题讨论】：

【解决方案1】：

Angular 正在解析 html 并搜索以匹配选择器。在此之前，它会解析您的模板以生成动态代码...以及更多的事情......所以，不，你将无法轻松创建自定义 html 标签。也许看看聚合物？ https://www.polymer-project.org/

【讨论】：

【解决方案2】：

为什么要费心去创造一个庞大的开发团队自己成功完成的东西呢？你很可能会失败。

但如果你还想尝试一下，有一个叫WebComponents的东西，但目前它对浏览器的支持非常有限。更好的支持也会导致另一个名为 Polymer 的库。

另一个创建自定义组件的轻量级库是Vue.js。

仅供参考：React 不是框架。

【讨论】：

对。你有一个绝对有效的论点。但是我们有基于各种库构建的应用程序，即 Angularjs、Angular、React 和一些仍然使用 jQuery 小部件。举个例子——我们用 Angular 编写这些组件，用 angularjs 或 jQuery 编写的应用程序可能无法导入它。有没有一种方法可以让我使用 Angular 创建组件，并将其转换为纯 JS 并将其导入任何项目