Easystruct.js easy to create a fill-in HTML template structure

In the front-end development of the work, often encounter such a situation, when loading the page data, a part of the structure of the content is repeated, but the data is not the same. For example, the forum, paste bar inside the various floors, there are some similar payroll statements, Sales report each line, for example:

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> ';

}

Structures like these are common in front-end development. We usually create something like this and put it in a for or each type of loop to load the data. However, the wording of this structure looks somewhat inconvenient. And it's not very convenient to change. So, for the convenience of work, I developed a pure JS plugin to create the structure. The user can easily create a struct. The plugin after compression only 4kb size, will never occupy your web space! And does not rely on jquery or other frameworks, and can be used independently.

OK, here's how this plugin is used, very simple, for example, just write:

Easystruct ("#id"). struct ("table") (); You can create a table below the specified ID. I implemented a simple selector in the easystruct, can use the #id to select the ID, use the. class to get the first class, with the tag to get the first one. Because I do not want this selector too complex to occupy the JS plug-in space, so only the above three options, but I believe it is fully enough. After all, this plugin only works to create structures.

There will be some people think, with easystruct this string character to write very troublesome, ah, yes, I also feel very troublesome, so I wrote a sentence: var es = easystruct;

At this point the sentence above is equivalent to es ("#id"). struct ("table") ();

If the user does not like ES the name of it, very simple, only need this: var you set the name = Easystruct;    or var you set the name = ES; So that you can use whatever you like.

Attentive friends may notice that I have just written es ("#id"). struct ("table") (); There's another one (), well, yes, it's not like I wrote it wrong or written much, but it was. Why, because the front es ("#id"). The struct ("table") returns a function, not a direct execution. Do not use direct execution is for us to fill in the parameters.

Let's look at a second example below:

ES ("#id"). struct ("table|style[background-color]|") ("Red");

This time, after the word "table", more "|style[background-color]|" , and the following curly braces fill in the "red", it is very simple, we define in this structure a table Background-color interface, and the latter "red" is the user's own fill in the value, so, We can define the background color of the table as red.

Of course, the above notation can also be written as:

var table = es ("#id"). struct ("table|style[background-color]|");

Table ("Red");

Does that look a lot clearer? Yes, Easystruct's role is to create such a structure, as long as we assign the structure to a variable, we can arbitrarily call the structure anywhere, placed in the For loop is naturally not a problem. Of course, many times, we need to fill in more than one variable is not it? See below:

var table = es ("#id"). struct ("Table|style[background-color color]|");

Table ("Red", "yellow");

Very simple, write directly in it! In that case, we set the font color to yellow!

var table = es ("#id"). struct ("Table|style[color background-color]|");

Table ("Red", "yellow");

Of course, if the above background-color and color position is switched over, it will become a red font, yellow background. The variables and the order in which they appear are one by one corresponding. If you fill in too many variables, such as a "blue" in the back, there is no effect. If less, say no "yellow", it is equivalent to not add a background color, there will be no bug.

My setup is to fill in a certain value in the middle of the two vertical bars to indicate the parameter content that needs to be passed in. These values need to be separated by a space.

The values that can be passed in include: "ID" "Class" "HTML" "style"

"ID" and "class" have nothing to say, "HTML" is the text content, "style" is usually the content of the entire style. As an example:

var div = es ("#id"). struct ("Div|id class HTML style|");

Div ("AAA", "BBB", "haha", "display:block;color:red;width:100px;height:50px");

Equivalent to the notation of jquery:

