开发环境

客户端:Chrome

服务端:NodeJS

安装NodeJS后，在cmd命令行下使用npminstall-gxxx

安装插件：

npminstall-gnode-inspector

Jasmine

Mocha

开发工具

Sublime Text

开启Sublime插件安装：

按Ctrl+`调出console,粘贴以下代码到底部命令行并回

车：

importurllib2,os;pf='PackageControl.sublime-

package';ipp=sublime.installed_packages_path();os.makedirs

(ipp)ifnotos.path.exists(ipp)else

None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('ht

tp://sublime.wbond.net/'+pf.replace('‘,'%20')).read())

重启SublimeText2。如果在Perferences->package

settings中看到packagecontrol这一项，则安装成功。

安装插件：

按下Ctrl+Shift+P调出命令面板

输入install调出InstallPackage选项并回车，然后在列

表中选中要安装的插件。

需要安装的插件：

Emmet

Alignment

JsFormat

Prefixr

JsHint

引用类库

Bootstrap

常用的JS库：libs

相关资料

课前预习：AdobeKata

更多资料：GreenTea

主题

知识点

Code Kata!

（代码演练）

快速启动

(Quick Start)

1、要有前：Html + CSS + JavaScript

2、要有后：NodeJS + Express +MongoDB + Socket.IO

3、要有推和拉：Http + Socket +Ajax + JSON

CodeKata： 为什么Html5

很优秀

•更酷的API

•更自然的语义表达

•对移动设备的原生支持

•无限多的可能...

CodeKata：在实战中学习

Html5(Ninja_V0.1)

•Html5结构元素构建应用骨架

•美轮美奂的CSS3

•拥抱流式布局

•重构Html

CodeKata：必须响应式设

计(Ninja_V0.2)

•智能手机很重要

•响应式设计的定义

•视调试

•响应式设计中的Html5

•解决跨浏览器的问题

•瑞式军刀

•让BootStrap帮助我们

CodeKata：让富媒体帮助用户认识我们(Ninja_V0.3)

•制作Audio和Video说明

•解码器

•Canvas

•浏览器的支持情况

•向37Signals学习

CodeKata：使用远程数据

(Ninja_V0.4)

•NodeJS Server

•Restful

•Ajax调用

•跨文档消息通信

•XmlHttpRequestLevel 2

•结构化数据

CodeKata：推送？是的，

推送(Ninja_V0.5)
•实时和Http

•NodeJS WebSocket服务器

•使用Html5 WebSockets

API

•线程处理

•Web Workers

不一样的Web前

端开发

1、装配脑袋(JavaScript是不一样的)

2、JavaScript是函数式语言

3、 一切都是函数

4、 函数的几种调用方式

5、内存作用域

6、回调与闭包

7、闭包的内存问题

8、JavaScript模式(函数篇)

9、DOM编程

10、封装DOM操作

11、仿写(jQuery|ExtJS)的方法

12、DOM天生就慢(DOM的访问与修改)

美轮美奂的前端

交互

1、JavaScript是无阻塞的

2、setTimeout && setInterval

3、初涉NodeJS

4、为什么是JavaScript

5、事件

6、UX设计

7、你必须知道的一些CSS知识

8、使用JavaScript控制CSS

9、仿写(jQuery|ExtJS)的动画交互效果

10、DOM天生就慢(DOM的重绘与重排)

面向对象的

JavaScript：解

构知名开源框架

1、面向对象的JavaScript

2、字面量

3、new

4、对象的封装

5、JSON

6、数据的内存处理

7、命名空间

8、JavaScript模式(对象篇)

9、组织团队的JavaScript代码

10、仿写(jQuery|ExtJS|Dojo)的可运行骨架

11、模块化加载与执行

JavaScript的继

承体系：解构知

名开源框架

1、JavaScript是原型式语言

2、Prototype

3、__proto__

4、原型链

5、原型链的内存问题

6、各位，见证奇迹的时刻到了

(JavaScript魔法)

7、语法糖

8、如何(jQuery|ExtJS|Dojo)插件

9、jQuery源码骨架

10、Dojo源码骨架

主题

知识点

Code Kata!

（代码演练）

MV[*]模式

1、MVC

2、MVP

3、MVVM

CodeKata：应用JavaScript

框架(Ninja_V0.6)

•应用AngularJS框架

•使用数据绑定

•定制模块

•路由、视图

•依赖注入

CodeKata：要有框架，自己的!(Ninja_V0.7)

•对比Backbone.JS

•My.JS

•MVC:M

•MVC:V

•路由

•单页面程序的问题

CodeKata：改用模块化加载(Ninja_V0.8)

•模块化加载技术选型

•延迟的脚本

•动态加载脚本

•异步脚本注入

•LazyLoad? or LABjs

•RequireJS? or Sea.js

MV[*]框架的构成部分

1、模板与数据绑定

2、路由

3、模块

4、依赖注入

5、辅助工具

JavaScript框架选型

1、不要重复发明轮子

2、几个重要的技术类库和框架选型：

3、Prototype、jQuery、Dojo与Ext

4、Backbone与 Spine.js

5、Angular、Knockout与Batman

6、Ember

构建自己的JavaScript框架

1、类

2、继承

3、多态

4、命名空间

5、框架的异常处理

6、单页面处理的问题

7、JavaScript模式(框架篇)

8、构建自己的JavaScript框架

前端模块机制

1、动态加载脚本

2、异步脚本注入

3、推荐的无阻塞模式

4、CommonJS与AMD

5、RequireJS & Sea.js

后端模块机制

1、CommonJS规范与NodeJS

2、NodeJS的核心模块实现

3、包与NPM

4、Express + MongoDB +

Socket.IO

5、模块组织管理

6、发布模块

7、前后端共用模块

主题

知识点

Code Kata!

（代码演练）

编写可维护的JavaScript代码

1、JavaScript的精华与糟粕

2、JavaScript编程风格与JSHint

3、JavaScript模式(编程实践)

4、使用CoffeeScript

5、Clean Code与重构

CodeKata：搭建

JavaScript下的持续交

付环境

JS下的单元测试

1、测试框架

2、TDD与BDD风格

3、异步下的测试

4、Mock

5、测试覆盖率

6、生成测试报告

自动化构建

1、目录结构

2、模块构建

3、配置文件

4、校验

5、文件合并与加工

6、精简压缩

7、文档化

8、测试

9、组装在一起

Grunt

1、Build

2、Clean

3、Stylus

4、Concat

5、Uglify

6、JsHint

7、Mocha

8、Doc

9、Jade

10、Watch

11、Plugins