构成
这是一个十分常见的微博列表页面，类似于新浪微博。上周末，在心无旁骛情况下，一共用了5个对象，产出400行代码，实践出一种代码组织模式。
使任务轻松完成的代码有4个方面的要素组成：
| 要素 |
组成 |
| 模型 |
Reply、Forward |
| 视图 |
CommentEditor、ReplyList、ForwardList |
| 模板 |
jQuery.tmpl |
| 异步任务 |
jQuery.Deferred |
부분 소개 모델
모델은 데이터에만 관련되어 있으며, 데이터 생성, 필터링, 저장, 검증이 전부입니다.
다음 예와 같이 메시지 모델이 save 메소드를 호출하면 JSON 매개변수만 수신하고 비동기 작업만 반환합니다. 실제 처리에서는 결과가 동기인지 비동기인지는 중요하지 않습니다.
여기서 유효성을 검사하는 이유는 열린 개체이며 서버와 상호 작용하는 마지막 문이기 때문입니다.
게다가 유효성 검사 실패 자체를 처리하지 않습니다. 뷰에서 호출할 때 선택적으로 처리되며 메시지가 표시되거나 단순히 무시되고 재시도될 수 있습니다.
// 메시지 모델
var Reply = {
캐시 : {},
// { sourceid : id,page_size : 10,page_num : 1 }
fetch : function(data) {
return $.post('/ajax/ 블로그/답글 /list',data||{}).success(function(resp) {
resp.ok && resp.list &&
$.each(resp.list,function(k,v) {
return Reply.cache[v.id] = v;
})
})
},
// filter('name','king')
필터 : function (prop,val) {
return $.grep(this.cache,function(r){ return r[prop] === val })
},
// { content : 'Think Just say it', sourceid : 1001 }
create : function(data) {
// promise
var dfd = $.Deferred(), now = $.now()
if( (now - this.create.timestamp)/1000 < 10 ){
dfd.reject({message:'게시가 너무 빠르네요. 잠시 쉬세요.',type:'warn'})
} else if(!data || !data.sourceid){
dfd.reject({message:'불법 조작',type:'error'})
}else if(!data.content){
dfd.reject({message:'댓글 내용은 비워둘 수 없습니다.',type:'warn'})
}else{
this.create.timestamp = now
dfd = $.post( ' /ajax/blog/reply/create',data);
}
return dfd.promise();
}
}
Reply.create.timestamp = Forward.create. timestamp = $.now() - 1e4;
보기
보기는 브라우저 페이지의 표시되는 부분입니다. 각 보기 개체에는 연결된 jQuery 개체가 속성으로 포함되어 있습니다. ), UI 구성요소의 DOM 컨테이너와 유사합니다.
보기에도 두 가지 일관된 방법이 있습니다.
렌더링 방법은 모델에서 데이터를 가져오고 정의된 템플릿에 따라 데이터를 HTML 페이지에 렌더링하는 데 사용됩니다.
활성화 메소드는 뷰를 활성화하고 관련 DOM 이벤트를 바인딩하는 데 사용됩니다. 모든 이벤트는 최대 $el에 위임됩니다.
이 예에서 CommentEditor는 상위 뷰이고 ReplyList와 ForwardList는 상호 표시되는 두 개의 하위 뷰이며 상위 뷰와 하위 뷰는 서로에 대한 참조를 저장합니다.
// 답글 목록 보기
var ReplyList = function (options) {
var opt = this.opt = $.extend({
el : '',
parent : null
},options||{}); >
this.parent = opt.parent;
this.$el = $(opt.el);
this.activate()
}; 🎜>render : function() {
var self = this;
Reply.fetch({
page_size : 10, page_num : 1,
sourceid : self.parent.getBlogId()
})
.done(function(data) {
self.$el.html( self.$list = $.tmpl(tpl_reply_list,data) );
});
return self;
},
activate : function() {
this.$el.delegate('a.del',$.proxy(this.del,this))
}
// ...
}
// 댓글 편집기 보기
CommentEditor.prototype = {
activate : function() {
this.$el.delegate('a.save' ,$ .proxy(this.save,this))
},
save : function() {
var self = this, data = { content : self.getContent(), sourceid : self.getBlogId () };
var task_r = Reply.create(data);
var task_f = Forward.create(data)
// 전달과 댓글 동시 작성
$.when(task_r ,task_f).then(function(t1,t2) {
//저장 성공, 보기 업데이트 또는 닫기
}, function(data) {
// 모델 검증 오류 또는 원격 서버 오류
Sys.info (data.message,data.type);
});
return self;
},
switchView : function(type) {
// 하위 뷰 전환
var view_opt = {el:this.$sublist.empty(),parent:this};
if(type === 'reply'){
$label.show()
this. $submit.val('댓글');
this.sublist = new ReplyList(view_opt).render();
}else{
$label.hide(); .val( '앞으로');
this.sublist = new ForwardList(view_opt).render()
}
}
// ...
}
템플릿
템플릿의 기능은 js 개체에서 직접 HTML 조각을 생성하는 것입니다.
템플릿의 개체를 직접 탐색하고 사전 정의된 함수를 적용하여 일부 데이터의 형식을 지정할 수 있습니다(예: nicetime 함수).
코드 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