function Div (id,class,html,style) {

$ ("#id"). Append (' <div id= ' ' +id+ ' "class=" ' +class+ ' "style=" ' +style+ ' "> ' +html+ ' </div> ');

};

Div ("AAA", "BBB", "haha", "display:block;color:red;width:100px;height:50px");

In addition, if there is a single or multiple attr or style, it can also be filled in curly braces, for example:

var div = es ("#id"). struct ("Div|style=[background-color color] attr[onclick onmouseover]|");

Div ("Red", "yellow", "alert (1)", "This.color=\ ' green\ '");

Equivalent to creating a thing like this: <div style= "background-color:red; Color:yellow "onclick=" alert (1) "onmouseover=" this.color=\ ' green\ ' "></div>

I believe that the above example has been made very clear. Then maybe someone will say, I need to fill in the content is not all ah, some things are fixed, such as table ID, I would like it to be fixed, and do not need to fill in. Of course this is possible. Example:

var table = es ("#id"). struct ("Table" (#aaa. BBB $background-color:red;color:yellow; @onclick =alert (1) @onmouseover =alert (2)) ");

Table ();

At this time equivalent: <table id= "AAA" class= "BBB" style= "background-color:red; Color:yellow "onclick=" alert (1) "Onmouseover=" alert (2) ></table>

The syntax is simple, and the content that needs to be filled in directly instead of being assigned as a parameter is enclosed in parentheses. If it is an ID, write #id,class. Class,style just add a $,attr to the front and add a = symbol in the middle, so that the content can be written directly in. The contents of the parentheses and the contents of the vertical bar can exist at the same time, and they who sleep first can, do not affect the execution.

For example: var div = es.struct ("div ($color: red;) |id class attr[onclick]|");

Div ("AAA", "BBB", "alert (1)");

Equivalent: <div style= "color:red" id= "AAA" class= "BBB" onclick= "alert (1)" ></div>

In this way, whether written in a fixed, or parameter form, there is no problem, is not very convenient?

Of course, after solving the above problem, there is no way to do the actual application, because we usually write the structure can not only a DOM element, for the most simple example, we use the above method to create a TR structure, and then put in a for loop executed 10 times, This really can be inserted in a table 10 tr, but the 10 tr inside is not even a TD. It can't be used at all. Don't worry, now we're going to solve this problem:

For Easystruct, each time a struct can be passed in with an unlimited number of arguments, and subsequent arguments become sub-parameters of the preceding parameter, for example:

ES ("#id"). struct ("div", "span");

This is equivalent to creating a div below the specified ID, and then creating a span below the div. As for the various attributes of this span and div, this is not to be discussed here, as is the case with the above notation. If it is directly filled with vertical bar parameters, then the order of execution is from left to right, if the div has a vertical bar, the first execution, and then judge span there is no vertical bar, then execute, and so on.

But there is a problem here, for example, I want to put two span under this div, if I write like this:

ES ("#id"). struct ("div", "span", "span");

It's obviously wrong, so writing is equivalent to putting a span in this div, and in this span there is a span, a hierarchical relationship, not a sibling relationship.

So I thought of a solution that could be changed to this way:

ES ("#id"). struct ("div", ["span", "span"]);

Now that two spans are placed in the same array as the second parameter, they will be a sub-argument to the previous parameter div.

Sounds like you've solved the problem, hasn't it? Not really, because in terms of actual work, the structure we need is sometimes very complex, and it's not as simple as the example I'm going to cite. My example is just for the convenience of the reader to understand.

So let's look at another situation, and I'll write it in HTML:

<table>

<tr>

<td></td><td></td><td></td>

</tr>

<tr>

<td></td><td></td><td></td>

</tr>

</table>

The structure is that there are two TR under a table, and there are three TD below the two TR respectively. For table, such a structure is too simple and too common. But for our easystruct, there's going to be a problem. And look at:

ES ("#id"). struct ("table", ["tr", "tr"], ["TD", "TD", "TD", "TD", "TD", "TD"]);

If we write the above, the structure that appears is the first TR below there are six TD, but the second TR under nothing! If we write the fourth parameter, it becomes the sub-parameter of the first TD under the first TR, which is not the result we want ...

So surely someone would say, "Can we change the structure to this:

ES ("#id"). struct ("table", ["tr", ["TD", "TD", "TD"], "tr", ["TD", "TD", "TD"]]);

Theoretically, it is difficult to implement the above nested design through functions, but it is not a problem. But such a structure is not intuitive to read, and it is not easy to understand. So the author finally gave up the design pattern, but changed to the following form:

ES ("#id"). struct ("table", ["tr", "tr"],["(0) TD", "(0) TD", "(0) TD", "(1) TD", "(1) TD", "(1) TD"]);

This way of writing seems to be very intuitive, the first three TD more than a 0, that is, specify that they will be placed in the upper layer of the first object below. (since index is usually represented by 0 for the first one, so the author also follows the usual habits of the array here), and the next three are obviously placed below the second tr.

In this way, although a little bit longer to write, but it can be very intuitive to solve the problem! (In my design process developed five or six layout mode, this is the author thinks the simplest best understanding, so I finally chose this layout way, if there is a better layout, welcome message advice, grateful! ）

With this pattern, each parameter in the Es.struct () represents a layer of a tree-like structure. The first parameter is the first layer, the second is the second, and the third is the third layer ... And so on, if there is more than one DOM object in each layer, the layer becomes an array, and each parameter becomes a child of the first DOM object of the previous layer, without any special designation. After a special designation, it becomes a sub-object of the specified object.

For example, our above example uses three layers, assuming now I want to put a div under the first TD under the first TR, and want to put a span under the second TD of the second TR, then write:

ES ("#id"). struct ("table", ["tr", "tr"],["(0) TD", "(0) TD", "(0) TD", "(1) TD", "(1) TD", "(1) TD"],["(0) div", "(4) span"]);

Let's take a look at the fourth layer, the inside of the div in front of the serial number is 0, that is, it will be placed in the first layer on the inside, and the first layer of the second will chase to the first one layer of TR ... (In fact, when writing we only need to use linear thinking can be, do not need a layer of ground to consider, here just to write to understand some of the convenience of the reader to understand it.) Look at span again, its index is 4, so it will be placed below the fifth of the previous layer. The fifth TD on the previous layer is the second sub-object of the second TR object. In this way, we implement the structure:

<table>

<tr>

<td>

<div></div>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

<span></span>

</td>

<td>

</td>

</tr>

</table>

Now, in a hierarchical and decision-making order, no matter how complex the DOM tree structure can be arranged. There will be no problem with easystruct. Now, no matter how complex the structure is, we can write it out.

As for some people say ["(0) TD", "(0) TD", "(0) TD", "(1) TD", "(1) TD", "(1) TD") Such writing looks very verbose, is it possible to simplify, the author has also considered this issue. Although there are some possible workarounds, it is not easy to read the code after simplification. After all, our design also needs to consider the question of readability. The reader does not want your code to be written in another two months, even if you can't read it?

If the problem is to be solved, the reader will write a for-loop method to create the array and use it with the easystruct. Example:

function tr () {

var arr = [];

for (Var i=0;i<3;i++) {Arr.push ("(0) TD")}

for (Var j=0;j<3j++) {Arr.push ("(1) TD")}

return arr;

}

ES ("#id"). struct ("table", ["tr", "tr"], tr (), ["(0) div", "(4) span"]);

=_= but I don't think it's much easier to write like this ....

Haha, for the lengthy TR structure may be necessary, generally do not write this.

And it's important to note that we're creating a structure! Structure Ah! It's not like you're going to create all the content at once. Because easystruct used a lot of for loops and regular expressions, if the reader is executed many times, the efficiency is very low, there is no need. Usually we only need to create one to two structures, and then reuse these one or two structures is enough. For the static content part of the page, although can use easystruct, but the execution efficiency is not high, so I do not recommend this write.

PostScript: The development of this plug-in there is another reason, that is, I have been imagining can be used to completely replace the HTML JS, so that the seemingly messy HTML structure to completely get rid of it? After a period of experimentation, the author finds that it is possible to write a page that does not have any HTML at all. If it is a design, and will not be modified later, then this writing is not a problem. But what if you need to change your page structure often? The Pure JS writing page will definitely make you change the egg to the ground ... Ha ha.

Well, this time the easystruct is here. I think that the JS research process itself is the most interesting, the most meaningful. If you really want to learn the front-end development, do not soak in the gentle village of jquery to enjoy, some problems, such as the compatibility between browsers, or to think about their own, conditional words also want to make jquery to achieve again. The author recently almost settled their own jquery, I named Joy.js. In a few days I will write the whole design process and put it on the blog to share with you.

Code Address: http://download.csdn.net/detail/sinolzeng/8465619

Easystruct.js easy to create a fill-in HTML template structure