JavascriptMVC (JMVC)是一個基於jQuery的開放原始碼js框架。 它擁有完整的前端框架解決方案，包含打包工具，測試，代碼依賴管理，文件化，以及附帶許多有用的jQuery外掛。
JavascriptMVC的每一個項目都可以被獨立使用而不需要依賴其他項目。只看Class, Model, View, Controller部分的大小壓縮過只有7k左右，而且這之中的任何一個都還是能被獨立使用。 JavasriptMVC的輕巧及強大的獨立性使得它能應付複雜的大型web專案。
這個章節 只會 提到JavaScriptMVC的$.Class,
-
$.Class- 基於js的類別化系統 -
$.Model- 傳統的model -
$.View- 客戶端模版系統 -
$.Controller- jQuery元件工廠
JavaScriptMVC的命名取向不像傳統的 Model-View-Controller 設計模式. $.Controller被用來創造一個傳統的view，例如翻頁按鈕會列表，同時也是傳統的controller－－作為傳統的model與傳統的view之間協調的角色。
JavaScriptMVC can be used as a single download that includes the entire framework. But since this chapter covers only the MVC parts, go to the download builder, check Controller, Model, and View's EJS templates and click download.
The download will come with minified and unminified versions of jQuery and the plugins you selected. Load these with script tags in your page:
<script type='text/javascript' src='jquery-1.6.1.js'></script>
<script type='text/javascript' src='jquerymx-1.0.custom.js'></script>
JMVC的Controller和Model繼承自Class的helper - $.Class. 要創造一個類別，只要呼叫 $.Class(NAME, [classProperties, ] instanceProperties]).
$.Class("Animal",{
breathe : function(){
console.log('breathe');
}
});
在上例中，Animal的instance都有breathe()這個method. 我們可以建立一個新的Animal instance而且呼叫它的breathe()像這樣:
var man = new Animal();
man.breathe();
If you want to create a sub-class, simply call the the base class with the sub-class's name and properties:
Animal("Dog",{
wag : function(){
console.log('wag');
}
})
var dog = new Dog;
dog.wag();
dog.breathe();
When a new class instance is created, it calls the class's init method with the arguments passed to the constructor function:
$.Class('Person',{
init : function(name){
this.name = name;
},
speak : function(){
return "I am "+this.name+".";
}
});
var payal = new Person("Payal");
assertEqual( payal.speak() , 'I am Payal.' );
Call base methods with this._super. The following overwrites person
to provide a more 'classy' greating:
Person("ClassyPerson", {
speak : function(){
return "Salutations, "+this._super();
}
});
var fancypants = new ClassyPerson("Mr. Fancy");
assertEquals( fancypants.speak() , 'Salutations, I am Mr. Fancy.')
Class's callback method returns a function that has 'this' set appropriately (similar to $.proxy). The following creates a clicky class that counts how many times it was clicked:
$.Class("Clicky",{
init : function(){
this.clickCount = 0;
},
clicked: function(){
this.clickCount++;
},
listen: function(el){
el.click( this.callback('clicked') );
}
})
var clicky = new Clicky();
clicky.listen( $('#foo') );
clicky.listen( $('#bar') ) ;
Class lets you define inheritable static properties and methods. The following allows us to retrieve a person instance from the server by calling Person.findOne(ID, success(person) ). Success is called back with an instance of Person, which has the speak method.
$.Class("Person",{
findOne : function(id, success){
$.get('/person/'+id, function(attrs){
success( new Person( attrs ) );
},'json')
}
},{
init : function(attrs){
$.extend(this, attrs)
},
speak : function(){
return "I am "+this.name+".";
}
})
Person.findOne(5, function(person){
assertEqual( person.speak(), "I am Payal." );
})
Class provides namespacing and access to the name of the class and namespace object:
$.Class("Jupiter.Person");
Jupiter.Person.shortName; //-> 'Person'
Jupiter.Person.fullName; //-> 'Jupiter.Person'
Jupiter.Person.namespace; //-> Jupiter
var person = new Jupiter.Person();
person.Class.shortName; //-> 'Person'
Putting it all together, we can make a basic ORM-style model layer. Just by inheriting from Model, we can request data from REST services and get it back wrapped in instances of the inheriting Model.
$.Class("Model",{
findOne : function(id, success){
$.get('/'+this.fullName.toLowerCase()+'/'+id,
this.callback(function(attrs){
success( new this( attrs ) );
})
},'json')
}
},{
init : function(attrs){
$.extend(this, attrs)
}
})
Model("Person",{
speak : function(){
return "I am "+this.name+".";
}
});
Person.findOne(5, function(person){
alert( person.speak() );
});
Model("Task")
Task.findOne(7,function(task){
alert(task.name);
})
This is similar to how JavaScriptMVC's model layer works.
JavaScriptMVC's model and its associated plugins provide lots of tools around organizing model data such as validations, associations, lists and more. But the core functionality is centered around service encapsulation, type conversion, and events.
Of absolute importance to a model layer is the ability to get and set properties on the modeled data and listen for changes on a model instance. This is the Observer pattern and lies at the heart of the MVC approach - views listen to changes in the model.
Fortunately, JavaScriptMVC makes it easy to make any data observable. A great example is pagination. It's very common that multiple pagination controls exist on the page. For example, one control might provide next and previous page buttons. Another control might detail the items the current page is viewing (ex "Showing items 1-20"). All pagination controls need the exact same data:
- offset - the index of the first item to display
- limit - the number of items to display
- count - the total number of items
We can model this data with JavaScriptMVC's $.Model like:
var paginate = new $.Model({
offset: 0,
limit: 20,
count: 200
});
The paginate variable is now observable. We can pass it to pagination controls that can read from, write to, and listen for property changes. You can read properties like normal or using the model.attr(NAME) method:
assertEqual( paginate.offset, 0 );
assertEqual( paginate.attr('limit') , 20 );
If we clicked the next button, we need to increment the offset. Change property values with model.attr(NAME, VALUE). The following moves the offset to the next page:
paginate.attr('offset',20);
When paginate's state is changed by one control, the other controls need to be notified. You can bind to a specific attribute change with model.bind(ATTR, success( ev, newVal ) ) and update the control:
paginate.bind('offset', function(ev, newVal){
$('#details').text( 'Showing items ' + (newVal+1 )+ '-' + this.count )
})
You can also listen to any attribute change by binding to the 'updated.attr' event:
paginate.bind('updated.attr', function(ev, newVal){
$('#details').text( 'Showing items ' + (newVal+1 )+ '-' + this.count )
})
The following is a next-previous jQuery plugin that accepts paginate data:
$.fn.nextPrev = function(paginate){
this.delegate('.next','click', function(){
var nextOffset = paginate.offset+paginate.limit;
if( nextOffset < paginate.count){
paginate.attr('offset', nextOffset );
}
})
this.delegate('.prev','click', function(){
var nextOffset = paginate.offset-paginate.limit;
if( 0 < paginate.offset ){
paginate.attr('offset', Math.max(0, nextOffset) );
}
});
var self = this;
paginate.bind('updated.attr', function(){
var next = self.find('.next'),
prev = self.find('.prev');
if( this.offset == 0 ){
prev.removeClass('enabled');
} else {
prev.removeClass('disabled');
}
if( this.offset > this.count - this.limit ){
next.removeClass('enabled');
} else {
next.removeClass('disabled');
}
})
};
There are a few problems with this plugin. First, if the control is removed from the page, it is not unbinding itself from paginate. We'll address this when we discuss controllers.
Second, the logic protecting a negative offset or offset above the total count is done in the plugin. This logic should be done in the model. To fix this problem, we'll need to add additional constraints to limit what values limit, offset, and count can be. We'll need to create a pagination class.
JavaScriptMVC's model inherits from $.Class. Thus, you create a model class by inheriting from $.Model(NAME, [STATIC,] PROTOTYPE):
$.Model('Paginate',{
staticProperty: 'foo'
},{
prototypeProperty: 'bar'
})
There are a few ways to make the Paginate model more useful. First, by adding setter methods, we can limit what values count and offset can be set to.
Settter methods are model prototype methods that are named setNAME. They get called with the val passed to model.attr(NAME, val) and a success and error callback. Typically, the method should return the value that should be set on the model instance or call error with an error message. Success is used for asynchronous setters.
The following paginate model uses setters to prevent negative counts the offset from exceeding the count by adding setCount and setOffset instance methods.
$.Model('Paginate',{
setCount : function(newCount, success, error){
return newCount < 0 ? 0 : newCount;
},
setOffset : function(newOffset, success, error){
return newOffset < 0 ? 0 : Math.min(newOffset, !isNaN(this.count - 1) ? this.count : Infinity )
}
})
Now the nextPrev plugin can set offset with reckless abandon:
this.delegate('.next','click', function(){
paginate.attr('offset', paginate.offset+paginate.limit);
})
this.delegate('.prev','click', function(){
paginate.attr('offset', paginate.offset-paginate.limit );
});
We can add default values to Paginate instances by setting the static defaults property. When a new paginate instance is created, if no value is provided, it initializes with the default value.
$.Model('Paginate',{
defaults : {
count: Infinity,
offset: 0,
limit: 100
}
},{
setCount : function(newCount, success, error){ ... },
setOffset : function(newOffset, success, error){ ... }
})
var paginate = new Paginate({count: 500});
assertEqual(paginate.limit, 100);
assertEqual(paginate.count, 500);
This is getting sexy, but the Paginate model can make it even easier to move to the next and previous page and know if it's possible by adding helper methods.
Helper methods are prototype methods that help set or get useful data on model instances. The following, completed, Paginate model includes a next and prev method that will move to the next and previous page if possible. It also provides a canNext and canPrev method that returns if the instance can move to the next page or not.
$.Model('Paginate',{
defaults : {
count: Infinity,
offset: 0,
limit: 100
}
},{
setCount : function( newCount ){
return Math.max(0, newCount );
},
setOffset : function( newOffset ){
return Math.max( 0 , Math.min(newOffset, this.count ) )
},
next : function(){
this.attr('offset', this.offset+this.limit);
},
prev : function(){
this.attr('offset', this.offset - this.limit )
},
canNext : function(){
return this.offset > this.count - this.limit
},
canPrev : function(){
return this.offset > 0
}
})
Thus, our jQuery widget becomes much more refined:
$.fn.nextPrev = function(paginate){
this.delegate('.next','click', function(){
paginate.attr('offset', paginate.offset+paginate.limit);
})
this.delegate('.prev','click', function(){
paginate.attr('offset', paginate.offset-paginate.limit );
});
var self = this;
paginate.bind('updated.attr', function(){
self.find('.prev')[paginate.canPrev() ? 'addClass' : 'removeClass']('enabled')
self.find('.next')[paginate.canNext() ? 'addClass' : 'removeClass']('enabled');
})
};
We've just seen how
A REST service uses urls and the HTTP verbs POST, GET, PUT, DELETE to create, retrieve, update, and delete data respectively. For example, a tasks service that allowed you to create, retrieve, update and delete tasks might look like:
| ACTION | VERB | URL | BODY | RESPONSE |
|---|---|---|---|---|
| Create a task | POST | /tasks | name=do the dishes | |
| Get a task | GET | /task/2 | |
|
| Get tasks | GET | /tasks |
|
|
| Update a task | PUT | /task/2 | name=take out recycling | |
| Delete a task | DELETE | /task/2 | |
TODO: We can label the urls
The following connects to task services, letting us create, retrieve, update and delete tasks from the server:
$.Model("Task",{
create : "POST /tasks.json",
findOne : "GET /tasks/{id}.json",
findAll : "GET /tasks.json",
update : "PUT /tasks/{id}.json",
destroy : "DELETE /tasks/{id}.json"
},{ });
The following table details how to use the task model to CRUD tasks.
| ACTION | CODE | DESCRIPTION |
|---|---|---|
| Create a task | |
To create an instance of a model on the server, first create an instance with Save checks if the task has an id. In this case it does not so save makes a create request with the task's attributes. Save takes two parameters:
Save returns a deferred that resolves to the created task. |
| Get a task | |
Retrieves a single task from the server. It takes three parameters:
findOne returns a deferred that resolves to the task. |
| Get tasks | |
Retrieves an array of tasks from the server. It takes three parameters:
|
| Update a task | |
To update the server, first change the attributes of a model instance with Save takes the same arguments and returns the same deferred as the create task case. |
| Destroy a task | |
Destroys a task on the server. Destroy takes two parameters:
|
The Task model has essentially become a contract to our services!
Did you notice how the server responded with createdAt values as numbers like 1303173531164. This number is actually April 18th, 2011. Instead of getting a number back from task.createdAt, it would be much more useful if it returns a JavaScript date created with new Date(1303173531164). We could do this with a setCreatedAt setter. But, if we have lots of date types, this will quickly get repetitive.
To make this easy, $.Model lets you define the type of an attribute and a converter function for those types. Set the type of attributes on the static attributes object and converter methods on the static convert object.
$.Model('Task',{
attributes : {
createdAt : 'date'
},
convert : {
date : function(date){
return typeof date == 'number' ? new Date(date) : date;
}
}
},{});
Task now converts createdAt to a Date type. To list the year of each task, write:
Task.findAll({}, function(tasks){
$.each(tasks, function(){
console.log( "Year = "+this.createdAt.fullYear() )
})
});
Model publishes events when an instance has been created, updated, or destroyed. You can listen to these events globally on the Model or on an individual model instance. Use MODEL.bind(EVENT, callback( ev, instance ) ) to listen for created, updated, or destroyed events.
Lets say we wanted to know when a task is created and add it to the page. After it's been added to the page, we'll listen for updates on that task to make sure we are showing its name correctly. We can do that like:
Task.bind('created', function(ev, task){
var el = $('<li>').html(todo.name);
el.appendTo($('#todos'));
task.bind('updated', function(){
el.html(this.name)
}).bind('destroyed', function(){
el.remove()
})
})
The content for $.View has been moved here
The content for $.Controller has been moved here.