JavaScript_javascript 기술에서 View-Model 사용 소개

构成
这是一个十分常见的微博列表页面，类似于新浪微博。上周末，在心无旁骛情况下，一共用了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 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 함수).




코드 복사

코드는 다음과 같습니다.

// 답글 목록 템플릿
var tpl_reply_list = '

{{각 목록}}

• 
  ${name}:
  

  ${ 콘텐츠}

  
  ${nicetime(timestamp)}삭제 🎜>

{{/each}}

';

비동기 작업
지연 객체를 직역하면 지연 객체입니다. 하지만 비동기 작업으로 이해하는 것이 더 적절합니다. 비동기 작업은 여러 계층의 중첩된 콜백을 제거하여 코드 작성 및 읽기를 더욱 편리하게 만듭니다.

위 모델과 뷰 코드를 보면 비동기 작업을 사용한 후 코드가 더욱 플랫해짐을 알 수 있습니다.

$.Deferred 메소드는 새로운 양방향 작업 대기열을 생성합니다. 성공 콜백 함수 대기열과 실패 콜백 함수 대기열도 작업 상태를 성공과 실패라는 두 가지 유형으로 나눌 수 있습니다. isRejected는 각각 작업의 현재 상태를 확인하고, 작업 상태를 수정하려면 해결 또는 거부를 사용합니다.

promise 메소드는 작업의 읽기 전용 복사본을 반환하며 이 복사본에서는 작업 상태를 수정할 수 없습니다. 모델이 항상 Promise 객체만 반환해야 한다는 점에는 의심의 여지가 없습니다. (참고: 읽기 전용 복사본은 여전히 ​​promise 메서드를 다시 호출하여 읽기 전용 복사본을 반환할 수 있습니다.)

Reply.create 메서드에서는 기본 Ajax를 직접 반환하는 대신 사용자 정의 비동기 작업을 더 잘 처리할 수 있습니다. 비동기 작업:

코드 복사 코드는 다음과 같습니다.

// var dfd = $ .Deferred() ;
$.post('/ajax/blog/reply/create',data)
.success(function(json) {
if(json && json.ok){
dfd.resolve (json.list);
}else{
dfd.reject({message:json.message||'Get failed',type:'error'})
}
})
.fail(function() {
dfd.reject({message:'서비스를 일시적으로 사용할 수 없습니다',type:'error'})
})

목적과 결론
왜 이렇게 나누어졌을까요?

이점: 유지 관리 가능성, 명확한 API 호출, 두 번째 수준 위의 if 문 제거, 두 번째 수준 위의 콜백 문 제거, 각 함수는 20줄 내에서 제어됩니다.

결과: 과도한 코드 중복이 없으며, 모든 기능이 패키지화되어 있습니다.