constitute
This is a very common Weibo list page, similar to Sina Weibo. Last weekend, without distraction, we used 5 objects in total, produced 400 lines of code, and practiced a code organization model.
Code that makes tasks easy to complete has 4 elements:
Branch introduction
Model
The model is only related to data, it can generate, filter, save, verify data, and that's all.
As shown in the following example, when the message model calls the save method, it only receives JSON parameters and returns only one asynchronous task. It is not important to return the result synchronous or asynchronous during actual processing.
The reason for verification here is that it is an open object and the last threshold for interacting with the server.
In addition, it itself does not handle the situation where verification failures - it is selectively processed by the view call, and a message may pop up or be ignored directly and then retry.
// Message model
var Reply = {
cache : {},
// { sourceid : id,page_size : 10,page_num : 1 }
fetch : function(data) {
return $.post('/ajax/blog/reply/list',data||{}).success(function(resp) {
&& &&
$.each(,function(k,v) {
return [] = v;
});
});
},
// filter('name','king')
filter : function(prop,val) {
return $.grep(,function(r){ return r[prop] === val });
},
// { content : 'If you want to say it',sourceid : 1001 }
create : function(data) {
// promise
var dfd = $.Deferred(), now = $.now();
if( (now - )/1000 < 10 ){
({message:'You posted too quickly, take a break', type:'warn'})
}else if(!data || !){
({message:'Illegal Operation',type:'error'})
}else if(!){
({message:'Comment content cannot be empty', type:'warn'})
}else{
= now;
dfd = $.post('/ajax/blog/reply/create',data);
}
return ();
}
};
= = $.now() - 1e4;
view
A view is a visual part on a browser page. Each view object contains an associated jQuery object as a property (instance.$el), similar to the DOM container in a UI component.
There are two consistent methods for view:
The render method is used to get data from the model and render the data onto an HTML page according to the defined template.
The activate method is used to activate the view and bind the relevant DOM events at the same time. All events are delegated to $el at most.
In this example, CommentEditor is the parent view, ReplyList and ForwardList are two child views that are mutually exclusively displayed, and the parent and child views save references to each other.
// Reply to the list view
var ReplyList = function(options) {
var opt = = $.extend({
el : '',
parent : null
},options||{});
= ;
this.$el = $();
();
};
= {
render : function() {
var self = this;
({
page_size : 10, page_num : 1,
sourceid : ()
})
.done(function(data) {
self.$( self.$list = $.tmpl(tpl_reply_list,data) );
});
return self;
},
activate : function() {
this.$('',$.proxy(,this))
}
// ...
}
// Comment Editor View
= {
activate : function() {
this.$('',$.proxy(,this))
},
save : function() {
var self = this, data = { content : (),sourceid : () };
var task_r = (data);
var task_f = (data);
// Forward and comment at the same time
$.when(task_r,task_f).then(function(t1,t2) {
// Save successfully, update the view or close it
},function(data) {
// Model verification error, or remote server error
(,);
});
return self;
},
switchView : function(type) {
// Switch subview
var view_opt = {el:this.$(),parent:this};
if(type === 'reply'){
$();
this.$('Comments');
= new ReplyList(view_opt).render();
}else{
$();
this.$('Forward');
= new ForwardList(view_opt).render();
}
}
// ...
}
template
Template can eliminate cumbersome and ugly string stitching, and its function is to directly generate HTML fragments from js objects.
You can directly traverse the object in the template and apply predefined functions to format some data, such as the time function nicetime:
// Reply list template
var tpl_reply_list = '<ul class="ui-reply-list">\
{{each list}}\
<li data->\
<a class="name" href="/${userid}">${name}:</a>\
<p>${content}</p>\
<time pubdate>${nicetime(timestamp)}</time><a class="del" href="javascript:;">Delete</a>\
</li>\
{{/each}}\
</ul>';
Asynchronous tasks
The literal translation of Deferred Object is a delay object, but it is more appropriate to understand it as async task. Asynchronous tasks can eliminate multi-layer nested callbacks, making code writing and reading more convenient.
It is obvious from the above code of the model and view that after using asynchronous tasks, the code becomes more flat.
The $.Deferred method creates a two-way task queue: successful callback function queue and failed callback function queue; the status of the task is also divided into two types: success and failure. You can use isResolved or isRejected to check the current state of the task, and use resolve or reject to modify the task status.
The promise method returns a read-only replica of the task, and the task status cannot be modified on this replica. There is no doubt that the model should always return only the promise object. (Note: The read replica can still be called again to return the read replica again)
In the method, it is possible to better handle custom asynchronous tasks instead of directly returning to native ajax asynchronous tasks:
// var dfd = $.Deferred();
$.post('/ajax/blog/reply/create',data)
.success(function(json) {
if(json && ){
();
}else{
({message:||'Failed to get',type:'error'});
}
})
.fail(function() {
({message:'Service is temporarily unavailable', type:'error'})
});
Purpose and conclusion
Why breaking it up like this?
Gain: maintainability, clear API calls, eliminating if statements above the second layer, eliminating callback statements above the second layer, and controlling each function within twenty lines.
Result: Without too much duplicate code, all functions are packaged.
This is a very common Weibo list page, similar to Sina Weibo. Last weekend, without distraction, we used 5 objects in total, produced 400 lines of code, and practiced a code organization model.
Code that makes tasks easy to complete has 4 elements:
| Elements | composition |
|---|---|
| Model | Reply、Forward |
| view | CommentEditor、ReplyList、ForwardList |
| template | |
| Asynchronous tasks |
Model
The model is only related to data, it can generate, filter, save, verify data, and that's all.
As shown in the following example, when the message model calls the save method, it only receives JSON parameters and returns only one asynchronous task. It is not important to return the result synchronous or asynchronous during actual processing.
The reason for verification here is that it is an open object and the last threshold for interacting with the server.
In addition, it itself does not handle the situation where verification failures - it is selectively processed by the view call, and a message may pop up or be ignored directly and then retry.
Copy the codeThe code is as follows:
// Message model
var Reply = {
cache : {},
// { sourceid : id,page_size : 10,page_num : 1 }
fetch : function(data) {
return $.post('/ajax/blog/reply/list',data||{}).success(function(resp) {
&& &&
$.each(,function(k,v) {
return [] = v;
});
});
},
// filter('name','king')
filter : function(prop,val) {
return $.grep(,function(r){ return r[prop] === val });
},
// { content : 'If you want to say it',sourceid : 1001 }
create : function(data) {
// promise
var dfd = $.Deferred(), now = $.now();
if( (now - )/1000 < 10 ){
({message:'You posted too quickly, take a break', type:'warn'})
}else if(!data || !){
({message:'Illegal Operation',type:'error'})
}else if(!){
({message:'Comment content cannot be empty', type:'warn'})
}else{
= now;
dfd = $.post('/ajax/blog/reply/create',data);
}
return ();
}
};
= = $.now() - 1e4;
view
A view is a visual part on a browser page. Each view object contains an associated jQuery object as a property (instance.$el), similar to the DOM container in a UI component.
There are two consistent methods for view:
The render method is used to get data from the model and render the data onto an HTML page according to the defined template.
The activate method is used to activate the view and bind the relevant DOM events at the same time. All events are delegated to $el at most.
In this example, CommentEditor is the parent view, ReplyList and ForwardList are two child views that are mutually exclusively displayed, and the parent and child views save references to each other.
Copy the codeThe code is as follows:
// Reply to the list view
var ReplyList = function(options) {
var opt = = $.extend({
el : '',
parent : null
},options||{});
= ;
this.$el = $();
();
};
= {
render : function() {
var self = this;
({
page_size : 10, page_num : 1,
sourceid : ()
})
.done(function(data) {
self.$( self.$list = $.tmpl(tpl_reply_list,data) );
});
return self;
},
activate : function() {
this.$('',$.proxy(,this))
}
// ...
}
// Comment Editor View
= {
activate : function() {
this.$('',$.proxy(,this))
},
save : function() {
var self = this, data = { content : (),sourceid : () };
var task_r = (data);
var task_f = (data);
// Forward and comment at the same time
$.when(task_r,task_f).then(function(t1,t2) {
// Save successfully, update the view or close it
},function(data) {
// Model verification error, or remote server error
(,);
});
return self;
},
switchView : function(type) {
// Switch subview
var view_opt = {el:this.$(),parent:this};
if(type === 'reply'){
$();
this.$('Comments');
= new ReplyList(view_opt).render();
}else{
$();
this.$('Forward');
= new ForwardList(view_opt).render();
}
}
// ...
}
template
Template can eliminate cumbersome and ugly string stitching, and its function is to directly generate HTML fragments from js objects.
You can directly traverse the object in the template and apply predefined functions to format some data, such as the time function nicetime:
Copy the codeThe code is as follows:
// Reply list template
var tpl_reply_list = '<ul class="ui-reply-list">\
{{each list}}\
<li data->\
<a class="name" href="/${userid}">${name}:</a>\
<p>${content}</p>\
<time pubdate>${nicetime(timestamp)}</time><a class="del" href="javascript:;">Delete</a>\
</li>\
{{/each}}\
</ul>';
Asynchronous tasks
The literal translation of Deferred Object is a delay object, but it is more appropriate to understand it as async task. Asynchronous tasks can eliminate multi-layer nested callbacks, making code writing and reading more convenient.
It is obvious from the above code of the model and view that after using asynchronous tasks, the code becomes more flat.
The $.Deferred method creates a two-way task queue: successful callback function queue and failed callback function queue; the status of the task is also divided into two types: success and failure. You can use isResolved or isRejected to check the current state of the task, and use resolve or reject to modify the task status.
The promise method returns a read-only replica of the task, and the task status cannot be modified on this replica. There is no doubt that the model should always return only the promise object. (Note: The read replica can still be called again to return the read replica again)
In the method, it is possible to better handle custom asynchronous tasks instead of directly returning to native ajax asynchronous tasks:
Copy the codeThe code is as follows:
// var dfd = $.Deferred();
$.post('/ajax/blog/reply/create',data)
.success(function(json) {
if(json && ){
();
}else{
({message:||'Failed to get',type:'error'});
}
})
.fail(function() {
({message:'Service is temporarily unavailable', type:'error'})
});
Purpose and conclusion
Why breaking it up like this?
Gain: maintainability, clear API calls, eliminating if statements above the second layer, eliminating callback statements above the second layer, and controlling each function within twenty lines.
Result: Without too much duplicate code, all functions are packaged.