回首自己3年多的cocos2d游戏开发经历，从cocos2d到coco2d-x入门，之后机缘巧合辗转到了cocos2d-js阵营。在深入使用cocos2d-js以及后来使用cocoscreator做游戏项目的同时，我开始逐步走进Javascript神奇的世界。现在回过头来忽然察觉到，不是自己选择了cocos H5(我将cocos2d-js/cocoscreator的统称)，而是选择了javascript；不只是简单地选择了这门脚本语言，而选择的是javascript平台和生态圈，这才是自己为什么一直对cocos H5不离不弃的原因。
在过去的两年时间先后培养了5名cocos2d-js客户端程序员，现在联系他们大多还在做cocos H5方向的工作。但发现不管是自己、曾经的同事、朋友们等的公司，但凡用cocos H5技术都发现都普遍存在一些误区，我在此根据自己的项目经验总结一下。
一、cocos H5普遍存在的误区
1. 左倾思想
简单地把cocos H5当成cocos c++/lua的代替品
1. 有部分公司或开发人员是从c++或移动应用开发转过来的，用的是c++的开发思路编写js代码。
现象：手写UI、开发、调试手段极其落后，通常的唯一方法就是打日志。
2. 不会利用javascript的三方模块，甚至不知道去使用它，其原因是不了解javascript的模块化技术。
现象：自身代码没有模块化，也无法实现代码模块和库的积累。
3. 把cocos h5当成c++、lua在使用，编写的代码不能在浏览器上运行。
现象：因为他们大多是在模拟器上开发，对web开发技术了解的不多，不能同时兼顾原生和浏览器。
口头禅：先把手机端做好再做浏览器。
2. 右倾思想
单纯地把cocos H5当成“传统”的web开发
1. 这类公司或开发人员，大多是从做web开发转过来的，而且还只是“传统”的web开发，直白一点就是做网页。
现象：在index.html中加载大量js代码和三方库。
2. 由于没有模块化原因，代码中充斥着大量的全局变量，对面向对象和设计模式运用的很少。
现象：资源管理混乱，代码效率低下，无法驾驭复杂的业务场景。cocos H5在资源管理上与cocos c++/lua最大的区别是“异步加载”，这也是疑惑的问题之一。
3. 编写的代码不能在原生上运行。
现象：因为是在浏览器上开发、调试，以及第1条中提到的模块的加载方式导致，只能工作在浏览器上。
口头禅：先把浏览器好再做手机。
二、我对cocos H5的理解
1. 曾经的认识
我最早跟大家一样，认为cocos2d-js只是在cocos2d-x家族中选择一门脚本语言，我为什么会选择JS而不是Lua呢？是因为早些年使用Lua做过端游服务器和客户端UI，当时对Lua的理解和运用都很肤浅，对项目驾驭能力太差，从而对Lua产生了不好的使用体验。
2. 现在的理解
在经过一段时间使用cocos2d-js，对javascript语言的深入，逐步了解到围绕Nodejs、Web前端的javascript前后端生态圈。慢慢地我意识到，我以为只是选择一门脚本语言，其实选择的是javascrip平台和生态圈！而cocos H5只是Javascript中的一员。
深入使用Cocos H5技术，同时充分利用Javascript平台世界的生态工具，才能正发挥cocos的威力。
三、从我的CocosCreator项目看Javascript世界
1. nodejs
nodejs的出现是javascript模块化诞生的标志，从此可以使用javascript构建服务端应用。
如果不了解nodejs也无法知道如何将javascript代码模块化，有了模块化你可像编写c++、Java那样引入模块。团队开发中才可以将功能有效拆解，做出自己可复用的模块，建立自己的代码库。我认识为模块化是编写Cocos H5开发的第一步，我在项目编码中一律采用nodejs代码风格，利用Browserify或Webpack可以将代码完美地运行在浏览器和原生上。
2. npm
npm全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块(包)的标准。
npm上面承载了数以万计的Node模块，纯javascript编写的模块可以在前后端通用，理所当然cocos H5中也能使用。其中还有各种奇思妙想的Node工具让人拍案叫绝，同时还能提高你的工作效率。如果你在使用cocos H5技术，却对npm了无所知的话，现在你读这篇文章你应该觉得很幸运，因为它是一个宝库。
在cocos H5游戏代码工程中我常用的npm模块有：
lodash
undersocre(已经被lodash替代了)
protobufjs
async
moment
socket.io
3. Grunt & Gulp
Grunt是Javascript世界的构建工具，对于需要反复重复的任务实现自动化，自动化工具可以减轻你的劳动，简化你的工作。
我在项目中利用Grunt解决了客户端程序反复打开关闭目录、Ctrl+C 、Ctrl+V鼠标点来点去讨人厌且又无技术含量的工作。这些无聊的工作，每天消耗着我们的大脑能量主要是：从SVN获取美术、策划输出的资源、把它们复制到客户端工程不同的目录、有的还需要压缩、将策划Excel还需要转换成JSON或MySQL表。
我在cocos H5项目开发中用到的Grunt插件主要是：
grunt-shell
grunt-sync
编写命令工具的npm模块有：
shelljs
node-xlsx
yargs
plist
rd
mysql
Gulp.js是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务，利用Node.js流的威力，你可以快速构建项目并减少频繁的 IO 操作。
CocosCreator中集成的自动化构建工具就是 Gulp，你也可以在安装目录中找到相关脚本文件。当你修改过Creator引擎源码时，记得一定要使用使用 gulp 命令重新编译引擎才能生效，方法步骤如下：
命令终端切换到目录: Creator安装目录/engine
执行命令：npm install (提前安装好nodejs\npm)
执行命令：gulp ，等待编译完成即可。
4. ES6
ECMAScript6(以下简称ES6)是JavaScript语言的下一代标准。
在CocosCreator项目中，我已经迫不急待地尝试了ES6的新语法去编写代码，它让我体会到写代码也会这么有乐趣，中其常用的新语法有：字符串模块、箭头函数、对象解构、默认参数、类定义。
在CocosCreator中你可以使用所有以上的新语法，因为Creator中已经集了Bable编译器。但Cocos2d-js中要使用需要自己配置环境，这也不是难事。
5. Bable
Bable一个 JavaScript编译器，你可以使用下一代javascript语法写代码，不用等待浏览器提供支持。
在 Creator 中已经集成了Babel，可以减少代码量、提高可读性。建议在新项目中使用 ES6新的语法规范，同时也能保持与 Javascript 语言的与时俱进。
5. Browserify & Webpack
Browserify可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。
Browserify才是正真的将前端javascript模块化的主角，我最早在 cocos2d-js 项目就使用它来组织代码。它帮助我解决了在 cocos2d-js 中代码加载顺序问题，同时可以编写node一样风格的代码，使用npm来管理三方库，天地人从此连接再了一起，Creator 中已经集成了 Browserify，在安装目录中可以看到。
与 Browserify 同类工具还有 Webpack，我在 cocos2d-js 项目中还尝试过Webpack，比Browserifyg还要强大。有的前端工程直接使用Webpack代替了Browserify和Grunt。最早我满以为Creator应该是由 Webpack+Grunt+Babel，实际是由 Browserify+Glup+Babel。Webpack是javascript世界不可忽视的构建工具。
7. ESLint
ESLint是一个可配置的JavaScript代码校验工具，不仅可以校验最新的语法，还可以配置规则约束你的代码风格，严格到一个空格或标点。
如果是正式项目强烈建议在日常编码时使用上ESlint，以Airbnb JavaScript Style Guide语法规范为根基，再根据自己的实际情况配置调整。
有了 ESlint的保驾护航，我相信我们的javascript 代码会更加的优雅、健壮，我们的项目质量会更高。
心愿
2016年是自己最为动荡的一年，由于身体不适离职、原公司解散、新工作不顺。重振旗鼓面对新一年的到来时，洞察到一个奇怪的现像，在成都游戏行业中cocos2d-js、cocoscreator市场，很多公司招不到人，与HR聊天的过程中听说到“成都要找个做cocos2d-js\cocoscreator的一周都找不到一个冒泡的，c++和lua的到是多”，这是真话因为我在原来的公司也为招聘cocos2d-js的人才发愁。
经过一段时间的思索，我想将自己的cocos H5开发经验和技术制作成简短视频，分享自己的经验，帮助大家入门应该还是满有信心的，不仅可以帮助别人更是帮助自己，为自己所在的行业尽自己的一点绵薄之力。
写这篇文章之前本是制作了一段简短的视频，也是自己第一次尝试，发现有很多的不足。我又将视频中所讲的内容整理用文字再记录一遍，补充了一些内容，帮助不便看视频的同学们。
点击收看视频：
