小菜
> 最近工作中用到了createjs，主要开发模式是UE通过Animate CC开发动画， publish之后形成基于createjs的代码。在调试的时候遇到了不少小坑，当然最后都完美解决了。下面所述的问题全部是基于AnimateCC2015生成的createjs代码。 ### AnimateCC适配代码造成的动画卡顿 在生成createjs代码的时候，animateCC有这么一个选项：  `make responsive`这个选项是默认选中的，之后生成的代码可以按照定长、定宽或者长宽比进行响应式布局。这个选项如果选中了，那么你生成的代码会多出来一个函数--makeResponsive。这个函数会根据屏幕大小对canvas进行重绘，会造成页面加载进来的时候的卡顿。 解决方案：通过viewport来进行适配，而不是通过内置的函数 ### Animate CC 生成的图片过大造成的动画卡顿 如果上面那个坑你踩平了，那么接下来很有可能会遇到下面这个坑了：  animate CC发布的时候可以自定义图片大小，默认的是4000*4000，如果你按照默认的大小生成动画，那么动画很有可能在UC以及某些安卓自带浏览器和微信中 *相当* 卡。问题的原因我也不是很清楚，有可能是对spriteSheet支持的不是很好吧。 解决方案：把生成的图片大小控制在2000x2000以内。图片越小，动画效果越流畅。 ### 代码管理 如果动画多的话，那么生成的createjs文件可能会很长，这时候，查找我们需要修改的地方很麻烦。所以，我们可以把单独需要修改的影片剪辑单独写成一个js，其实animateCC最后根据主轴生成的代码也是一个movie clip，我们只需要把这个move clip单独拎出来进行修改管理就好了。 解决方案：通过output Name来迅速确定这个主轴的剪辑位置，然后单独拿出来作为一个单独的js，之后的逻辑添加和帧上的修改，都可以在这个js中进行。针对这个问题，我开发了一套本地集成环境，通过对Animate CC生成的文件进行ast解析，自动解构出主轴的代码；以及如果AnimateCC文件修改后，新生成一套js文件，可以自动覆盖非主轴代码，现在仅供项目内部使用，暂时不考虑开源。...
> 跟大家分享一下如何使用travis-ci和coveralls.io分别实现持续集成和覆盖度测试报告上传 ### 背景（npm找包指北） npm上包的储备量实在是太大了，如何快速找到你心仪的而且高质量的包呢？ - 不知道大家是不是注意过，很多开源的项目，都拥有下面这两个角标：  一般拥有这两个角标的，包的质量都不会特别差。在我的找包经验中，一般都会先看这两个角标，如果有覆盖度测试的角标，说明他的测试用例比较全面，入手了解如何使用一个包的各种API，最快速的方式就是阅读测试用例；如果有持续集成角标，说明他的包是可以跑通的，从安装到使用的流程上是没有任何问题的。 - 再有一个看包的质量如何的方式就是看他的下载量：如果月下载量大于1k的话，说明这个包有人长期使用，稳定性应该不错，可以一式。 - 还有一个辨别包的质量好坏的标准就是看这个包的核心贡献者，国外的比如node CTC成员以及tj大神等等，国内的比如说蚂蚁金服、淘宝、天猫的前端/node团队成员、75团、fex、Alloy Team等（人员太多就不一一列出了，话说十月份腾讯好像在git上追回了一部分开源代码版权？其中还有livepool）。 ### travis-ci简介和使用 #### 简介 travis-ci是一款开源的实现持续集成的工具。因为开源而且空间公用，所以比较适合个人开发者或者较小的项目（像node这种的都会有自己搭建的jekins，集成版本也会有很多版本，而且每天都会有nightly-build）。 #### 使用 这个使用起来也是非常方便的，你只需要在你的文件目录的根目录下加上`.travis.yml`文件，然后上传到git上就好了，tarvis-ci可以同步你github上的项目。接下来跟大家详细说一下常用的配置： ```code sudo: false//sudo 最好设置成false，这样travis会对你的项目根据提交的集成时间顺延进行集成，而且官方不鼓励sudo language: node_js //语言设置，前端来说一般都是node咯...
> 今天在调试的时候遇到的一个比较蛋疼的问题，描述如下： 我在`index.js`中引入了一个文件，是以一种比较奇葩的方式引入的： ```js for(let i = 0; i
### 起因 今天在开发的过程中，在chrome下遇到一个很奇葩的问题，favicon.ico如果不返回404且不能正常返回的情况下会阻塞页面加载，再刷新一次就会ok。接下来直接上图：   可以发现，我在第一次加载页面的时候，卡住了，下面都是白屏了，接下来看一下charles捕获的请求：   wtf?????请求到favicon就停止了，然后......就没有然后了！这个返回看似是200，是因为我在服务端设置的，而body的返回其实是错误的 ### why 在网上找了半天，也没找到很好的解释，百度[有一篇文章](http://fex.baidu.com/blog/2015/01/chrome-stalled-problem-resolving-process/)写的比较详细在这里分享一下，主要得出的结论就是服务器建立连接时被Shut down了,而结果就是:浏览器与服务器的连接不正常断开。注意一点，这里没有说是哪里的问题，也就是说，暂时没有十分明确的说法，到底是传输过程中哪里出现了问题。而为什么再次刷新就好了，在查看请求的时候发现再次无缓存刷新的情况下，不会发起favicon的请求，至于为什么，我也没有去深究。 ### 解决办法 正确返回favicon或者对favicon做404处理，都可以让页面正常显示，在对favicon处理返回的时候，需要注意一点就是content-type一定记得单独处理一下，或者直接用现成的包来做处理就好了，npm上很多，就不一一列举了。
### 1.入门资料 [一步一步实现一个react spa教程](http://react-china.org/t/react-spa/11730),最近一直在手敲这个，感觉比较基础适合入门的同学学习，而且讲的非常详细，git上也进行了分步骤的tag，在设置代理的时候建议大家学一下http-proxy包，他这里没有详细讲，还有react的基础库，引用的时候也需要到相应的node_modules中查一下。 ### 2.进阶资料 [react+redux完整项目](http://react-china.org/t/react-redux/9072/7)，这个是入门之后学习的资料，当然，其中有一些小的瑕疵，不过并不影响大体思路，感觉看看还是受益匪浅的。 ### 3.redux学习资料 [看漫画学redux](http://www.360doc.com/content/16/1212/21/35331283_614167812.shtml)，这个讲的比较直观，而且通俗易懂，也是同事推荐的。 [redux入门教程](https://github.com/react-guide/redux-tutorial-cn)，入门级别的redux教程。mark一下。 ### 4.react跨级传递 [React中的Context](http://blog.csdn.net/liwusen/article/details/53408906) ### 5.react组件的生命周期 + componentWillMount() 这个状态在组件render的时候执行且仅执行一次。 + componentDidMount() 这个状态在组件(包括子组件)render之后立即执行，访问DOM的话用this.getDOMNode()，这个状态也是仅执行一次，一般在这里写入初始时候的异步操作 + componentWillReceiveProps() 这个状态是在组件收到新的props时，render之前调用的，如果在这里面进行setState不会额外多一次渲染，这个函数会接受一个newProps参数，用于和旧的this.props做对比,请注意：不要直接修改this.props，props永远都是从上层传递下来的，如果直接修改在props的话是不会触发整体生命周期的 + shouldComponentUpdate() 这个状态是决定组件是否重新执行render的开关，如果返回false则不会触发钩子重新render，如果返回true则会触发钩子执行render，可以应用于对比新旧props和states，如果此次props和states值没变，则return false阻止render +...
- node version: 6.7.0 - platform: macOS 10.12 - errors: 老的项目，在使用fis开发的时候，使用build.sh -s的时候，偶尔会提示如下错误： ```shell [ERROR] unable to load plugin [fis-optimizer-php-template-compress] ``` 此时需要全局安装相应的包才能解决（旧的工程目录下没有package.json, package.json 存放于_build文件夹中）。 - fixed: 对`fis.require`添加判断，如果当前文件目录不存在node_modules，会扫描当前文件夹的目录，免去全局安装，只需在项目中具有package.json的目录下npm i [package]即可。require默认不会去_build文件夹下面搜索node_modules,通过klaw实现工程目录下的全局搜索。