Fengfeng voiceless--data-oriented front-end programming method

1 noun explanations

Tong Hua Wanli Dan Shan Road, Feng-Tang Li Shangyin "Han Dongrong as a poem for the two unique"

As a different traditional front-end programming method, the young wind name.
Data-oriented programming methods, to avoid cumbersome UI code, directly to the front-end data model programming, your program can be more clear and simple. The name of the voiceless.

2 starts with an instance

Avoid too boring statements, we start from the example, we take the Baidu Webim group management as an example.

In this case, we need to perform a list of user groups: Add, delete, modify, save, cancel, sort, etc. six functions.

This is a more common requirement, then, we usually implement this function in the previous paragraph, how to design the general? How much code? How long?

Thinking time ... .......... ..........

===================================================

Okay, now let's show you a simple way to do this:

Program code:

var data = {     "List": [    {         " ID ": 1,        " name ": " my Group 1 "    },    {         "id": 2,         "name":  "my Group 2"          {         "id": 3,         "name":  " My group 3 "    },    {        " id ": 4,         "Name":  "my Group 4"     }    ]}var action = {    Sort: function (list, inc)  {        $ ("sort"). Classname = inc  ?  "Down":  "up";        List.sort (function (a, b)  {            return  (inc ? 1: -1)  * a.name.localecompAre (b.name);        });        render (data);    },    Create: function (name)  {        Data.list.push ({            Id: +new date (),            name: name       &NBSP);        render (data);    },    edit: function (ID)  {        each (data.list,        function (value, i)  {             data.list[i].state = value.id == id ?  "edit" :  "Normal";        });        render (data);         del: function (ID)  {        each (data.list,         function (value, i)  {            if  (value.id == id)  {                Data.list.splice (i, 1);            }        })         render (data);    },    save: function (ID)  {        each (data.list,        function (value, i)  {            if  (value.id == id)  {                value.name = $ ("G_"  + id) .value;                value.state =  "Normal";            }        }         render (data);    },    cancel: function (ID)  {        each (data.list,        function value, i)  {            data.list[i].state =  "normal";        &NBSP);        render (data);    }}function $ (ID)  {     Return document.getelementbyid (ID); Function each (OBJ, FN)  {    for  (var i = 0; i & lt; obj.length; i++)  {        Fn.call (obj[i], obj[i], i);     }}function render (data)  {    $ ("container"). Innerhtml = teamlist (data);

Template code:

<div class= "${item.state}" ><div class= "cell1" ><input id= "g_${item.id}" value= "${item.name}"/ ></div><div class= "cell2" ><button onclick= "Action.submit (${item.id})" > Submit </button>< /div><div class= "Cell3" ><button onclick= "Action.cancel (${item.id})" > Cancel </button></div> <div class= "Cell1 >${item.name}</div><div class=" cell2 "><img onclick=" Action.edit (${item.id} "Src=" Images/edit.gif "alt=" "/></div><div class=" Cell3 "><img onclick=" Action.del (${item.id}) " Src= "Images/delete.gif" alt= ""/></div></div>

Unlike traditional programming methods, we don't directly manipulate HTML or the Document Object model, but rather abstract out a simpler data model-a JavaScript array object.

All of our operations start with this simple raw data, and after the data model has been modified, the template rendering function is called, and the front-end local refresh is presented to the UI. Operation to complete.

All of our operations start with this simple raw data, and after the data model has been modified, the template rendering function is called, and the front-end local refresh is presented to the UI. Operation to complete.

How much code can be simplified by this method? You can go through some of the more famous JavaScript books, which usually take a section to explain a topic, that is, table sorting.

Do you need a chapter to explain the 7 lines of code that are sorted by table here?

3 Core Ideas 3.1 Everything starts at the source

One of the problems with traditional programming methods is that the object of his modification is the Document Object model, but when your program is complex enough, the Document object model is often not simple enough, there is too much redundancy, or there is too much static display logic, we control it very cumbersome. Well, we don't have to accommodate the Document Object model, we want to design simpler front-end models without redundancy.

Everything starts from the source, not only for the simpler operation, but also for avoiding the harm of data inconsistency and error accumulation.

If it is a traditional document data model, not only does he have a lot of redundancy. Our previous operation code is also easy to have a lot of redundancy. As in the previous example, the traditional method, the initial display of the group list and later edited, add the grouping, may be generated by different methods, distributed in a variety of code, a single related to the presentation of the style of change, have to sync editing, this is a big taboo in programming. And the method we've described above, we have only one representation of the logic, that is, full coverage. Still, the traditional approach is to make incremental modifications to the UI, but Gaga reduction is much, it is inevitable that there is little problem, and, this problem can only be added up, but in our new programming methods, because each time we are the overall coverage, so there will be no error accumulation problem.

3.2 Presentation layer has no context

Since we have our own data model, we should not just keep any state on the Document object model, any changes are reflected in the data model, the state changes, the synchronization data model, and then start from the data model, completely cover the front-end display.

4 Performance problems

How much data can be borne by the Contact Group management in the example above?

We have to explain our statistical methods first.

A person's visual retention time is 0.1 seconds, or 100 milliseconds. In other words, 100 millisecond intervals are not perceptible to humans. and our web operation. Is it a delay, not an interval, and how much time can humans perceive? We do not have authoritative data, which is generally considered to be 300 milliseconds. We are unable to perceive the delay within 300 milliseconds.

So how much data can we render in 300 milliseconds? IE8,FF3 (not open firebug, open Firebug can render 400 times) can support about 1000, chrome can support 3,000 times.

In addition, in some cases, data-oriented programming methods, performance may also have some advantages. For example, Baidu toolbar widget list design, we loaded a lot of widget data at a time, but we only show a small number of times, so that the data side of the car method of the DOM node is significantly less than the traditional way a order of magnitude. You know, DOM nodes are very memory-consuming ....

say a little less

Animation, yes, we should not use this way to do web animation, because the animation of the brush requirements are too high, the template this way to start again is no longer applicable.

So, when you really want to use the JS animation effect, you should still be the script library to assist.

At the same time to make a point of personal view, the user experience is not the improvement of animation so eye-catching effect. More consideration should be to make the user more convenient to operate, do not be deducted points.

5 How to experience?

1. Run jside Debug Server: HTTP://WWW.XIDEA.ORG/WEBSTART/JSIDE.JNLP

A webstart program, Jside Boot will appear on the right side of the window a color floating layer (no border window, if it is java6u10+, this window will be transparent display)

2. Download the test program and unzip it. Http://lite.googlecode.com/files/Example-20091219.zip

Download it and unzip it into a directory.

3. Set up the debug Web site directory.

Test server is designed for the convenience of testing, you just unzip the target directory dragged onto the Jside floating layer, the test server automatically switch the site directory.

4. View the test program.

Each time you switch the site directory, the program prompts you to open the home page, you open it. The home page defaults to a list of files. Choose the file you look pleasing to click on it (*.s.js is a JavaScript-written service-side applet that can be run on the Jside test server)

5. Modify the program code.

On the Jside floating Layer right button, browse the file, modify it.

Source: http://www.baiduux.com/blog/2010/01/14/data_oriented_programing_in_web_frontend/