回首自己3年多的cocos2d游戲開發(fā)經(jīng)歷目养，從cocos2d到coco2d-x入門，之后機(jī)緣巧合輾轉(zhuǎn)到了cocos2d-js陣營毒嫡。在深入使用cocos2d-js以及后來使用cocoscreator做游戲項(xiàng)目的同時(shí)癌蚁，我開始逐步走進(jìn)Javascript神奇的世界。現(xiàn)在回過頭來忽然察覺到兜畸，不是自己選擇了cocos H5(我將cocos2d-js/cocoscreator的統(tǒng)稱)努释，而是選擇了javascript；不只是簡單地選擇了這門腳本語言咬摇，而選擇的是javascript平臺和生態(tài)圈伐蒂，這才是自己為什么一直對cocos H5不離不棄的原因。
在過去的兩年時(shí)間先后培養(yǎng)了5名cocos2d-js客戶端程序員菲嘴，現(xiàn)在聯(lián)系他們大多還在做cocos H5方向的工作饿自。但發(fā)現(xiàn)不管是自己汰翠、曾經(jīng)的同事龄坪、朋友們等的公司，但凡用cocos H5技術(shù)都發(fā)現(xiàn)都普遍存在一些誤區(qū)复唤，我在此根據(jù)自己的項(xiàng)目經(jīng)驗(yàn)總結(jié)一下健田。
一、cocos H5普遍存在的誤區(qū)
1. 左傾思想
簡單地把cocos H5當(dāng)成cocos c++/lua的代替品
1. 有部分公司或開發(fā)人員是從c++或移動(dòng)應(yīng)用開發(fā)轉(zhuǎn)過來的佛纫，用的是c++的開發(fā)思路編寫js代碼妓局。
現(xiàn)象：手寫UI、開發(fā)呈宇、調(diào)試手段極其落后好爬，通常的唯一方法就是打日志。
2. 不會利用javascript的三方模塊甥啄，甚至不知道去使用它存炮，其原因是不了解javascript的模塊化技術(shù)。
現(xiàn)象：自身代碼沒有模塊化，也無法實(shí)現(xiàn)代碼模塊和庫的積累穆桂。
3. 把cocos h5當(dāng)成c++宫盔、lua在使用，編寫的代碼不能在瀏覽器上運(yùn)行享完。
現(xiàn)象：因?yàn)樗麄兇蠖嗍窃谀M器上開發(fā)灼芭，對web開發(fā)技術(shù)了解的不多，不能同時(shí)兼顧原生和瀏覽器般又。
口頭禪：先把手機(jī)端做好再做瀏覽器彼绷。
2. 右傾思想
單純地把cocos H5當(dāng)成“傳統(tǒng)”的web開發(fā)
1. 這類公司或開發(fā)人員，大多是從做web開發(fā)轉(zhuǎn)過來的茴迁，而且還只是“傳統(tǒng)”的web開發(fā)苛预，直白一點(diǎn)就是做網(wǎng)頁。
現(xiàn)象：在index.html中加載大量js代碼和三方庫笋熬。
2. 由于沒有模塊化原因热某，代碼中充斥著大量的全局變量，對面向?qū)ο蠛驮O(shè)計(jì)模式運(yùn)用的很少胳螟。
現(xiàn)象：資源管理混亂昔馋，代碼效率低下，無法駕馭復(fù)雜的業(yè)務(wù)場景糖耸。cocos H5在資源管理上與cocos c++/lua最大的區(qū)別是“異步加載”秘遏，這也是疑惑的問題之一。
3. 編寫的代碼不能在原生上運(yùn)行嘉竟。
現(xiàn)象：因?yàn)槭窃跒g覽器上開發(fā)邦危、調(diào)試，以及第1條中提到的模塊的加載方式導(dǎo)致舍扰，只能工作在瀏覽器上倦蚪。
口頭禪：先把瀏覽器好再做手機(jī)。
二边苹、我對cocos H5的理解
1. 曾經(jīng)的認(rèn)識
我最早跟大家一樣陵且，認(rèn)為cocos2d-js只是在cocos2d-x家族中選擇一門腳本語言，我為什么會選擇JS而不是Lua呢个束？是因?yàn)樵缧┠晔褂肔ua做過端游服務(wù)器和客戶端UI慕购，當(dāng)時(shí)對Lua的理解和運(yùn)用都很膚淺，對項(xiàng)目駕馭能力太差茬底，從而對Lua產(chǎn)生了不好的使用體驗(yàn)沪悲。
2. 現(xiàn)在的理解
在經(jīng)過一段時(shí)間使用cocos2d-js，對javascript語言的深入阱表，逐步了解到圍繞Nodejs殿如、Web前端的javascript前后端生態(tài)圈昌妹。慢慢地我意識到，我以為只是選擇一門腳本語言握截，其實(shí)選擇的是javascrip平臺和生態(tài)圈飞崖！而cocos H5只是Javascript中的一員。
深入使用Cocos H5技術(shù)谨胞，同時(shí)充分利用Javascript平臺世界的生態(tài)工具固歪，才能正發(fā)揮cocos的威力。
三胯努、從我的CocosCreator項(xiàng)目看Javascript世界
1. nodejs
nodejs的出現(xiàn)是javascript模塊化誕生的標(biāo)志牢裳，從此可以使用javascript構(gòu)建服務(wù)端應(yīng)用。
如果不了解nodejs也無法知道如何將javascript代碼模塊化叶沛，有了模塊化你可像編寫c++蒲讯、Java那樣引入模塊。團(tuán)隊(duì)開發(fā)中才可以將功能有效拆解灰署，做出自己可復(fù)用的模塊判帮，建立自己的代碼庫。我認(rèn)識為模塊化是編寫Cocos H5開發(fā)的第一步溉箕，我在項(xiàng)目編碼中一律采用nodejs代碼風(fēng)格晦墙，利用Browserify或Webpack可以將代碼完美地運(yùn)行在瀏覽器和原生上。
2. npm
npm全稱是Node Package Manager肴茄，是一個(gè)NodeJS包管理和分發(fā)工具晌畅，已經(jīng)成為了非官方的發(fā)布Node模塊(包)的標(biāo)準(zhǔn)。
npm上面承載了數(shù)以萬計(jì)的Node模塊寡痰，純javascript編寫的模塊可以在前后端通用抗楔，理所當(dāng)然cocos H5中也能使用。其中還有各種奇思妙想的Node工具讓人拍案叫絕拦坠，同時(shí)還能提高你的工作效率连躏。如果你在使用cocos H5技術(shù)，卻對npm了無所知的話贪婉，現(xiàn)在你讀這篇文章你應(yīng)該覺得很幸運(yùn)反粥，因?yàn)樗且粋€(gè)寶庫。
在cocos H5游戲代碼工程中我常用的npm模塊有：
lodash
undersocre(已經(jīng)被lodash替代了)
protobufjs
async
moment
socket.io
3. Grunt & Gulp
Grunt是Javascript世界的構(gòu)建工具疲迂，對于需要反復(fù)重復(fù)的任務(wù)實(shí)現(xiàn)自動(dòng)化，自動(dòng)化工具可以減輕你的勞動(dòng)莫湘，簡化你的工作尤蒿。
我在項(xiàng)目中利用Grunt解決了客戶端程序反復(fù)打開關(guān)閉目錄、Ctrl+C 幅垮、Ctrl+V鼠標(biāo)點(diǎn)來點(diǎn)去討人厭且又無技術(shù)含量的工作腰池。這些無聊的工作，每天消耗著我們的大腦能量主要是：從SVN獲取美術(shù)、策劃輸出的資源示弓、把它們復(fù)制到客戶端工程不同的目錄讳侨、有的還需要壓縮、將策劃Excel還需要轉(zhuǎn)換成JSON或MySQL表奏属。
我在cocos H5項(xiàng)目開發(fā)中用到的Grunt插件主要是：
grunt-shell
grunt-sync
編寫命令工具的npm模塊有：
shelljs
node-xlsx
yargs
plist
rd
mysql
Gulp.js是一個(gè)自動(dòng)化構(gòu)建工具跨跨，開發(fā)者可以使用它在項(xiàng)目開發(fā)過程中自動(dòng)執(zhí)行常見任務(wù)，利用Node.js流的威力囱皿，你可以快速構(gòu)建項(xiàng)目并減少頻繁的 IO 操作勇婴。
CocosCreator中集成的自動(dòng)化構(gòu)建工具就是 Gulp，你也可以在安裝目錄中找到相關(guān)腳本文件嘱腥。當(dāng)你修改過Creator引擎源碼時(shí)耕渴，記得一定要使用使用 gulp 命令重新編譯引擎才能生效，方法步驟如下：
命令終端切換到目錄: Creator安裝目錄/engine
執(zhí)行命令：npm install (提前安裝好nodejs\npm)
執(zhí)行命令：gulp 齿兔，等待編譯完成即可橱脸。
4. ES6
ECMAScript6(以下簡稱ES6)是JavaScript語言的下一代標(biāo)準(zhǔn)。
在CocosCreator項(xiàng)目中分苇，我已經(jīng)迫不急待地嘗試了ES6的新語法去編寫代碼慰技，它讓我體會到寫代碼也會這么有樂趣，中其常用的新語法有：字符串模塊组砚、箭頭函數(shù)吻商、對象解構(gòu)、默認(rèn)參數(shù)糟红、類定義艾帐。
在CocosCreator中你可以使用所有以上的新語法，因?yàn)镃reator中已經(jīng)集了Bable編譯器盆偿。但Cocos2d-js中要使用需要自己配置環(huán)境柒爸，這也不是難事。
5. Bable
Bable一個(gè) JavaScript編譯器事扭，你可以使用下一代javascript語法寫代碼捎稚，不用等待瀏覽器提供支持。
在 Creator 中已經(jīng)集成了Babel求橄，可以減少代碼量今野、提高可讀性。建議在新項(xiàng)目中使用 ES6新的語法規(guī)范罐农，同時(shí)也能保持與 Javascript 語言的與時(shí)俱進(jìn)条霜。
5. Browserify & Webpack
Browserify可以讓你使用類似于 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼,通過預(yù)編譯讓前端 Javascript 可以直接使用 Node NPM 安裝的一些庫。
Browserify才是正真的將前端javascript模塊化的主角涵亏，我最早在 cocos2d-js 項(xiàng)目就使用它來組織代碼宰睡。它幫助我解決了在 cocos2d-js 中代碼加載順序問題蒲凶，同時(shí)可以編寫node一樣風(fēng)格的代碼，使用npm來管理三方庫拆内，天地人從此連接再了一起旋圆，Creator 中已經(jīng)集成了 Browserify，在安裝目錄中可以看到麸恍。
與 Browserify 同類工具還有 Webpack灵巧，我在 cocos2d-js 項(xiàng)目中還嘗試過Webpack，比Browserifyg還要強(qiáng)大或南。有的前端工程直接使用Webpack代替了Browserify和Grunt孩等。最早我滿以為Creator應(yīng)該是由 Webpack+Grunt+Babel，實(shí)際是由 Browserify+Glup+Babel采够。Webpack是javascript世界不可忽視的構(gòu)建工具肄方。
7. ESLint
ESLint是一個(gè)可配置的JavaScript代碼校驗(yàn)工具，不僅可以校驗(yàn)最新的語法蹬癌，還可以配置規(guī)則約束你的代碼風(fēng)格权她，嚴(yán)格到一個(gè)空格或標(biāo)點(diǎn)。
如果是正式項(xiàng)目強(qiáng)烈建議在日常編碼時(shí)使用上ESlint逝薪，以Airbnb JavaScript Style Guide語法規(guī)范為根基隅要，再根據(jù)自己的實(shí)際情況配置調(diào)整。
有了 ESlint的保駕護(hù)航董济，我相信我們的javascript 代碼會更加的優(yōu)雅步清、健壯，我們的項(xiàng)目質(zhì)量會更高虏肾。
心愿
2016年是自己最為動(dòng)蕩的一年廓啊，由于身體不適離職、原公司解散封豪、新工作不順谴轮。重振旗鼓面對新一年的到來時(shí)，洞察到一個(gè)奇怪的現(xiàn)像吹埠，在成都游戲行業(yè)中cocos2d-js第步、cocoscreator市場，很多公司招不到人缘琅，與HR聊天的過程中聽說到“成都要找個(gè)做cocos2d-js\cocoscreator的一周都找不到一個(gè)冒泡的粘都，c++和lua的到是多”，這是真話因?yàn)槲以谠瓉淼墓疽矠檎衅竎ocos2d-js的人才發(fā)愁胯杭。
經(jīng)過一段時(shí)間的思索驯杜，我想將自己的cocos H5開發(fā)經(jīng)驗(yàn)和技術(shù)制作成簡短視頻，分享自己的經(jīng)驗(yàn)做个，幫助大家入門應(yīng)該還是滿有信心的鸽心，不僅可以幫助別人更是幫助自己，為自己所在的行業(yè)盡自己的一點(diǎn)綿薄之力居暖。
寫這篇文章之前本是制作了一段簡短的視頻顽频，也是自己第一次嘗試，發(fā)現(xiàn)有很多的不足太闺。我又將視頻中所講的內(nèi)容整理用文字再記錄一遍糯景，補(bǔ)充了一些內(nèi)容，幫助不便看視頻的同學(xué)們省骂。
點(diǎn)擊收看視頻：
