javascript - 如何在保持可维护性的同时分离关注点(JS、HTML)？

Question

我有一些 jQuery 嵌入到 HTML 中，但我想“提取”jQuery 并将其放入一个单独的文件中。或者至少，将其移出直接的 HTML 代码。我认为从长远来看，就可维护性而言，这样做会更好。我希望我没有弄错，因为这个原则 (SOC) 指导了重构的特殊需求。

我有一个<td>表格内的表格单元格保存数量值，然后通过加载该值的“编辑”框来对双击事件使用react。

<td id="qty">

    <?if (!$this->isAnOrder) { ?>
        <script>
        $("#qty" ).dblclick(function() {
            $.get('edit.php?id=<?=$this->id?>', function( data ) {
                $( "#qty" ).html( data );
            });
        });
        </script>
    <? } ?>

    <?=$this->quantity?>

</td>  

问题

如何将 View (HTML) 的关注点与响应 View (JS) 上的 UI 事件分开？

特别说明:我发现我可以将 JS 代码移动到单独的 JS 文件中，但这样做会损害可维护性 - 您如何判断这个特定的 <td> 是否有效？ field有一些JS在作用吗？也就是说，对我来说，可维护性的一部分是能够轻松地构建代码功能的心理模型。简单地将代码移至单独的文件中可能会造成损害。

所以我的问题变成了 - 如果可能的话，如何分离关注点并保持可维护性完整？

Answer 1

how would you be able to tell if this particular field has some JS acting on it?

有几种方法，但它们需要您编写额外的代码或使用第三方工具。请参阅How to find event listeners on a DOM node when debugging or from the JavaScript code?

一般来说，仍然建议将 Javascript 与 HTML 分开，将其保存到单独的 JS 文件中并包含它。

例如，在您的头部:

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

与直接在 html 文件中编写 javascript 具有相同的效果。