回首自己3年多的cocos2d游戲開(kāi)發(fā)經(jīng)歷，從cocos2d到coco2d-x入門(mén)，之后機(jī)緣巧合輾轉(zhuǎn)到了cocos2d-js陣營(yíng)。在深入使用cocos2d-js以及后來(lái)使用cocoscreator做游戲項(xiàng)目的同時(shí)，我開(kāi)始逐步走進(jìn)Javascript神奇的世界?，F(xiàn)在回過(guò)頭來(lái)忽然察覺(jué)到，不是自己選擇了cocos H5(我將cocos2d-js/cocoscreator的統(tǒng)稱(chēng))，而是選擇了javascript；不只是簡(jiǎn)單地選擇了這門(mén)腳本語(yǔ)言，而選擇的是javascript平臺(tái)和生態(tài)圈，這才是自己為什么一直對(duì)cocos H5不離不棄的原因。
在過(guò)去的兩年時(shí)間先后培養(yǎng)了5名cocos2d-js客戶(hù)端程序員，現(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. 左傾思想
簡(jiǎn)單地把cocos H5當(dāng)成cocos c++/lua的代替品
1. 有部分公司或開(kāi)發(fā)人員是從c++或移動(dòng)應(yīng)用開(kāi)發(fā)轉(zhuǎn)過(guò)來(lái)的，用的是c++的開(kāi)發(fā)思路編寫(xiě)js代碼。
現(xiàn)象：手寫(xiě)UI、開(kāi)發(fā)、調(diào)試手段極其落后，通常的唯一方法就是打日志。
2. 不會(huì)利用javascript的三方模塊，甚至不知道去使用它，其原因是不了解javascript的模塊化技術(shù)。
現(xiàn)象：自身代碼沒(méi)有模塊化，也無(wú)法實(shí)現(xiàn)代碼模塊和庫(kù)的積累。
3. 把cocos h5當(dāng)成c++、lua在使用，編寫(xiě)的代碼不能在瀏覽器上運(yùn)行。
現(xiàn)象：因?yàn)樗麄兇蠖嗍窃谀M器上開(kāi)發(fā)，對(duì)web開(kāi)發(fā)技術(shù)了解的不多，不能同時(shí)兼顧原生和瀏覽器。
口頭禪：先把手機(jī)端做好再做瀏覽器。
2. 右傾思想
單純地把cocos H5當(dāng)成“傳統(tǒng)”的web開(kāi)發(fā)
1. 這類(lèi)公司或開(kāi)發(fā)人員，大多是從做web開(kāi)發(fā)轉(zhuǎn)過(guò)來(lái)的，而且還只是“傳統(tǒng)”的web開(kāi)發(fā)，直白一點(diǎn)就是做網(wǎng)頁(yè)。
現(xiàn)象：在index.html中加載大量js代碼和三方庫(kù)。
2. 由于沒(méi)有模塊化原因，代碼中充斥著大量的全局變量，對(duì)面向?qū)ο蠛驮O(shè)計(jì)模式運(yùn)用的很少。
現(xiàn)象：資源管理混亂，代碼效率低下，無(wú)法駕馭復(fù)雜的業(yè)務(wù)場(chǎng)景。cocos H5在資源管理上與cocos c++/lua最大的區(qū)別是“異步加載”，這也是疑惑的問(wèn)題之一。
3. 編寫(xiě)的代碼不能在原生上運(yùn)行。
現(xiàn)象：因?yàn)槭窃跒g覽器上開(kāi)發(fā)、調(diào)試，以及第1條中提到的模塊的加載方式導(dǎo)致，只能工作在瀏覽器上。
口頭禪：先把瀏覽器好再做手機(jī)。
二、我對(duì)cocos H5的理解
1. 曾經(jīng)的認(rèn)識(shí)
我最早跟大家一樣，認(rèn)為cocos2d-js只是在cocos2d-x家族中選擇一門(mén)腳本語(yǔ)言，我為什么會(huì)選擇JS而不是Lua呢？是因?yàn)樵缧┠晔褂肔ua做過(guò)端游服務(wù)器和客戶(hù)端UI，當(dāng)時(shí)對(duì)Lua的理解和運(yùn)用都很膚淺，對(duì)項(xiàng)目駕馭能力太差，從而對(duì)Lua產(chǎn)生了不好的使用體驗(yàn)。
2. 現(xiàn)在的理解
在經(jīng)過(guò)一段時(shí)間使用cocos2d-js，對(duì)javascript語(yǔ)言的深入，逐步了解到圍繞Nodejs、Web前端的javascript前后端生態(tài)圈。慢慢地我意識(shí)到，我以為只是選擇一門(mén)腳本語(yǔ)言，其實(shí)選擇的是javascrip平臺(tái)和生態(tài)圈！而cocos H5只是Javascript中的一員。
深入使用Cocos H5技術(shù)，同時(shí)充分利用Javascript平臺(tái)世界的生態(tài)工具，才能正發(fā)揮cocos的威力。
三、從我的CocosCreator項(xiàng)目看Javascript世界
1. nodejs
nodejs的出現(xiàn)是javascript模塊化誕生的標(biāo)志，從此可以使用javascript構(gòu)建服務(wù)端應(yīng)用。
如果不了解nodejs也無(wú)法知道如何將javascript代碼模塊化，有了模塊化你可像編寫(xiě)c++、Java那樣引入模塊。團(tuán)隊(duì)開(kāi)發(fā)中才可以將功能有效拆解，做出自己可復(fù)用的模塊，建立自己的代碼庫(kù)。我認(rèn)識(shí)為模塊化是編寫(xiě)Cocos H5開(kāi)發(fā)的第一步，我在項(xiàng)目編碼中一律采用nodejs代碼風(fēng)格，利用Browserify或Webpack可以將代碼完美地運(yùn)行在瀏覽器和原生上。
2. npm
npm全稱(chēng)是Node Package Manager，是一個(gè)NodeJS包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布Node模塊(包)的標(biāo)準(zhǔn)。
npm上面承載了數(shù)以萬(wàn)計(jì)的Node模塊，純javascript編寫(xiě)的模塊可以在前后端通用，理所當(dāng)然cocos H5中也能使用。其中還有各種奇思妙想的Node工具讓人拍案叫絕，同時(shí)還能提高你的工作效率。如果你在使用cocos H5技術(shù)，卻對(duì)npm了無(wú)所知的話(huà)，現(xiàn)在你讀這篇文章你應(yīng)該覺(jué)得很幸運(yùn)，因?yàn)樗且粋€(gè)寶庫(kù)。
在cocos H5游戲代碼工程中我常用的npm模塊有：
lodash
undersocre(已經(jīng)被lodash替代了)
protobufjs
async
moment
socket.io
3. Grunt & Gulp
Grunt是Javascript世界的構(gòu)建工具，對(duì)于需要反復(fù)重復(fù)的任務(wù)實(shí)現(xiàn)自動(dòng)化，自動(dòng)化工具可以減輕你的勞動(dòng)，簡(jiǎn)化你的工作。
我在項(xiàng)目中利用Grunt解決了客戶(hù)端程序反復(fù)打開(kāi)關(guān)閉目錄、Ctrl+C 、Ctrl+V鼠標(biāo)點(diǎn)來(lái)點(diǎn)去討人厭且又無(wú)技術(shù)含量的工作。這些無(wú)聊的工作，每天消耗著我們的大腦能量主要是：從SVN獲取美術(shù)、策劃輸出的資源、把它們復(fù)制到客戶(hù)端工程不同的目錄、有的還需要壓縮、將策劃Excel還需要轉(zhuǎn)換成JSON或MySQL表。
我在cocos H5項(xiàng)目開(kāi)發(fā)中用到的Grunt插件主要是：
grunt-shell
grunt-sync
編寫(xiě)命令工具的npm模塊有：
shelljs
node-xlsx
yargs
plist
rd
mysql
Gulp.js是一個(gè)自動(dòng)化構(gòu)建工具，開(kāi)發(fā)者可以使用它在項(xiàng)目開(kāi)發(fā)過(guò)程中自動(dòng)執(zhí)行常見(jiàn)任務(wù)，利用Node.js流的威力，你可以快速構(gòu)建項(xiàng)目并減少頻繁的 IO 操作。
CocosCreator中集成的自動(dòng)化構(gòu)建工具就是 Gulp，你也可以在安裝目錄中找到相關(guān)腳本文件。當(dāng)你修改過(guò)Creator引擎源碼時(shí)，記得一定要使用使用 gulp 命令重新編譯引擎才能生效，方法步驟如下：
命令終端切換到目錄: Creator安裝目錄/engine
執(zhí)行命令：npm install (提前安裝好nodejs\npm)
執(zhí)行命令：gulp ，等待編譯完成即可。
4. ES6
ECMAScript6(以下簡(jiǎn)稱(chēng)ES6)是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)。
在CocosCreator項(xiàng)目中，我已經(jīng)迫不急待地嘗試了ES6的新語(yǔ)法去編寫(xiě)代碼，它讓我體會(huì)到寫(xiě)代碼也會(huì)這么有樂(lè)趣，中其常用的新語(yǔ)法有：字符串模塊、箭頭函數(shù)、對(duì)象解構(gòu)、默認(rèn)參數(shù)、類(lèi)定義。
在CocosCreator中你可以使用所有以上的新語(yǔ)法，因?yàn)镃reator中已經(jīng)集了Bable編譯器。但Cocos2d-js中要使用需要自己配置環(huán)境，這也不是難事。
5. Bable
Bable一個(gè) JavaScript編譯器，你可以使用下一代javascript語(yǔ)法寫(xiě)代碼，不用等待瀏覽器提供支持。
在 Creator 中已經(jīng)集成了Babel，可以減少代碼量、提高可讀性。建議在新項(xiàng)目中使用 ES6新的語(yǔ)法規(guī)范，同時(shí)也能保持與 Javascript 語(yǔ)言的與時(shí)俱進(jìn)。
5. Browserify & Webpack
Browserify可以讓你使用類(lèi)似于 node 的 require() 的方式來(lái)組織瀏覽器端的 Javascript 代碼,通過(guò)預(yù)編譯讓前端 Javascript 可以直接使用 Node NPM 安裝的一些庫(kù)。
Browserify才是正真的將前端javascript模塊化的主角，我最早在 cocos2d-js 項(xiàng)目就使用它來(lái)組織代碼。它幫助我解決了在 cocos2d-js 中代碼加載順序問(wèn)題，同時(shí)可以編寫(xiě)node一樣風(fēng)格的代碼，使用npm來(lái)管理三方庫(kù)，天地人從此連接再了一起，Creator 中已經(jīng)集成了 Browserify，在安裝目錄中可以看到。
與 Browserify 同類(lèi)工具還有 Webpack，我在 cocos2d-js 項(xiàng)目中還嘗試過(guò)Webpack，比Browserifyg還要強(qiáng)大。有的前端工程直接使用Webpack代替了Browserify和Grunt。最早我滿(mǎn)以為Creator應(yīng)該是由 Webpack+Grunt+Babel，實(shí)際是由 Browserify+Glup+Babel。Webpack是javascript世界不可忽視的構(gòu)建工具。
7. ESLint
ESLint是一個(gè)可配置的JavaScript代碼校驗(yàn)工具，不僅可以校驗(yàn)最新的語(yǔ)法，還可以配置規(guī)則約束你的代碼風(fēng)格，嚴(yán)格到一個(gè)空格或標(biāo)點(diǎn)。
如果是正式項(xiàng)目強(qiáng)烈建議在日常編碼時(shí)使用上ESlint，以Airbnb JavaScript Style Guide語(yǔ)法規(guī)范為根基，再根據(jù)自己的實(shí)際情況配置調(diào)整。
有了 ESlint的保駕護(hù)航，我相信我們的javascript 代碼會(huì)更加的優(yōu)雅、健壯，我們的項(xiàng)目質(zhì)量會(huì)更高。
心愿
2016年是自己最為動(dòng)蕩的一年，由于身體不適離職、原公司解散、新工作不順。重振旗鼓面對(duì)新一年的到來(lái)時(shí)，洞察到一個(gè)奇怪的現(xiàn)像，在成都游戲行業(yè)中cocos2d-js、cocoscreator市場(chǎng)，很多公司招不到人，與HR聊天的過(guò)程中聽(tīng)說(shuō)到“成都要找個(gè)做cocos2d-js\cocoscreator的一周都找不到一個(gè)冒泡的，c++和lua的到是多”，這是真話(huà)因?yàn)槲以谠瓉?lái)的公司也為招聘cocos2d-js的人才發(fā)愁。
經(jīng)過(guò)一段時(shí)間的思索，我想將自己的cocos H5開(kāi)發(fā)經(jīng)驗(yàn)和技術(shù)制作成簡(jiǎn)短視頻，分享自己的經(jīng)驗(yàn)，幫助大家入門(mén)應(yīng)該還是滿(mǎn)有信心的，不僅可以幫助別人更是幫助自己，為自己所在的行業(yè)盡自己的一點(diǎn)綿薄之力。
寫(xiě)這篇文章之前本是制作了一段簡(jiǎn)短的視頻，也是自己第一次嘗試，發(fā)現(xiàn)有很多的不足。我又將視頻中所講的內(nèi)容整理用文字再記錄一遍，補(bǔ)充了一些內(nèi)容，幫助不便看視頻的同學(xué)們。
點(diǎn)擊收看視頻：
