在前端开发的工作中，经常会碰到这样的情况，加载页面数据的时候，有一部分内容的结构是重复的，只是数据不一样。比如说论坛、贴吧里面的各个楼层，还有一些类似工资报表、销售报表的每一行，举个例子：
function addTr(data1,data2,data3){
return ‘<tr style="text-align:center"><td style="height:40px;">’+data1+'<td><td style="height:40px;">’+data2+'<td><td style="height:40px;">’+data3+'<td></tr>’;
}
类似这样的结构体，在前端开发中很常见。我们通常会创建一个这样的东西之后，放到一个for或者each类型的循环中用于加载数据。但是，这种结构的写法看起来多少有些不便。而且要改动也不是很方便。所以，为了工作上的便捷，我开发了一个创建结构的纯js插件。用户可以轻松创建结构体了。该插件经过压缩后只有4kb的大小，绝对不会占用你的网页空间！而且不依赖于jquery或其他框架，可以独立使用。
好了，下面说一下这款插件如何使用，非常简单，举个例子，只需要写：
EasyStruct("#id").struct("table")(); 就可以在指定的id下方创建一个table了。我在EasyStruct中实现了一个简单的选择器，可以用#id选择id，用.class获取class的第一个，用tag获取tag的第一个。由于不希望该选择器太过复杂占用js插件空间，所以只实现了以上三个选择，不过我相信已经完全够用了。毕竟这个插件的作用仅仅是用来创建结构而已。
肯定会有人觉得，用EasyStruct这一串字符来写非常麻烦，嗯，没错，我也觉得很麻烦，所以我写了一句：var es = EasyStruct;
此时上面的那一句就等价于 es("#id").struct("table")();
如果用户不喜欢es的名字呢，很简单，只需要这样： var 你设定的名字 = EasyStruct; 或者 var 你设定的名字 = es; 这样就可以随便你使用了。
细心的朋友可能会注意到，我刚刚写的es("#id").struct("table")(); 后面还有一个()，嗯，没错，这个绝对不是我写错了或者写多了，而是本来如此。为什么呢，因为前面的es("#id").struct("table")返回的是一个function，而不是直接执行。不采用直接执行是为了我们可以填入参数嘛。
下面再看第二个例子：
es("#id").struct("table|style[background-color]|")("red");
这一次，在“table”的字样后面，多出了"|style[background-color]|"的字样，而后面的花括号里填入了“red”，很简单，就是我们在这个结构中定义了一个设置这个table的background-color的接口，而后面的“red”就是用户自己填入的值，这样，我们就可以将table的背景色定义为红色。
当然，上面的写法也可以写成：
var table = es("#id").struct("table|style[background-color]|");
table("red");
这样看起来是不是就清晰很多了呢？没错，EasyStruct的作用就是用来创建这样的结构的，只要我们将结构赋值给一个变量，就可以在任何地方随意地调用该结构了，放在for循环里面自然就不是什么问题了。当然了，很多时候，我们需要填入的可不止一个变量是不是？看下面：
var table = es("#id").struct("table|style[background-color color]|");
table("red","yellow");
很简单，直接写进去就可以了！这样的话呢，我们就把字体颜色给设置成了黄色了！
var table = es("#id").struct("table|style[color background-color]|");
table("red","yellow");
当然，如果上面的background-color和color的位置倒换过来的话，就会变成红色字体，黄色背景了。变量和出现的顺序是一一对应的。如果你填入的变量过多，比如在后面多了一个“blue”，是没有任何效果的。如果少了，比如说没有“yellow”，就相当于没有添加背景色而已，也不会出现什么bug的。
我的设定是在两个竖杠中间可以填入一定的值来表示需要传入的参数内容。这些值需要用空格隔开。
可以传入的值包括：“id” “class” “html” “style”
“id”和“class”没什么好说的，“html”就是文本内容，“style”就是平时整个style的内容。举个例子：
var div = es("#id").struct("div|id class html style|");
div("aaa","bbb","哈哈","display:block;color:red;width:100px;height:50px");
等价于jquery的写法：
function div(id,class,html,style){
$("#id").append(‘<div id=“’+id+’” class="’+class+’" style="’+style+’">’+html+'</div>’);
};
div("aaa","bbb","哈哈","display:block;color:red;width:100px;height:50px");
另外，如果有单个或多个的attr或者style的话，也可以以花括号的形式填充进去，举个例子：
var div = es("#id").struct("div|style=[background-color color] attr[onclick onmouseover]|");
div("red","yellow","alert(1)","this.color=\’green’");
相当于创建了一个这样的东西：<div style="background-color:red; color:yellow" onclick="alert(1)" onmouseover="this.color=\’green’"></div>
相信上面的例子已经说得很清楚了吧。接下来可能有人就会说，我需要填写的内容并不是全部啊，有些东西是固定的，比如table的id，我就希望它是固定的，而不需要自己填进去。这个当然是可以的。举例：
var table = es("#id").struct("table(#aaa .bbb $background-color:red;color:yellow; @onclick=alert(1) @onmouseover=alert(2))");
table();
夺冠那一刻,豪情万丈!登顶那一瞬,万众瞩目!那一刻的嫣然一笑,
