Concrete Javascript Pattern

sevenduan

传统的client side js MVC 结构：
Model:
json object - mapping with PO from server side
View:
HTML + CSS
Controller:
Page object - 负责页面初始化逻辑（验证、事件绑定、json数据渲染到DOM），提交时，获取DOM的数据组装json。

Concrete Javascript Pattern :
把status 和 behavior 直接绑定到DOM element上。

jquery concrete framework:
http://github.com/hafriedlander/jquery.concrete
http://github.com/nkallen/effen/
前者42k，后者0.8k。
与直接在DOM element object上添加status or behavior相比，框架的好处是可以批量添加。

用例：
对于autocomplete组件，formatted data = data name; saved data= data id;
之前有一个实现是为了save data id，多加了一个 input hidden.
如果是concrete js pattern, 可以在这个input element 上直接保存数据。
effen + jquery.autocomplete test:
$('body').append('<div id="dom_test"><input id="month"/></div>');            var monthInput = $("#month");            monthInput.fn({                dataPair: function(){                    if (arguments.length == 0) {                        return this._data;                    }                    else {                        this._data = arguments[0];                    }                },                _data: []            });            monthInput.autocomplete(months, {                minChars: 0,                max: 12,                autoFill: true,                mustMatch: true,                matchContains: false,                scrollHeight: 220,                formatItem: function(data, i, total){                    if (data[0] == months[new Date().getMonth()])                         return false;                    return data[0].substring(0, 3);                },                formatResult: function(row){                    return row[1];                }            });            monthInput.result(function(event, data, formatted){                var _data = data[0].split("|");                monthInput.fn("dataPair", _data);                console.dir(monthInput.fn("dataPair"));            });