傳統(tǒng)的client side js MVC 結(jié)構(gòu)：
Model:
json object - mapping with PO from server side
View:
HTML + CSS
Controller:
Page object - 負(fù)責(zé)頁面初始化邏輯（驗(yàn)證、事件綁定、json數(shù)據(jù)渲染到DOM），提交時，獲取DOM的數(shù)據(jù)組裝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;
之前有一個實(shí)現(xiàn)是為了save data id，多加了一個 input hidden.
如果是concrete js pattern, 可以在這個input element 上直接保存數(shù)據(jù)。
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 人發(fā)表留言，猛擊->>這里<<-參與討論
JavaEye推薦
文章來源:
http://sevenduan.javaeye.com/blog/503946