This lesson covers:
Sometimes you are writing a library, or code you are going to be using all over the place. Maybe you want this to be the last time you ever write these functions. You want to know that no matter what, no matter what API changes are made to a different library, no matter how much your data set will change, this code will always work as expected. If I give it an object with strings, it will always give me an array with numbers.
As another point, I have found pure javascript, without using other libraries, to be much less expensive, performance wise. It is easy to use jQuery or underscore, or even Backbone, to an extreme. This creates code that runs slow. Every once in a while, you run into a situation that no one else has
The XMLHttpRequest object has an interesting history, in my opinion. Basically, it allows websites to make another request, after the initial request that loads the page. It is javascript, at a very core level. You need to think object oriented.
Side note: one of the things people did not like about jQuery, early on, was that it simplified XMLHTTPRequest, the DOM and other things so much it was more of a simple scripting language instead of the watered down object oriented language it was before.
Lets jump right in. How do we make a request like we did at the very beginning.
var xhr = new XMLHttpRequest();
xhr.open("GET", "/product/total", true);
xhr.responseType = "arraybuffer";
xhr.onload = function(e) {
var arraybuffer = xhr.response; // not responseText
/* ... */
}
xhr.send();
Now lets talk about models. Forget it, let me should you a model.
var product = {
title : 'sushi',
calories : 500,
category : 'japaness',
description : 'california roll'
};
There are not really strict rules on what a model has to do in javascript. This will mostly work against you because you will have to make your own.
Generally, your model should make it really easy for your controller to save, edit, delete, or create data. Everything else is up to you.
So lets make this model do something. First, lets create a prototype.
var Product = function(options) {
if(options.title) this.title = options.options;
if(options.calories) this.calories = options.calories;
if(options.category) this.category = options.category;
if(options.description) this.description = options.description;
};
var product = new Product({
title : 'sushi',
calories : 500,
category : 'japaness',
description : 'california roll'
});
Now we can add some validation.
var Product = function(options) {
if(options.title && typeof options.title === 'string') {
this.title = options.options;
}
if(options.calories && typeof options.calories === 'number') {
this.calories = options.calories;
}
if(options.category && typeof options.category === 'string') {
this.category = options.category;
}
if(options.description && typeof options.description === 'string') {
this.description = options.description;
}
};
Notice, this just made our init function much bigger and much harder to read. Only do this kind of validating if you have to.
Lets add some functionality.
var Product = function(options) {
...
};
Product.prototype.readyToEat = false;
Product.prototype.roll = function() {
this.readyToEat = true;
}
Now we can do something with our food.
console.log(product.readyToEat); // returns false
product.roll();
console.log(product.readyToEat); // this will return true
I’m getting bored. Lets make this useful.
var Product = function(options) {
if(options.title && typeof options.title === 'string') {
this.title = options.options;
}
if(options.calories && typeof options.calories === 'number') {
this.calories = options.calories;
}
if(options.category && typeof options.category === 'string') {
this.category = options.category;
}
if(options.description && typeof options.description === 'string') {
this.description = options.description;
}
if(options.price && typeof options.description === 'number') {
this.price = options.price;
}
};
Commerce! You can probably think of some things this model can do. Add to a cart. Add to a meal. Add it to a menu.
Also, we can easily send this with the XMLHTTPRequest object.
var serialize = function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
var xhr = new XMLHttpRequest();
xhr.open("post", function(res){console.log(res); }, true);
xhr.send(serialize(product));