Question

例如，假设我们有一个程序将一个ajax请求发送到PHP文件，并且需要应用它的值来执行以下操作：

更新表单输入
设置复选框
更新元素的innerHTML

让我们说下面的代码完成所有这些，这很可爱，但它不是一个优雅的模式，如果我使用超过10-15个值，它的可维护性是可怕的。

JSON只是简单地：{"ID": "1", "gender":"M", .....etc..... }

我做了一个简单的对象，以免我在处理表单时多次编写选择器。

var dataVars = {
    phone       : $("#Phone1_input"),
    gender      : $("#Gender_input"), 
    birthdate   : $("#BirthDate_input"),
    chk01       : $("#chk01"),
    chk02       : $("#chk02"),
    chk03       : $("#chk03")
    /*Imagine 30 more lines of this*/
}

在成功调用ajax获取数据之后，我逐个分配表单对象，并且必须考虑使用硬编码设置更新哪种类型的表单元素。

$.ajax({
     url: "./whatever", dataType: "json", type: "post",
    success: function (data) {
        dataVars.phone.text(data.ID);               //text/innerHTML
        dataVars.gender.val(data.CreationDate);     //Value attribute
        dataVars.birthdate.val(data.UserName);
        dataVars.chk01.attr('checked',data.chk01);  //Checkbox attribute
        dataVars.chk02.attr('checked',data.chk02);
        dataVars.chk03.attr('checked',data.chk03);
        /*Imagine 30 more lines of this*/
    }
});

我普遍认为这很糟糕，虽然我可能想出一个能够进行大量检查的功能，但我不禁提出了许多不同的方法来开始更优雅的解决方案，所以我真的不知道优化它需要走哪条路。我应该将dataVars变成函数对象吗？我应该制作一个功能来检查所有类型吗？我应该更改我的JSON以更具描述性吗？有关最佳设计的想法吗？

Answer 1

您可以查看some templating lib的jquery。

如果你想自己动手，我会做的是：

像这样返回稍微复杂的json：

[
{'type':'checkbox', 'id':'theId', 'val':'value'},
{'type':'container', 'id':'theId', 'val':'value'},
...
]

通过这种方式，您可以在分配值时知道这是什么类型的元素，并且可以调用正确的方法。

现在你的成功功能可能是：

function(data){
    $.each(data){
       var $it = $("#"+this.id);
       if(this.type === "checkbox"){
            if(this.value) {
               $it.attr("checked", "checked");
            } else {
               $it.removeAttr("checked");
            }
       } else if(type === "container"){
            $it.html(this.value);
       } else if(type ==- "input"){
          //todo
       } else if ...
    }
}

这简化了客户端的代码，但这种做法的缺点是现在您的服务器端代码需要了解客户端的元素。

采用JSON并分配给各种属性/ innerHTML的好模式是什么？

1 个答案: