JavaScript での View-Model の使用の概要_javascript スキル

构成
这是一个十分常见的微博列表页面，类似于新浪微博。上周末，在心无旁骛情况下，一共用了5个对象，产出400行代码，实践出一种代码组织模式。

使任务轻松完成的代码有4个方面的要素组成：

要素	组成
模型	Reply、Forward
视图	CommentEditor、ReplyList、ForwardList
模板	jQuery.tmpl
异步任务	jQuery.Deferred

パーツの紹介
モデル
モデルはデータの生成、フィルター、保存、検証ができるだけです。

次の例に示すように、メッセージ モデルは save メソッドを呼び出すと、JSON パラメーターのみを受け取り、非同期タスクのみを返します。実際の処理では、結果が同期か非同期かは関係ありません。
ここで検証する理由は、これがオープン オブジェクトであり、サーバーとの対話への最後のドアであるためです。
さらに、検証エラー自体は処理されません。ビューによって呼び出されたときに選択的に処理され、メッセージがポップアップ表示されるか、単に無視されて再試行される場合があります。

コードをコピー コードは次のとおりです:

// メッセージ モデル
var Reply = {
cache : {},
// { sourceid : id,page_size : 10,page_num : 1 }
fetch : function(data) {
return $.post('/ajax/ blog/reply /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 : '考えてみてください', 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;


View
ビューはブラウザ ページの表示部分であり、各ビュー オブジェクトにはプロパティとして関連付けられた jQuery オブジェクトが含まれます。 )、UI コンポーネントの DOM コンテナに似ています。

ビューには、2 つの一貫したメソッドもあります。

render メソッドは、モデルからデータを取得し、定義されたテンプレートに従ってデータを HTML ページにレンダリングするために使用されます。
activate メソッドは、ビューをアクティブ化し、関連する DOM イベントをバインドするために使用されます。すべてのイベントは最大でも $el に委任されます。
この例では、CommentEditor が親ビュー、ReplyList と ForwardList が相互に表示される 2 つのサブビューで、親ビューとサブビューは相互に参照を保存します。




コードをコピー

コードは次のとおりです: // 返信リスト表示var ReplyList = function (options) {

var opt = this.opt = $.extend({

el : '',
parent : null
},options||{}); >
this.parent = opt.parent;
this.$el = $(opt.el);
ReplyList.prototype = {
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) );
});
},
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(); $submit.val('コメント');
this.sublist = new ReplyList(view_opt).render();
$label.hide(); .val( 'Forward');
this.sublist = new ForwardList(view_opt).render();
}
}
// ...
}


Template
Template は、面倒で見苦しい文字列の結合を排除できます。その機能は、js オブジェクトから HTML フラグメントを直接生成することです。

テンプレート内のオブジェクトを直接走査し、事前定義された関数を適用して、時間関数 nicetime などのデータをフォーマットすることができます:




コードをコピー


コードは次のとおりです:

// 返信リスト テンプレート
var tpl_reply_list = '

{{各リスト}}

• 
  ${name}: content}
  
  ${nicetime(timestamp)}削除 🎜>

{{/each}}

';


非同期タスク

遅延オブジェクトは、遅延オブジェクトです。ただし、非同期タスクとして理解する方が適切です。非同期タスクにより、ネストされたコールバックの複数の層が排除され、コードの書き込みと読み取りがより便利になります。

上記のモデルとビュー コードから、非同期タスクを使用した後はコードがよりフラットになることは明らかです。

$.Deferred メソッドは、成功コールバック関数キューと失敗コールバック関数キューの新しい双方向タスク キューを作成します。タスクのステータスも、成功と失敗の 2 つのタイプに分けられます。isResolved または失敗を使用できます。 isRejected を使用してタスクの現在のステータスを確認し、resolve または拒否を使用してタスクのステータスを変更します。

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||'失敗しました',type:'error'}); >})
.fail(function() {
dfd.reject({message:'サービスが一時的に利用できません',type:'error'})
}); 🎜>目的と結論
なぜこのように解散するのでしょうか？

の利点: 保守性、明確な API 呼び出し、第 2 レベル以上の if ステートメントの削除、第 2 レベル以上のコールバック ステートメントの削除、および各関数が 20 行以内で制御される。

結果: コードに過度の重複はなく、すべての関数がパッケージ化されています。