新課教育合作學校
北京國軟教育“Html5+代碼演練”實戰(zhàn)訓練營培訓課程
北京國軟教育“Html5+代碼演練”實戰(zhàn)訓練營培訓課程
【課程簡介】
在成為美國海軍陸戰(zhàn)隊的正式成員之前，所有的“菜鳥”都必須來到位于加州圣迭戈和南卡羅來那州的巴利斯島兩個訓練基地之一，經歷瘋狂而嚴格的訓練考核。只有那些掌握了超乎尋常技藝的勇士才有機會成為這個世界上最酷的、最訓練有素的精銳部隊——美國海軍陸戰(zhàn)隊中的一員。
歡迎來到BOOTCAMP。在這里，我們將全周期生活在JavaScript實戰(zhàn)編碼的環(huán)境下完成Web技能的學習。一起穿越JavaScript開發(fā)中危險重重的“編程陷阱”和“開發(fā)沼澤”，才能完成Web開發(fā)周期“實戰(zhàn)拉練”項目的各項測試和考核。要想完成這項光榮的使命，我們必須：
1、熟練使用各種“生存工具”：如JavaScript調試工具、單元測試工具、合并與壓縮、IDE開發(fā)環(huán)境以及其插件的使用；
2、獨立搭建JS下的持續(xù)構建開發(fā)環(huán)境；
3、掌握各種編程實踐的技法。這包括：TDD、BDD...各種實戰(zhàn)開發(fā)方法；
4、本能將Kanban與XP的敏捷實踐作為基礎實踐；
5、構建自己的Web MVC前后端開發(fā)框架；
6、全周期生活在JavaScript實戰(zhàn)編碼的環(huán)境下完成各種開發(fā)任務...
每2名成員會形成一個團隊。每一個團隊都會有自己指定的“作戰(zhàn)區(qū)域”和“武器裝備”。我們的目標是穿越那些危險重重的“編程陷阱”和“開發(fā)沼澤”，讓那些真正來自線的開發(fā)實踐成為我們身體中的一部分，變成我們的標識。從而成為世界上最酷的精銳部隊--“美國海軍陸戰(zhàn)隊”中的一員。
全程采用“Hackathon”學習模式，完全拋棄“Hello，World”式的毛毛蟲案例，遠離華而無實的PPT講義。
我們來自開發(fā)實戰(zhàn)的最前線！
我們！
需要的是“近身肉搏”、“拳拳到肉”的地獄式訓練！
只有。對，只有那些堅持到最后的勇士才配的上我們的榮譽：
我們是“Web Programming Ninja”。我們奮斗在軟件開發(fā)最前線！
【課程詳細大綱】
【篇:技藝篇】
主題 |
知識點 |
Code Kata! （代碼演練） |
快速啟動 (Quick Start) |
1、要有前：Html + CSS + JavaScript 2、要有后：NodeJS + Express +MongoDB + Socket.IO 3、要有推和拉：Http + Socket +Ajax + JSON |
CodeKata： 為什么Html5 很優(yōu)秀 ?更酷的API ?更自然的語義表達 ?對移動設備的原生支持 ?無限多的可能... CodeKata：在實戰(zhàn)中學習 Html5(Ninja_V0.1) ?Html5結構元素構建應用骨架 ?美輪美奐的CSS3 ?擁抱流式布局 ?重構Html CodeKata：必須響應式設 計(Ninja_V0.2) ?智能手機很重要 ?響應式設計的定義 ?視調試 ?響應式設計中的Html5 ?解決跨瀏覽器的問題 ?瑞式軍刀 ?讓BootStrap幫助我們 CodeKata：讓富媒體幫助用戶認識我們(Ninja_V0.3) ?制作Audio和Video說明 ?解碼器 ?Canvas ?瀏覽器的支持情況 ?向37Signals學習 CodeKata：使用遠程數(shù)據(jù) (Ninja_V0.4) ?NodeJS Server ?Restful ?Ajax調用 ?跨文檔消息通信 ?XmlHttpRequestLevel 2 ?結構化數(shù)據(jù) CodeKata：推送？是的， 推送(Ninja_V0.5) ?NodeJS WebSocket服務器 ?使用Html5 WebSockets API ?線程處理 ?Web Workers |
不一樣的Web前 端開發(fā) |
1、裝配腦袋(JavaScript是不一樣的) 2、JavaScript是函數(shù)式語言 3、 一切都是函數(shù) 4、 函數(shù)的幾種調用方式 5、內存作用域 6、回調與閉包 7、閉包的內存問題 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設計 7、你必須知道的一些CSS知識 8、使用JavaScript控制CSS 9、仿寫(jQuery|ExtJS)的動畫交互效果 10、DOM天生就慢(DOM的重繪與重排) |
|
面向對象的 JavaScript：解 構知名開源框架 |
1、面向對象的JavaScript 2、字面量 3、new 4、對象的封裝 5、JSON 6、數(shù)據(jù)的內存處理 7、命名空間 8、JavaScript模式(對象篇) 9、組織團隊的JavaScript代碼 10、仿寫(jQuery|ExtJS|Dojo)的可運行骨架 11、模塊化加載與執(zhí)行 |
|
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框架 ?使用數(shù)據(jù)綁定 ?定制模塊 ?路由、視圖 ?依賴注入 CodeKata：要有框架，自己的!(Ninja_V0.7) ?對比Backbone.JS ?My.JS ?MVC:M ?MVC:V ?路由 ?單頁面程序的問題 CodeKata：改用模塊化加載(Ninja_V0.8) ?模塊化加載技術選型 ?延遲的腳本 ?動態(tài)加載腳本 ?異步腳本注入 ?LazyLoad? or LABjs ?RequireJS? or Sea.js |
MV[*]框架的構成部分 |
1、模板與數(shù)據(jù)綁定 2、路由 3、模塊 4、依賴注入 5、輔助工具 |
|
JavaScript框架選型 |
1、不要重復發(fā)明輪子 2、幾個重要的技術類庫和框架選型： 3、Prototype、jQuery、Dojo與Ext 4、Backbone與 Spine.js 5、Angular、Knockout與Batman 6、Ember |
|
構建自己的JavaScript框架 |
1、類 2、繼承 3、多態(tài) 4、命名空間 5、框架的異常處理 6、單頁面處理的問題 7、JavaScript模式(框架篇) 8、構建自己的JavaScript框架 |
|
前端模塊機制 |
1、動態(tài)加載腳本 2、異步腳本注入 3、推薦的無阻塞模式 4、CommonJS與AMD 5、RequireJS & Sea.js |
|
后端模塊機制 |
1、CommonJS規(guī)范與NodeJS 2、NodeJS的核心模塊實現(xiàn) 3、包與NPM 4、Express + MongoDB + Socket.IO 5、模塊組織管理 6、發(fā)布模塊 7、前后端共用模塊 |
【第三篇:工程實踐篇】
主題 |
知識點 |
Code Kata! （代碼演練） |
編寫可維護的JavaScript代碼 |
1、JavaScript的精華與糟粕 2、JavaScript編程風格與JSHint 3、JavaScript模式(編程實踐) 4、使用CoffeeScript 5、Clean Code與重構 |
CodeKata：搭建 JavaScript下的持續(xù)交 付環(huán)境 |
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 |