“Html5+代碼演練”實戰(zhàn)訓(xùn)練營

開發(fā)環(huán)境

客戶端:Chrome

服務(wù)端:NodeJS

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

安裝插件：

npminstall-gnode-inspector

Jasmine

Mocha

開發(fā)工具

Sublime Text

開啟Sublime插件安裝：

按Ctrl+`調(diào)出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調(diào)出命令面板

輸入install調(diào)出InstallPackage選項并回車，然后在列

表中選中要安裝的插件。

需要安裝的插件：

Emmet

Alignment

JsFormat

Pre?xr

JsHint

引用類庫

Bootstrap

常用的JS庫：libs

相關(guān)資料

課前預(yù)習(xí)：AdobeKata

更多資料：GreenTea

主題

知識點

Code Kata!

（代碼演練）

快速啟動

(Quick Start)

1、要有前：Html + CSS + JavaScript

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

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

CodeKata： 為什么Html5

很優(yōu)秀

?更酷的API

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

?對移動設(shè)備的原生支持

?無限多的可能...

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

Html5(Ninja_V0.1)

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

?美輪美奐的CSS3

?擁抱流式布局

?重構(gòu)Html

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

計(Ninja_V0.2)

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

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

?視調(diào)試

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

?解決跨瀏覽器的問題

?瑞式軍刀

?讓BootStrap幫助我們

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

?制作Audio和Video說明

?解碼器

?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)
?實時和Http

?NodeJS WebSocket服務(wù)器

?使用Html5 WebSockets

API

?線程處理

?Web Workers

不一樣的Web前

端開發(fā)

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

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

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

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

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

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

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

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

9、DOM編程

10、封裝DOM操作

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

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

美輪美奐的前端

交互

1、JavaScript是無阻塞的

2、setTimeout && setInterval

3、初涉NodeJS

4、為什么是JavaScript

5、事件

6、UX設(shè)計

7、你必須知道的一些CSS知識

8、使用JavaScript控制CSS

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

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

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

JavaScript：解

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

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

2、字面量

3、new

4、對象的封裝

5、JSON

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

7、命名空間

8、JavaScript模式(對象篇)

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

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

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

JavaScript的繼

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

名開源框架

1、JavaScript是原型式語言

2、Prototype

3、__proto__

4、原型鏈

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

6、各位，見證奇跡的時刻到了

(JavaScript魔法)

7、語法糖

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

9、jQuery源碼骨架

10、Dojo源碼骨架

主題

知識點

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)

?對比Backbone.JS

?My.JS

?MVC:M

?MVC:V

?路由

?單頁面程序的問題

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

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

?延遲的腳本

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

?異步腳本注入

?LazyLoad? or LABjs

?RequireJS? or Sea.js

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

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

2、路由

3、模塊

4、依賴注入

5、輔助工具

JavaScript框架選型

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

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

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、單頁面處理的問題

7、JavaScript模式(框架篇)

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

前端模塊機(jī)制

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

2、異步腳本注入

3、推薦的無阻塞模式

4、CommonJS與AMD

5、RequireJS & Sea.js

后端模塊機(jī)制

1、CommonJS規(guī)范與NodeJS

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

3、包與NPM

4、Express + MongoDB +

Socket.IO

5、模塊組織管理

6、發(fā)布模塊

7、前后端共用模塊

主題

知識點

Code Kata!

（代碼演練）

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

1、JavaScript的精華與糟粕

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

3、JavaScript模式(編程實踐)

4、使用CoffeeScript

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

CodeKata：搭建

JavaScript下的持續(xù)交

付環(huán)境

JS下的單元測試

1、測試框架

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

3、異步下的測試

4、Mock

5、測試覆蓋率

6、生成測試報告

自動化構(gòu)建

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

2、模塊構(gòu)建

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