探索CocosH5正确的开发姿势

回首自己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开发经验和技术制作成简短视频，分享自己的经验，帮助大家入门应该还是满有信心的。不仅可以帮助别人更是帮助自己，为自己所在的行业尽自己的一点绵薄之力。