可以将javascript代码与Js中的标记文件分开吗？

我想知道是否有可能采取以下措施：

<todo>
    <div class="greetings">Hello, world!</div>

    <script src="/path/to/my/file.js"></script>
</todo>

<dropdown>

    <select>...</select>

    <!-- more html code here -->

    this.mixin(Dropdown);

</dropdown>

你好，世界！

标记将保留视图（html），而js代码保留在不同的文件中：

• todo.tag（html/css）
• todo.js

---

查看后，我发现可以使用mixin将js与标记文件分离。因此，我们将有如下内容：

<todo>
    <div class="greetings">Hello, world!</div>

    <script src="/path/to/my/file.js"></script>
</todo>

<dropdown>

    <select>...</select>

    <!-- more html code here -->

    this.mixin(Dropdown);

</dropdown>

...
这个.mixin（下拉菜单）；

下拉实例将位于Dropdown.js中，标记位于Dropdown.tag中

---

希望这有帮助

为了提供一种替代

mixin

解决方案的方法，这里有另一种将标记与逻辑分离的方法

看看（我的一位同事写的）。关键部分是引用标记函数的方式<代码>todoTag.call（this，this.opts）。在这种情况下，

todoTag

是一个全局函数。但是没有什么能阻止您命名该函数或使用某种形式的模块加载

来自plunker:

todo.tag.html：

<todo>
    <!-- your markup -->
    <script>todoTag.call(this, this.opts);</script>
</todo>

---

我找到了另一个选项，通过使用常规js构造函数将js代码与标记分开，如下所示：

<dropdown>

    <!-- html code -->

    <script>new Dropdown(this)</script>

</dropdown>

及

---

像往常一样

你为什么要这么做？组件的想法是有一个包含组件所有内容的内聚文件。我从将js代码分离到一个新文件中看到的一个好处是使用Chrome的实时编辑工具。否则，使用编译器就不可能这样做。除此之外，我发现这在前端开发中非常有用，为什么要将它们分开呢？Html和css是视图的一部分，js是逻辑。有一个.tag、.css和.js文件是很自然的。我不明白Riot为什么不允许这样做。@FernandoGabrieli，我还没有真正验证这是如何工作的，但我看到了这篇文章，也许有用：我认为这是不可能的。但是对于开发工作流，我们使用单独的html和js/coffee文件；由于标签文件是在构建时生成的。Peter非常感谢您花时间编写plunker。我也喜欢这个解决方案。可能比混血好，这样我们就不会有太多的暴乱。公平地说，我没有写《普朗克》。我的同事这样做了：）我们在公司内部就这个问题进行了讨论，他写了这篇文章来证明这种可能性。感谢大家的分享

Dropdown.prototype = { ... }