北京國(guó)軟教育“Html5+代碼演練”實(shí)戰(zhàn)訓(xùn)練營(yíng)培訓(xùn)課程

主題

知識(shí)點(diǎn)

Code Kata!

（代碼演練）

快速啟動(dòng)

(Quick Start)

1、要有前：Html + CSS + JavaScript

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

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

CodeKata： 為什么Html5

很優(yōu)秀

?更酷的API

?更自然的語(yǔ)義表達(dá)

?對(duì)移動(dòng)設(shè)備的原生支持

?無(wú)限多的可能...

CodeKata：在實(shí)戰(zhàn)中學(xué)習(xí)

Html5(Ninja_V0.1)

?Html5結(jié)構(gòu)元素構(gòu)建應(yīng)用骨架

?美輪美奐的CSS3

?擁抱流式布局

?重構(gòu)Html

CodeKata：必須響應(yīng)式設(shè)

計(jì)(Ninja_V0.2)

?智能手機(jī)很重要

?響應(yīng)式設(shè)計(jì)的定義

?視調(diào)試

?響應(yīng)式設(shè)計(jì)中的Html5

?解決跨瀏覽器的問(wèn)題

?瑞式軍刀

?讓BootStrap幫助我們

CodeKata：讓富媒體幫助用戶認(rèn)識(shí)我們(Ninja_V0.3)

?制作Audio和Video說(shuō)明

?解碼器

?Canvas

?瀏覽器的支持情況

?向37Signals學(xué)習(xí)

CodeKata：使用遠(yuǎn)程數(shù)據(jù)

(Ninja_V0.4)

?NodeJS Server

?Restful

?Ajax調(diào)用

?跨文檔消息通信

?XmlHttpRequestLevel 2

?結(jié)構(gòu)化數(shù)據(jù)

CodeKata：推送？是的，

推送(Ninja_V0.5)
?實(shí)時(shí)和Http

?NodeJS WebSocket服務(wù)器

?使用Html5 WebSockets

API

?線程處理

?Web Workers

不一樣的Web前

端開發(fā)

1、裝配腦袋(JavaScript是不一樣的)

2、JavaScript是函數(shù)式語(yǔ)言

3、 一切都是函數(shù)

4、 函數(shù)的幾種調(diào)用方式

5、內(nèi)存作用域

6、回調(diào)與閉包

7、閉包的內(nèi)存問(wèn)題

8、JavaScript模式(函數(shù)篇)

9、DOM編程

10、封裝DOM操作

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

12、DOM天生就慢(DOM的訪問(wèn)與修改)

美輪美奐的前端

交互

1、JavaScript是無(wú)阻塞的

2、setTimeout && setInterval

3、初涉NodeJS

4、為什么是JavaScript

5、事件

6、UX設(shè)計(jì)

7、你必須知道的一些CSS知識(shí)

8、使用JavaScript控制CSS

9、仿寫(jQuery|ExtJS)的動(dòng)畫交互效果

10、DOM天生就慢(DOM的重繪與重排)

面向?qū)ο蟮?/span>

JavaScript：解

構(gòu)知名開源框架

1、面向?qū)ο蟮腏avaScript

2、字面量

3、new

4、對(duì)象的封裝

5、JSON

6、數(shù)據(jù)的內(nèi)存處理

7、命名空間

8、JavaScript模式(對(duì)象篇)

9、組織團(tuán)隊(duì)的JavaScript代碼

10、仿寫(jQuery|ExtJS|Dojo)的可運(yùn)行骨架

11、模塊化加載與執(zhí)行

JavaScript的繼

承體系：解構(gòu)知

名開源框架

1、JavaScript是原型式語(yǔ)言

2、Prototype

3、__proto__

4、原型鏈

5、原型鏈的內(nèi)存問(wèn)題

6、各位，見(jiàn)證奇跡的時(shí)刻到了

(JavaScript魔法)

7、語(yǔ)法糖

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

9、jQuery源碼骨架

10、Dojo源碼骨架

主題

知識(shí)點(diǎn)

Code Kata!

（代碼演練）

MV[*]模式

1、MVC

2、MVP

3、MVVM

CodeKata：應(yīng)用JavaScript

框架(Ninja_V0.6)

?應(yīng)用AngularJS框架

?使用數(shù)據(jù)綁定

?定制模塊

?路由、視圖

?依賴注入

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

?對(duì)比Backbone.JS

?My.JS

?MVC:M

?MVC:V

?路由

?單頁(yè)面程序的問(wèn)題

CodeKata：改用模塊化加載(Ninja_V0.8)

?模塊化加載技術(shù)選型

?延遲的腳本

?動(dòng)態(tài)加載腳本

?異步腳本注入

?LazyLoad? or LABjs

?RequireJS? or Sea.js

MV[*]框架的構(gòu)成部分

1、模板與數(shù)據(jù)綁定

2、路由

3、模塊

4、依賴注入

5、輔助工具

JavaScript框架選型

1、不要重復(fù)發(fā)明輪子

2、幾個(gè)重要的技術(shù)類庫(kù)和框架選型：

3、Prototype、jQuery、Dojo與Ext

4、Backbone與 Spine.js

5、Angular、Knockout與Batman

6、Ember

構(gòu)建自己的JavaScript框架

1、類

2、繼承

3、多態(tài)

4、命名空間

5、框架的異常處理

6、單頁(yè)面處理的問(wèn)題

7、JavaScript模式(框架篇)

8、構(gòu)建自己的JavaScript框架

前端模塊機(jī)制

1、動(dòng)態(tài)加載腳本

2、異步腳本注入

3、推薦的無(wú)阻塞模式

4、CommonJS與AMD

5、RequireJS & Sea.js

后端模塊機(jī)制

1、CommonJS規(guī)范與NodeJS

2、NodeJS的核心模塊實(shí)現(xiàn)

3、包與NPM

4、Express + MongoDB +

Socket.IO

5、模塊組織管理

6、發(fā)布模塊

7、前后端共用模塊

主題

知識(shí)點(diǎn)

Code Kata!

（代碼演練）

編寫可維護(hù)的JavaScript代碼

1、JavaScript的精華與糟粕

2、JavaScript編程風(fēng)格與JSHint

3、JavaScript模式(編程實(shí)踐)

4、使用CoffeeScript

5、Clean Code與重構(gòu)

CodeKata：搭建

JavaScript下的持續(xù)交

付環(huán)境

JS下的單元測(cè)試

1、測(cè)試框架

2、TDD與BDD風(fēng)格

3、異步下的測(cè)試

4、Mock

5、測(cè)試覆蓋率

6、生成測(cè)試報(bào)告

自動(dòng)化構(gòu)建

1、目錄結(jié)構(gòu)

2、模塊構(gòu)建

3、配置文件

4、校驗(yàn)

5、文件合并與加工

6、精簡(jiǎn)壓縮

7、文檔化

8、測(cè)試

9、組裝在一起

Grunt

1、Build

2、Clean

3、Stylus

4、Concat

5、Uglify

6、JsHint

7、Mocha

8、Doc

9、Jade

10、Watch

11、Plugins