Gossip js Front End FRAME (5)--look at the miniature rendering engine I designed a year ago

Gossip js Front End frame

Front-end person = artwork + Design + code + Test
--Preface

Featured Articles:

First, from the avalonjs of the template talk about
Second, the huge Angularjs
Third, don't want to touch DOM again
Iv. Modular? Is there a back-end thing?
V. Look at the miniature rendering engine I designed a year ago
Six, the browser standard on the fuss
Seven, throw away the browser, build application container
Eight, why flash, Silver and Java are on the web end of the

This article belongs to the West Wind getaway original, reproduced please indicate the source: West Wind World http://blog.csdn.net/xfxyy_sxfancy

V. Look at the miniature rendering engine I designed a year ago

During the year of the site, I was mainly in a back-end role in the work, sometimes PHP, sometimes Java ee, and Python, the most common job is to write an interface, the interface obtained by the data to judge the exception, and then modify the format into the database.

And I do the front-end work, a handful, occasionally with Avalon, sometimes with the Angularjs, the other almost did not move. But when I was a beginner, I did a design that I now look like, and I made a small rendering engine, and I named him ntml (the HTML that is about to crumble).

Need to introduce a jquery engine

Said the goods is an engine I was helpless.

First of all, there is only one JS class, manually exported symbols, not yet write closures. You also need to introduce jquery before use ...
I really want to say that this is a jquery plugin--! But he doesn't even count the plugins!

The reason for the introduction of jquery is very simple, and from that point on, I wouldn't encapsulate a cross-platform Ajax function! There are also XML parsing functions!

What about the function of the engine?

Say it is very fun, altogether more than 200 lines of JS code, and introduced someone else's library, the implementation of this function, will be such code:

<?xml version= "1.0" encoding= "Utf-8"?> <ntml><nt-container nt-var='>  <nt-layout-8-4>    <a-left>      <nt-article>        <a-title>Some introduction to NT syntax</a-title>        <a-content>Let's take a brief look at the markup language of ntml.</a-content>      </nt-article>    </a-left>    <a-right>      <nt-loginform>        <params Action=' # ' method=' Get ' />      </nt-loginform>    </a-right>  </nt-layout-8-4></nt-container></ntml>

Render it this way:

Did you find it interesting?

But the function is really not much, it is just such a function, even what event binding ah, did not do.
Of course, the code shown here is not entirely, and he works by actually replacing the tags declared in the XML with the pre-written templates under the template. The corresponding need to have nested parts, but also with the property to specify each corresponding template label is OK.

ntml Syntax specification

All tags that need to be parsed by ntml can be added ' nt-' to be interpreted by the interpreter. ' nt-' is the prefix of the standard ntml component library, and you can also specify the name prefix yourself.
eg.

  <nt-login_form class=‘col-xs-12 col-xs-4‘>  </nt-login_form>

The NT object below the sub-object, all prefixed with ' nta-', is considered to be an attribute in the NT syntax
eg.

  <nt-article class=' col-xs-12 col-xs-8 '>    <a-title>Some introduction to NT syntax</a-title>    <a-date>2014-8-10</a-date>    <a-content>Let's take a brief look at the markup language of ntml.<nt-ad class=' col-xs-12 col-xs-8 '>      </nt-ad>    </a-content>  </nt-article>

The properties under the params tag in the NT object are interpreted as declarations, and the contents are interpreted as content
eg.

 < Nt-article  class  = ' col-xs-12 col-xs-8 '   <params  title  = Some introduction to NT syntax '  date  = ' 2014-8-10 ' ;  let's briefly introduce Ntml's markup language. <nt-ad  class  =< Span class= "Hljs-value" > ' col-xs-12 col-xs-8 ' ;  </ nt-ad ;  </a-params ;  </nt-article ;   

The label for the non-NTA prefix of the NT object will also be interpreted as content
eg.

  <nt-article class=‘col-xs-12 col-xs-8‘>    <a-params title=‘关于nt语法的一些介绍‘      date=‘2014-8-10‘ />    下面我们来简要介绍一下ntml这种标记式语言。    <nt-ad class=‘col-xs-12 col-xs-8‘>    </nt-ad>  </nt-article>

If there are multiple content locations at the same time, they will be added from top to bottom.

The

NT component template Development
NT parser interprets the outermost label as a Div, so you don't have to add a nested div.
eg.

 <?  XML version=< Span class= "hljs-string" > "1.0"  encoding= "Utf-8"  ?>  <div  style  = ' align-center; '   <h1 ;  {#title}} </h1 ;  <h5 ;  {{#date}} </h5 ;  </div ;  <p ;  {{#content}} </p ;  

We use the Arttemplate template engine, we recommend compiling the template into JS code, using the Tmodjs tool.

Regret

The biggest problem with this rendering engine is not the problem of efficiency, but the choice of template engine. I didn't know much about the front end, and I chose a static engine to render it. This creates a problem that the engine is estimated to be more suitable for use in the backend ...
In other words, originally wanted to develop an easy-to-use front-end engine, but inadvertently made a nodejs can use the back-end engine-!

Want to see the whole situation

GitHub Warehouse Address: https://github.com/sunxfancy/ntml
Welcome to fork and suggestions
~ ~ (>_<)~ ~, the release has been a year, a see also no, suddenly found not written readme!
I'm just too young to blame.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Gossip js Front End FRAME (5)--look at the miniature rendering engine I designed a year ago