[导入]Concrete Javascript Pattern

[导入]Concrete Javascript Pattern

传统的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"));
            });

已有 0 人发表留言，猛击->>这里<<-参与讨论


JavaEye推荐

• 【杭州】高薪招聘控件高级开发工程师（9w-18w年薪）
• 上海30-40万年薪招聘金融咨询顾问
• 参加赢在淘宝，获取开放平台高级权限
• 【杭州】高薪招聘java高级工程师，项目经理，架构师

文章来源: http://sevenduan.javaeye.com/blog/503946