Question

我将一些jQuery嵌入到HTML中，但我想“提取”jQuery并将其放入单独的文件中。或者至少将其移出即时HTML代码。从可维护性的角度来看，我认为从长远来看这样做会更好。我希望我没有错误地认为这个原则（SOC）可以指导这种特殊的重构需求。

我在表格中有一个<td>表格单元格，其中包含数量值，然后通过加载值的“编辑”框来对双击事件作出反应。

<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>

问题

我如何分离视图（HTML）的问题并响应视图（JS）上的UI事件？

特别说明：我看到我可以将JS代码移动到一个单独的JS文件中，但这样做会损害可维护性 - 你怎么能分辨出这个特殊的{{1} } field有一些JS代理吗？也就是说，对我来说，可维护性的一部分是能够建立一个代码容易做到的心理模型。只需将代码移到单独的文件中就可能会受到影响。

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

Answer 1

你怎么能告诉这个特定的领域是否有一些JS代理呢？

有几种方法，但它们会要求您编写其他代码或使用第三方工具。见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具有相同的效果。

Answer 2

由于您已经有PHP条件规定了页面上显示的内容，您可能希望将JS放入函数中并调用该函数。

<?if (!$this->isAnOrder) { ?>
    <script> doStuff(); </script>
<? } ?>

在一个单独的文件上..

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

然后，您可以将所有PHP条件放在页面底部的单个脚本标记中。

Answer 3

如果你真的想保持干净，并将你的前端和后端逻辑分开：

使用所需的格式创建HTML文件。
包含指向javascript文件的链接。
设置PHP'控制器'，接受来自POST的内容并使用JSON进行响应。
让Javascript / jQuery访问您的PHP控制器并解释响应。

doSomething.js示例：

function doSomething(param) {
    data = {
        'param': param
    };
    $.post(
        'doSomething.controller.php',
        data
    ).done(
        function (data) {
            // success! do something
        }
    ).fail(
        function (xhr) {
            console.log(xhr);
            // failure! do something else
        }
    );
}

doSomething.controller.php示例：

<?php

// respond as failure
function fail($message = null,$code = 500) {
    http_response_code($code);
    exit($message);
}

// respond as success
function success($message = null, $code = 200) {
    http_response_code($code);
    exit($message);
}

// access the backend models and interpret the response
function doSomething($param) {
    // do something on the backend
    $json = json_encode($response);
    success($json);
}

// validate params
if (!isset($_POST['param'])) {
    fail("'param' parameter must be in POST request",404);
}

// trigger the main controller logic
doSomething($_POST['param']);

如何在保持可维护性的同时分离关注点（JS，HTML）？

3 个答案: