Web开发路线与Nodejs基础
前言
7. 遇到标签，并执行。
8. Javascript脚本命令浏览器隐藏掉代码中的某个
（style.display=”none”），浏览器重新渲染这部分。9. 遇到，渲染结束。
10. 假设用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下标签的CSS路径。浏览器又需重新渲染页面。
BootStrap
BootStrap是什么
Bootstrap 是由两个 twitter 员工开发并开源的前端框架，久经考验，减少了测试的工作量。站在巨人的肩膀上，不重复造轮子。
同时，Bootstrap 的代码有着非常良好的代码规范，从中也可以学习到很多，在 Bootstrap 的基础之上创建项目，日后代码的维护也变得异常简单清晰。
基于 Less、丰富的 Mixin
Bootstrap 的一大优势就是它是基于 Less 打造的，并且也有 Sass版本。正因为如此，它一推出就包含了一个非常实用的 Mixin 库任你调用。
举个很简单的例子，当你平时要用到一些 css3 属性的时候，你要写不同的浏览器写不同的 -prefix-，比如圆角 border-radius ：
-webkit-border-radius: 10px;
-moz-border-radius:10px;
-border-radius:10px;
但是通过 Bootstrap 给你预设好的 mixin，你直接写成这样就可以了：
include border-radius (10px);
Bootstrap 是目前最好的基于 Less(Sass) 的前端框架，丰富而实用的 Mixin 应该是其最好的地方。
可以 Responsive 的栅格系统
Bootstrap 的 栅格 (Grid) 系统帮你搭好了实现 Responsive Design 的基础框架，并且非常容易修改。如果你是一个新手，Bootstrap 可以帮助你在非常短的时间内上手 Responsive Design。
丰富的组件
Bootstrap 的HTML组件 和 Js组件 非常丰富，并且代码简洁，非常易于修改，工作效率的极大提升。
插件
另外、由于 Bootstrap 的火爆，又出现了不少围绕 Bootstrap 而开发的插件。
我不喜欢用框架，我喜欢原生的写法
Bootstrap 并不能帮你完成所有事情，它只是一个框架，在这个框架上面你可以任意的发挥，并且发挥得更好，但是这需要一个过程。
这是给无设计师的团队或者程序员用的
虽然默认的样式足够用，但仍然可以通过BootStrap源码中的LESS进行深度定制。
JavaScript
版本
JavaScript已经被Netscape公司提交给ECMA制定为标准，称之为ECMAScript，标准编号ECMA-262。目前最新版为ECMA-262 5th Edition。符合ECMA-262 3rd Edition标准的实现有：
Microsoft公司的JScript.
Mozilla的JavaScript-C（C语言实现），现名SpiderMonkey
Mozilla的Rhino（Java实现）
Digital Mars公司的DMDScript
Google公司的V8
WebKit
Web开发学习资源
学习路线
静态页：html->css->html5->css3->bootstrap->javascript->jquery
动态页：ajax->nodejs/php/java->mongodb/sql
IDE
初学 sublime text /notepad++
熟练/开发 sublime text with plugin / HBuilder / WebStorm
高手 gvim
大神 txt
NodeJs
能解决什么问题？
Node 公开宣称的目标是 “旨在提供一种简单的构建可伸缩网络程序的方法”。当前的服务器程序有什么问题？我们来做个数学题。在 Java 和 PHP 这类语言中，每个连接都会生成一个新线程，每个新线程可能需要 2 MB 的配套内存。在一个拥有 8 GB RAM 的系统上，理论上最大的并发连接数量是 4,000 个用户。随着客户群的增长，如果希望支持更多用户，那么，必须添加更多服务器。当然，这会增加服务器成本、流量成本和人工成本等成本。除这些成本上升外，还有一个潜在技术问题，即用户可能针对每个请求使用不同的服务器，因此，任何共享资源都必须在所有服务器之间共享。鉴于上述所有原因，整个 Web 应用程序架构（包括流量、处理器速度和内存速度）中的瓶颈是：服务器能够处理的并发连接的最大数量。
Node 解决这个问题的方法是：更改连接到服务器的方式。每个连接仅维持一个在 Node 引擎的进程中运行的事件循环，而不是为每个连接生成一个新的 OS 线程（并为其分配一些配套内存）。Node 声称它绝不会死锁，因为它根本不允许使用锁，它不会直接阻塞 I/O 调用。
这使得运行它的服务器能支持数万个并发连接。
非阻塞原理
应用层js
-> Google V8
-> node api event quene
| |
->libUV -> event loop
|
worker threads
适用场景
RESTful API
提供 RESTful API 的 Web 服务接收几个参数，解析它们，组合一个响应，并返回一个响应（通常是较少的文本）给用户。这是适合 Node 的理想情况，可以构建它来处理数万条连接。
海量消息队列
想像一下像 Twitter 这样的公司，它必须接收 tweets 并将其写入数据库。实际上，每秒几乎有数千条 tweet 达到，数据库不可能及时处理高峰时段所需的写入数量。Node 能处理数万条入站 tweet。它能快速而又轻松地将它们写入一个内存排队机制（例如 memcached），另一个单独进程可以从那里将它们写入数据库。Node 在这里的角色是迅速收集 tweet，并将这个信息传递给另一个负责写入的进程。想象一下另一种设计（常规 PHP 服务器会自己尝试处理对数据库本身的写入）：每个 tweet 都会在写入数据库时导致一个短暂的延迟，因为数据库调用正在阻塞通道。由于数据库延迟，一台这样设计的机器每秒可能只能处理 2000 条入站 tweet。每秒处理 100 万条 tweet 则需要 500 个服务器。相反，Node 能处理每个连接而不会阻塞通道，从而能够捕获尽可能多的 tweets。一个能处理 50,000 条 tweet 的 Node 机器仅需 20 台服务器即可。
大规模统计数据
如果在线玩过《使命召唤》这款游戏，查看游戏统计数据时，就会立即意识到一个问题：要生成那种级别的统计数据，必须跟踪海量信息。这样，如果有数百万玩家同时在线玩游戏，而且他们处于游戏中的不同位置，那么很快就会生成海量信息。Node 是这种场景的一种很好的解决方案，因为它能采集游戏生成的数据，对数据进行最少的合并，然后对数据进行排队，以便将它们写入数据库。
业界案例
天猫首页新老版本性能对比
模块化
superagent + body-parser + schedule = 简单爬虫
express + mongoose = 接口服务
filestream + express = 内容管理系统
较理想的技术体系
HTML -> |BootStrap -> | 自适应布局 -> | 栅格系统
| | 响应式 -> |
| | 组件 -> |
| | 扩展 -> | -> | 导航条
| | 轮播组件
| | 缩略图
| | 模态框
| | 滚动监听
| | ...
|
|JQuery -> |Ajax
|DOM
NodeJs -> | Http -> | express -> | render()
| | redirect()
| | jsonp()
|
| MongoDB | mongoose -> | Model
| | Model.save
| | find()
|
| Template Engine -> | ejs/jade
|
|
NPM -> | init
| install -> | webpack
| gulp
回调地狱
setTimeout(function(name){
varcatList = name +',';
setTimeout(function(name){
catList += name +',';
setTimeout(function(name){
catList += name +',';
setTimeout(function(name){
catList += name +',';
setTimeout(function(name){
catList += name;
console.log(catList);
},1,'Lion');
},1,'Snow Leopard');
},1,'Lynx');
},1,'Jaguar');},1,'Panther');
Promise解决回调地狱
以读取文件为案例，下面是使用回调实现读取文件后应该做什么事情(输出打印)：
readFile(function(err, data){
if(err)returnconsole.error(err)
console.log(data)
})
如果我们的readFile函数返回一个promise，那么我们可以如下实现同样的逻辑(输出打印)：
varpromise = readFile()
promise.then(console.log,console.error)
