Question

我正在制作一个完全依赖于javascript的玩具项目。项目的一部分依赖于json文件来配置和描述输入类型以及范围值和/或选项。这将允许我大幅扩展和修改内容，同时保持非常低的静态HTML要求。

部分代码需要迭代输入描述并构建适当的HTML元素，将它们插入到DOM中并使用适当的UI小部件进行初始化。我目前正在使用字符串连接函数来创建HTML格式的字符串，然后通过S.append(value)将其添加到DOM。

对于格式为

的给定配置文件

var config = {

    "effects" : [
    {     
        "id" : "asdf_sort",
        "name" : "asdf",
        "function" : "sortPixels",
        "params" : [
            {
                "name" : "img",
                "type" : "Image"
            },
            {
                "name" : "mode",
                "type" : "number"
            },
            {
                "name" : "iterations",
                "type " : "number"
            }

        ],
        "originalImage" : "images/asdf_sort.jpg",
        "afterImage" : "images/asdf_sort_after.jpg",
        "mouseoverText" : "Javascript implementation of &lt;a href = &quot;https://github.com/kimasendorf/ASDFPixelSort&quot;&gt;Kim Asendorf&quot;s Pixel Sort algorithm&lt;/a&gt;",  

        "inputs" : {
            "sliders" : [
                {
                    "name" : "iterations",
                    "default" : 1,
                    "min" : 1,
                    "max" : 20,
                    "range" : true
                }
            ],
            "dropdowns" : [
                {
                    "name" : "mode",
                    "values" : [
                        {
                            "value" : 0,
                            "text" : "Black Sort"
                        },
                        {
                            "value" : 1,
                            "text" : "Brightness Sort"
                        },
                        {
                            "value" : 2,
                            "text" : "White Sort"
                        }
                    ]
                }   
            ]
        }
    }
  ]
}

为了构建输入滑块部分，我编写了函数

//takes in the sliders array and creates and appends the HTML elements to the
//DOM, then initializes with the jQuery UI Slider widget
function buildSliders(sliders, name){

    var appendString = "";

    //build html string and add to dom
    for (var i = 0; i < sliders.length; i++){
        appendString += "<div class = 'slider_element'><div class = 'slider_label effect_label effect_input " + name +
            "_effect'>" + sliders[i].name.capitalize() + "</div><div id = '" + name + "_slider_" + 
            sliders[i].name + "' class = 'effect_slider " + name + "_effect effect_input'>" + 
            "</div><div class = 'slider_value effect_label "+ name + "_effect' id = '" + sliders[i].name + 
            "_value'></div></div>";
    }

    $("#image_controls").append(appendString);

    //initialize jQuery UI Slider widget for each slider element
    for (var i = 0; i < sliders.length; i++){
        $("#" + name + "_slider_" + sliders[i].name).slider({
            range : true,
            min : sliders[i].min,
            max : sliders[i].max,
            value : sliders[i].default,
            step : 1,
            slide : function(event, ui){
                var name = $(this).attr("id").split("_")[2];
                $("#" + name + "_value").text(ui.value);
            }
        });
    }

}

它的工作，但for循环的appendString +=位是维护和修改的噩梦。但是，我真的想不出一种更简单，更易于维护的方法来实现它。

另一种方法是模仿C的sprintf函数，并使用%d，%s和其他占位符来构建字符串。但是，这仍然需要我首先创建HTML字符串。

我可以使用哪些替代方案？

Answer 1

您的标记应该单独存储（理想情况下可以在可以通过ajax加载的其他文档中），但您也可以只存储在变量中。像

markup = "<div class = 'slider_element'>...</div>"

然后您可以将此字符串（作为jquery对象）分配给局部变量

var slide_elem = $(markup);

然后，使用$() context，您可以操纵此对象，就好像它是一个DOM对象

$('.slider_label', slide_elem).addClass(name+'_effect').append(sliders[i].name);
$('.effect_slider', slide_elem).attr('id', name+'_slider_'+sliders[i].name).addClass(name+'_effect');
$('.slider_value', slide_elem).attr('id', sliders[i].name+'_value').addClass(name+'_effect');

最后你可以将它附加到你的DOM

$(<your target element>).append(slide_elem);

工作小提琴here

从配置文件中插入HTML元素的更简单，更易于维护的方法

1 个答案: