的javascript

Question

我正在创建一个模板系统，可以在客户端使用Javascript进行解释，以构建空白表单中的填充，例如给客户的信等。

我构建了模板，逻辑以伪代码的形式出现，但是我对jQuery的不熟悉，我可以用一些方向让我开始。

基本思想是我的文本节点中有一个标记，表示一个字段，例如$ {prologue}然后将其添加到名为“fields”的数组中，然后将其用于在xml中搜索相应的节点名称。

XML

    <?xml version="1.0" encoding="UTF-8"?>
<message>

    <text>${Prologue} - Dear ${Title} ${Surname}. This is a message from FUBAR. An engineer called but was unable to gain access, a new appointment has been made for ${ProductName} with order number ${VOLNumber}, on ${AppointmentDate} between ${AppointmentSlot}.
Please ensure you are available at your premises for the engineer. If this is not convenient, go to fubar.com or call 124125121515 before 12:00 noon the day before your appointment. Please refer to your order confirmation for details on what will happen on the day. ${Epilogue} - Free text field for advisor input<
</text>

    <inputTypes>
        <textBox type="text" fixed="n" size="100" alt="Enter a value">
            <Prologue size="200" value="BT ENG Appt Reschedule 254159" alt="Prologue field"></Prologue>
            <Surname value="Hoskins"></Surname>
            <ProductName value=""></ProductName>
            <VOLNumber size="8" value="" ></VOLNumber>
            <Epilogue value=""></Epilogue>  
        </textBox>
        <date type="datePicker" fixed="n" size="8" alt="Select a suitable appointment date">
            <AppointmentDate></AppointmentDate>
        </date>
        <select type="select" >
            <Title alt="Select the customers title">
                <values>
                    <Mr selected="true">Mr</Mr>
                    <Miss>Miss</Miss>
                    <Mrs>Mrs</Mrs>
                    <Dr>Dr</Dr>
                    <Sir>Sir</Sir>                  
                </values>
            </Title>
            <AppointmentSlot alt="Select the appointment slot">
                <values>
                    <Morning>9:30am - 12:00pm</Morning>
                    <Afternoon>1:00pm - 5:00pm</Afternoon>
                    <Evening>6:00pm - 9:00pm</Evening>
                </values>
            </AppointmentSlot>
        </select>
    </inputTypes>
</message>

伪代码

Get list of tags from text node and build array called "fields"
For each item in "fields" array:
Find node in xml that equals array item's name
Get attributes of that node
Jump to parent node
Get attributes of parent node
If attributes of parent node != child node then ignore
Else add the parent attributes to the result
Build html for field using all the data gathered from above

补遗

这个逻辑是否正常，是否可以从节点的父节点开始向下导航？

关于继承，我们可以得到父属性，如果子属性不同，那么将它们添加到结果中？如果父项中的属性数量不等于子项中的数字呢？

请不要提供完全编码的解决方案，只是为了让我开始一点点戏弄。

这是我到目前为止从文本节点

中提取标签的内容

//get value of node "text" in xml
    var start = $(xml).find("text").text().indexOf('$');
    var end = $(xml).find("text").text().indexOf('}');
    var tag = "";
    var inputType;

    // find all tags and add them to a tag array
    while (start >= 0)
    {
        //console.log("Reach In Loop " + start)
        tag = theLetter.slice(start + 2, end);
        tagArray.push(tag);
        tagReplaceArray.push(theLetter.slice(start, end + 1));
        start = theLetter.indexOf('$', start + 1);
        end = theLetter.indexOf('}', end + 1);
    }

欢迎任何其他建议或类似问题的链接。

三江源！

Answer 1

我正在使用类似的技术来进行html模板化。

我没有使用元素，而是发现使用字符串然后将其转换为html更容易。在你使用jQuery的情况下，你可以做类似的事情：

将您的xml作为字符串：

var xmlString='<?xml version="1.0" encoding="UTF-8"?><message><text>${Prologue} - Dear ${Title} ${Surname}... ';

遍历字符串以使用正则表达式进行替换（$ 1是捕获的占位符，例如Surname）：

xmlString.replace(/$\{([^}]+)}/g,function($0,$1)...}

如果需要，转换为节点：

var xml=$(xmlString);

正则表达式的好处：

更快（只是一个字符串，你没有走DOM）
全局替换（例如，如果Surname多次出现），只需循环一次对象属性
简单正则表达式/ $ {（[^}] +）} /以定位占位符

Answer 2

这只是一个让你前进的框架，就像你问的那样。

第一个概念是使用正则表达式来查找$ {}的所有匹配项。它返回一个数组，如[“$ {one}”，“$ {t w 0}”，“$ {three}”]。

第二个概念是一个htmlGenerator json对象，将“inputTypes - ＆gt; childname”映射到负责html打印输出的函数。

第三是不要忘记自然的javascript。 .localname将为您提供xml元素的名称，node.attributes should会给您一个namedNodeMap的回复（请记住不要对jquery对象执行自然的javascript，请确保您是引用为您找到的节点元素jQuery）。

实际流程很简单。

找到所有'$ {}'标记并将结果存储在数组中。

找到xml文档中的所有标记并使用其父信息，将html存储在{"${one}":"<input type='text' .../>","${two}":"<select><option value='hello'>world!</option></select>" ...}

的地图中

遍历地图并用您想要的html替换源文本中的每个标记。

的javascript

    var $xmlDoc = $(xml); //store the xml document
    var tokenSource =$xmlDoc.find("message text").text(); 
    var tokenizer=/${[^}]+/g; //used to find replacement locations
    var htmlGenerators = {
      "textBox":function(name,$elementParent){
    //default javascript .attributes returns a namedNodeMap, I think jquery can handle it, otherwise parse the .attributes return into an array or json obj first.
      var parentAttributes = ($elementParent[0] && $elementParent.attributes)?$elementParent.attributes:null;
    //this may be not enough null check work, but you get the idea
      var specificAttributes =$elementParent.find(name)[0].attributes;
      var combinedAttributes = {};
      if(parentAttributes && specificAttributes){
    //extend or overwrite the contents of the first obj with contents from 2nd, then 3rd, ... then nth [$.extend()](http://api.jquery.com/jQuery.extend/)
          $.extend(combinedAttributes,parentAttributes,specificAttributes);
      }
      return $("<input>",combinedAttributes);
    },
      "date":function(name,$elementParent){
       //whatever you want to do for a 'date' text input
    },
      "select":function(name,$elementParent){
      //put in a default select box implementation, obviously you'll need to copy options attributes too in addition to their value / visible value.
    }
    };
    var html={};
    var tokens = tokenSource.match(tokenizer); //pull out each ${elementKey}
    for(index in tokens){
      var elementKey = tokens[index].replace("${","").replace("}"),"");//chomp${,}
      var $elementParent = $xmlDoc.find(elementKey).parent();//we need parent attributes.  javascript .localname should have the element name of your xml node, in this case "textBox","date" or "select".  might need a [0].localname....
      var elementFunction = ($elementParent.localname)?htmlGenerators[elementParent.localname]:null; //lookup the html generator function
      if(elementFunction != null){ //make sure we found one
        html[tokens[index]] = elementFunction(elementKey,elementParent);//store the result
      }
    }


      for(index in html){
       //for every html result, replace it's token
          tokenSource = tokenSource.replace(index,html[index]);
        }

Answer 3

从文本节点获取标签列表并构建名为“fields”的数组

要创建数组，我宁愿用户regular expression，这是它的最佳用途之一（在我看来），因为我们确实在搜索模式：

var reg = /\$\{(\w+)\}/gm;
var i = 0;
var fields = new Array();

while (  (m = reg.exec(txt)) !== null)
{
    fields[i++] = m[1];
}

对于“fields”数组

中的每个项目

jQuery提供了一些utility functions：

要遍历您的字段，您可以执行以下操作：$.each(fields, function(index, value){});

浏览节点并检索值

只需使用您已经在做的jQuery function。

构建HTML

我会为您负责的每种类型创建模板对象（在此示例中为Text，Select）

然后使用所述模板，您可以使用模板的HTML替换标记。

显示HTML

最后一步是解析结果字符串并将其附加到正确的位置：

var ResultForm = $.parseHTML(txt); 

$("#DisplayDiv").append(ResultForm);

结论

就像你问的那样，我没有准备好开箱即用的任何东西，我希望它能帮助你准备自己的答案。（然后我希望你能与社区分享）

jQuery导航XML父子节点并从每个节点中选择适当的属性？

3 个答案:

的javascript

从文本节点获取标签列表并构建名为“fields”的数组

对于“fields”数组

浏览节点并检索值

构建HTML

显示HTML

结论