Javascript 从配置文件中插入HTML元素的更简单、更易于维护的方法
我现在正在做一个完全依赖javascript的玩具项目。项目的一部分依赖于json文件来配置和描述输入类型以及范围值和/或选项。这将允许我在保持非常低的静态HTML要求的同时,动态地扩展和修改内容 部分代码需要迭代输入描述并构建适当的HTML元素,将它们插入DOM并使用适当的UI小部件初始化。我目前正在使用字符串连接函数创建一个HTML格式的字符串,然后通过Javascript 从配置文件中插入HTML元素的更简单、更易于维护的方法,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我现在正在做一个完全依赖javascript的玩具项目。项目的一部分依赖于json文件来配置和描述输入类型以及范围值和/或选项。这将允许我在保持非常低的静态HTML要求的同时,动态地扩展和修改内容 部分代码需要迭代输入描述并构建适当的HTML元素,将它们插入DOM并使用适当的UI小部件初始化。我目前正在使用字符串连接函数创建一个HTML格式的字符串,然后通过S.append(value)将其添加到DOM中 对于具有以下格式的给定配置文件: var config = { "effects
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 <a href = "https://github.com/kimasendorf/ASDFPixelSort">Kim Asendorf"s Pixel Sort algorithm</a>",
"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);
}
});
}
}
//接收滑块数组并创建HTML元素并将其附加到
//DOM,然后使用jQueryUISlider小部件进行初始化
函数构建滑块(滑块,名称){
var appendString=“”;
//构建html字符串并添加到dom
对于(变量i=0;i
它工作正常,但for循环的appendString+=
位是维护和修改的噩梦。然而,我真的想不出一种更简单、更易于维护的方法来实现这一点
一种替代方法是模拟C的sprintf
函数,并使用%d
、%s
和其他变量占位符来构建字符串。然而,这仍然需要我首先创建HTML字符串
我可以使用哪些替代方法?您的标记应该单独存储(最好是存储在可以通过ajax加载的不同文档中),但也可以存储在变量中。像
markup = "<div class = 'slider_element'>...</div>"
然后,使用,可以像处理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);
$()。追加(幻灯片元素);
Working fiddle几乎任何模板库都可以使用,我从Mustache开始。这个问题似乎离题了,因为它是关于工作代码的:@A.Wolff,我不同意。这里有许多问题是关于如何改进代码片段的,这些代码片段在其他方面是有效的,但有着重大的问题。@Jason这是你的观点,我尊重它。希望你能得到一个符合你需要的答案。我认为这样的东西更容易维护,更有秩序,像这样的东西(快速编写,未经测试)->
$(<your target element>).append(slide_elem);