Web开发权威指南笔记（二）
书：Web开发权威指南，[美] Chris Aquino, Todd Gandee著。为2nd实战项目CoffeeRun练习以及代码整理。全为个人借鉴本书产出，若需要转载请联系通知我，请尊重原创，谢谢~
整理了大概5天了，内容比较多（很多重点都整理在代码中的注释了），如果读者耐心观看一定可以和我一样收获很多的喲，我们一起加油~
为美食车搭建一个管理咖啡订单的应用，名字叫做CoffeeRun。
最终成果展示
第八章 模块、对象和方法
模块
创建三个不同的JavaScript文件，分别对应UI、内部逻辑和服务端交换逻辑
模块模式
立即调用的函数表达式(Immediately Invoked Function Expression, IIFE)。CoffeeRun中可能会有很多名称相同的函数，如果把他们都卸载全局命名空间中，它们会互相覆盖。因此，应该在函数内声明它们，这能避免它们被外界的代码访问或者覆盖。
例子：
function initializeEvents() { //该方法会把所有步骤联系起来，从而具有交互性。首先获取缩略图数组，然后遍历整个数组，给其中每个元素添加点击事件处理程序
'use strict';
var thumbnails = getThumbnailsArray(); //将结果（缩略图数组）赋值给一个行为thumbnails的变量
thumbnails.forEach(addThumbClickHandler); //不是一个好办法，不过在目前这样做不会引发错误，addThumbClickHandler函数只需要在foreach函数调用它时传递他的信息（thumbnails数组中的一个元素）
addKeyPressHandler();
}
initializeEvents();(function () { //该方法会把所有步骤联系起来，从而具有交互性。首先获取缩略图数组，然后遍历整个数组，给其中每个元素添加点击事件处理程序
'use strict';
var thumbnails = getThumbnailsArray(); //将结果（缩略图数组）赋值给一个行为thumbnails的变量
thumbnails.forEach(addThumbClickHandler); //不是一个好办法，不过在目前这样做不会引发错误，addThumbClickHandler函数只需要在foreach函数调用它时传递他的信息（thumbnails数组中的一个元素）
addKeyPressHandler();
})();代码展示
index.html
coffeerun
datastore.js
(function (window) { //用基本的IIFE模式编写模块，我们可以利用函数作用域为大段代码创建命名空间
'use strict';
var App = window.App || {}; //本地变量App。如果在window上存在App属性，那么就将它赋值到本地App中；否则引用一个用{}表示的新的空对象
/*最重要的模块DataStore，它可以存储数据、根据查询需求提供相应的数据，并且按照指令删除不必要的数据。*/
function DataStore() { //首字母大写，这是JavaScript中约定的构造函数的命名方式
this.data = {}; //创建和定制一个新的对象
}
DataStore.prototype.add = function (key, val) { //所有通过构造函数出创建的实例都可以访问其属性和方法的共享仓库：构造函数的prototype属性。创建实例使用new关键字调用构造函数。new关键字不仅仅创建并返回实例，还在实例和构造函数的prototype属性间创建了一个特别的链接
this.data[key] = val;
}
DataStore.prototype.get = function (key) { //该方法接受参数key, 并在相应实例的data属性中查找键值
return this.data[key];
}
DataStore.prototype.getAll = function() { //但getall会直接返回data属性的的引用
return this.data;
}
DataStore.prototype.remove = function (key) { //当调用remove方法时，delete运算符会将一个键值对从对象上删除
delete this.data[key];
}
App.DataStore = DataStore; //将DataStore绑定到App对象上
window.App = App; //将新修改的App赋值到全局App属性上
})(window);truck.js
(function (window) {
'use strict';
var App = window.App || {};
function Truck(truckId, db) { //Truck模块，负责提供用千管理美食车的功能，比如创建、交付订单，打印等待中的订单列表
this.truckId = truckId;
this.db = db;
}
/*在createOrder函数中输出消息到控制台，然后使用db属性的add方法来存储订单信息。*/
Truck.prototype.createOrder = function (order) {
console.log('Adding order for ' + order.emailAddress);
//无须在这个文件里指定App.DataStore的命名空间或者在模块内提起DataStore的构造函数。只要一个对象拥有和Datastore相同的方法，它就可以被Truck使用，而Truck并不关心它们是怎么实现的。
this.db.add(order.emailAddress, order);
};
/*Truck从数据库中删除相应的订单*/
Truck.prototype.deliverOrder = function (customerId) {
console.log('Delivering order for ' + customerId);
//deliverOrder也只调用this.db的remove方法，而无须知道remove方法如何运行。
this.db.remove(customerId);
};
/*接受一个由客户邮箱地址组成的数组，遍历数组，然后使用console.log打印出订单信息。*/
Truck.prototype.printOrders = function () {
var customerIdArray = Object.keys(this.db.getAll()); //调用this.db.getAll来获取所有订单的键值对，然后将它们传入Object.keys, 从而获得一个仅包含键名的数组，再将这个数组赋值给变量customerldArray。
console.log('Truck #' + this.truckId + ' has pending orders:');
customerIdArray.forEach(function (id) { //在遍历这个数组时，将一个回调函数传给forEach。在回调函数内，尝试通过一个过（客户的邮箱地址）来获取订单信息。
console.log(this.db.get(id));
}.bind(this));//在forEach的回调函数外，this指代Truck实例。在forEach括号内部的匿名函数后马上调用.bind(this)方法，从而将修改过的匿名函数传给forEach。这个修改过的函数的所有者是Truck实例。
// 最后遍历这个数组，为数组里的每个函数调用一次回调函数。
};
App.Truck = Truck;
window.App = App;
})(window);main.js
(function (window) {
'use strict';
var App = window.App;
var Truck = App.Truck;
var DataStore = App.DataStore;
var myTruck = new Truck('ncc-1701', new DataStore());
window.myTruck = myTruck; //为了便于交互，需要在main.js中将Truck暴露到全局命名空间。
})(window);第九章 Bootstrap简介
添加Bootstrap
twitter-bootstrap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers：确保得到的是bootstrap.min.css的链接（如图9-2所示）， 而不是其字体或者主题的链接。复制链接之后， 打开index.html添加一个标签， 把该标签的href屈性设置为复制的链接地址。（为了适应版面， 不得不将href属性换行， 但是你应该把它写成一行。）
coffeerun
Bootstrap文档
CSS · Bootstrap (getbootstrap.com)：有关如何组织HTML的示例
代码展示
index.html
coffeerun
CoffeeRun
第十章 使用JavaScript处理表单
jQuery简介
jQuery文档：Query库由 John Resig于 2006年创建，是最受欢迎的通用开源JavaScript库之一。此外，它为DOM操作、 元素创建、 服务器通信和事件处理提供了快速便捷的方法。
jquery - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers：找到2.1.4版本并复制其地址。（可能有更高版本，但是在CoffeeRun中应使用2.1.4版本来避免兼容性问题。
Bootstrap的模态行为
有关如何包含和触发Bootstrap的模态行为， 请参阅getbootstrap.corn/javascript上的文档。（需要添加一个