Gossip js Front End FRAME (1)--from Avalonjs's template

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

First, from the avalonjs of the template talk about

I have been developing the site for more than a year, in fact, has been working as a back-end staff. Unfortunately, I am not interested in the maintenance of the database, and I like the gorgeous interface effect, so secretly pay attention to the front-end movements.

Personally, I do not like the site of this model, I like the application of fine, powerful, easy-to-use desktop GUI, or the use of simple mobile phone applications. Networking applications gave me a sluggish, slow feeling from the start, and a heavy reliance on the Web. But then I found out that it was just my personal bias, and no one was saying that networked applications would be stuck, and no one said that networked apps couldn't work offline. Of course, this is also recently, more and more desktop programs and mobile applications, began to turn to HTML5 development, the trend.

The embarrassment of the primary website

Last year, I contacted JQuery, learned the animation, Dom operation, Ajax, feel that the site can get started, and began to use Php+jquery to build my first small site. The first PHP framework Phalcon, using a large number of back-end templates, creates the entire project.

While I was looking for a jquery plugin, I found an awkward question. Different kinds of jquery plug-ins, stir together, is simply a hell of a living. I want to make a background function, drag and drop a tree-type control, after the end of placement, a dialog box pops up, and then set some features in the dialog box. I did not get this task for three days, although I ended up with a lot of disgusting jquery event bindings + Unbind to finally let it work, but I don't want to see those scary jquery code anymore.

In the final analysis, there is only one problem, JS organization is not correct, based on event monitoring and callback work, will inevitably make all the JS function flattened trend, that is, all the JS function in the same layer calls each other, you can not understand what the code is part of the function. as a result, the overall coupling is very high .

Three days of thinking

Three days after the project was completed, I did nothing and thought about the problem for three days. I think the web side is difficult to develop complex logic, but the desktop GUI did not find it so difficult to design, it should be the problem of the component. Web applications are very difficult to set up because of their design constraints. A piece of HTML code, not only rely on the current CSS environment and JS Environment, and even browser different will cause a certain difference.

In order to achieve the component, it is necessary to consider encapsulation, the content of the horror inside the module, the elegant interface to show outside , this is the essence of encapsulation.

After the decision, I began to practice. I started writing a very small, hierarchical rendering engine that I named ntml. To be exact, this is not a front-end template engine, but more like a backend template engine, this unique syntax engine gives me a general idea of modular development at the front end, and later in the article I'll mention the very interesting design again.

Masaki the Great God's frame

Front-end modularity, with this problem, I went to find someone else's help. Our Science and Technology guide Koushik comrade, really very strong, I asked him this aspect of the problem, his first push to our solution is angularjs, of course, there are Requirejs and ExtJS.

At this point, I found that I pushed the front door open, I gradually accept the front-end talent will think the concept. I also installed the NODEJS,NPM package management, grunt build, understand the AMD loader, CSS hack and so on, but at that time, I did not learn Angularjs,extjs, after all, these libraries are perverted level of the big! For me who like to lean, this huge project is not very appetite (as compared to QT, prefer gtk, compared to Python, Ruby, more like Lua), so I picked the avalonjs this lightweight front-end Template Library, but also understand the domestic front of the great God Masaki.

See Avalon Design, feel very good, and soon use a variety of website projects. To gain a deeper understanding of the underlying framework structure, I also bought Masaki's book, JavaScript framework design, to learn.

I found that the biggest advantage of the front-end framework is that the front-end development into a similar traditional client program development, and gradually reduce the page jump, or even directly into a single-page mode, non-page-hopping web applications, is moving toward the native application.

Avalonjs weapon

Avalon (Avalon) is the mythical island of King Arthur's eternal burial. And Avalonjs, like his name, is a very desirable country to look forward to. Here's a look at the basic Avalon example given by Masaki:

<! DOCTYPE html><html>    <head>        <title></title>        <meta http-equiv="Content-type" Content="text/html; Charset=utf-8 ">        <script src="Avalon.js"></script>    </head>    <body>        <div ms-controller="box">            <div Style="background: #a9ea00;" ms-css-width="W" ms-css-height= "h"ms-click="click">   </div>            <p>{{W}} x {{h}}</P>            <p>W:<input type= "text" ms-model= "w" data-event=" Change "/></P>            <p>H:<input type="text" ms-model="h" /></P>        </div>        <script>avalon.define ("box",  function(VM) { VM.W =                 ;                vm.h = +; Vm.click =  function() { VM.W = parsefloat(VM.W) + 10;                vm.h = parsefloat(vm.h) + ten; }            })        </script>    </body></html>

This pattern, called a dynamic template, is different from the way traditional static templates work. There used to be a lot of front-end templates, that is, to give a text of text, and then replace the contents of the content, replaced by directly as HTML content into the DOM. This is not good, although the static template is simple, but his biggest disadvantage is to update the HTML code, rebuilt the DOM tree, so that the original registered event is gone.

As a result, the template works by simply writing the template into a readable HTML code, then traversing the DOM tree and parsing each node in turn. If you need to add content, or if you need to modify an element, just manipulate the fewest portions of the DOM tree.

Avalon has a lot of design ideas are very good, including I am very optimistic about the component programming model, but unfortunately more complicated, I have not been able to master, I would like to consider optimization, to reduce the difficulty of writing components.

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

Gossip js Front End FRAME (1)--from Avalonjs's template