Eric's Blog

Lifetime of JavaScript Native Object

Sun, 16 Oct 2022 22:49:19 +0800

There are times we want to expose native APIs to JavaScript world to enrich its capabilities, which can usually be done by calling JS VM’s API, like V8 embedder API (Node-API) or JavaScriptCore API. It’s usually an easy task when the exposed API is clean and simple, but things can get complicated when you have complex references between JavaScript and C++. In this article, I will share some techniques to help you manage JavaScript Native Object’s lifetime.

Facebook 前端面试小记

Tue, 21 Mar 2017 00:00:08 +0800

在美国实习期间我同时也在寻找留美正式工作的机会。于是我把简历给了在脸书工作的 Cat Chen 大牛，之后他表示愿意帮助我。虽然今后应该不会入职脸书，但在此我真诚地感谢他的相助。

由于面试签署了保密协议，文章不会透露具体的面试内容，因此我只简述大致的流程并谈谈自己的一些看法和建议。本篇是关于 Facebook Front End Engineering Intern 的文章，因为签证的一些问题，我不得不转成实习岗位。

其实早在前年寻找赴美实习的机会时，我就投递过脸书的实习岗位，但当时的背景无法满足要求，最后也就不了了之。好在这次有了 Cat Chen 的帮助，加上自己也丰富了一些经历，于是很快就接到了 Recruiter 的橄榄枝。（美国IT企业的招聘过程大多是由 Recruiter 全程协助的。）

前提

在我看来，国外企业的面试机会也不是很难拿，但前提是：

英语水平过关，会基本的英文书信，以及一定的口语交流能力。
最好有人内推，这样增加你简历被查看的几率；不过Facebook即便是内推，也不保证一定有面试机会，因为有专门的 Recruiter 会进行第一轮的简历筛选，据我所知这一轮通过率也不是很高；
因此，需要你有较好的背景，比如名校，突出的实习经历或其他背景；
基础技术水平过硬，比如刷好Leetcode，并掌握你相应面试岗位的相关技术。

对于我个人而言，由于我大学是在国际班，也在美国待了半年，因此基本的交流还可以保障。个人简历和技术也比较有信心，加上在美国实习的经历，还有 Cat Chen 这样的牛推，也就顺理成章地拿到了面试机会。

在准备面试的过程中，我把 Leetcode 刷了大概两百题，付费顺带把相关的 Tag 也给完成了。其实最后我也没被问到 Leetcode 上面的题，但历时两三个月的刷题经历，让我在编码能力上有了不小的提高。

Phone Screen

在邮件中一切谈妥之后，Recruiter 安排了第一轮面试，即 Phone Screen。面试的时长大致为20-30分钟，由 Recruiter 询问一些基本情况，例如：个人经历、技术情况等。最后 Recruiter 会提出5题左右的与岗位相关的技术问题。由于我申请岗位是 Front End Engineer，显然这些问题都是前端相关的。通过这样的提问，Recruiter 可以筛选掉一些明显不合格的候选人，从而节约技术面试官的时间。

面试过后，Recruiter 会很快告知你结果，如果通过，将安排下一轮的技术面试。

一面

面试官首先会介绍该轮面试的安排，基本流程是：自我介绍、Coding、询问问题，其中 Coding 占面试85%左右的时间。

之后，他介绍了自己是负责内部平台的开发工作，并负责维护 Draft.js 项目。

然后面试官会让你进行自我介绍并谈谈实习项目以及提出一些其他的问题。这一部分我觉得需要提前进行准备，比如通常的问题可能是：

Why Facebook?
Why Front End Engineer?
Describe a difficult challenge you faced.
What do you do during your internship?
and so on…

紧接着面试官会让你切换到 Coderpad 在线编辑器，然后抛出一至两道的技术问题，它可能是关于前端方面的编程问题，也可能是关于数据结构及算法这样的基础问题。脸书的出题套路大多还是从题库中抽取的，因此你可以在面试前做好充分的准备。

2016 ~ 2017 年美国实习总结

Mon, 20 Mar 2017 14:47:08 +0800

刚刚结束实习回国，这两天终于把时差给倒过来了，抓紧趁热把总结写一下。

我是去年九月份去的美国，在此之前大半年都忙碌于各种简历投递、面试及签证的事情上。在一切安排妥当之后，终于在去年9月初带着对未知的恐惧和向往的心情搭上了赴美的航班。

我实习公司是一家叫 BitTitan 的西雅图创业公司。其实叫创业公司也不太准确，因为公司已经创办了将近十年，公司的业务是面向企业的软件，成立之初的主要业务是帮助微软 Office 365 进行数据迁移，公司每年都保持着一定的营收增长，处于稳步发展的阶段。公司不大，在职员工大概有 200-250 人左右，研发团队算上新加坡Office 大概有 50-60 人，而我所在的团队属于 Development Team 里的 Front End Team，因而我的 Title 是 Software Design Engineer Intern 但做的事情仍大多是前端相关的，偶尔会写一些C#代码（没错，公司是清一色的微软技术栈，创始人、CTO以及很多同事都是前微软员工）。

我的实习是六个月整，为什么是这个时间其实背后也有原因（签证豁免），暂时按下不表，之后如果有时间我会再写写关于如何寻找北美实习机会及签证等等相关经验。我的实习大致可以分为以下几个阶段：

入职的第一个月熟悉内部工具及 Code Base，因此我的工作大都是修复一些 Bug 或开发小的需求。
第2、3个月我独立开发了一款代码生成器： Ember Model Generator。
第4个月开发 ESLint 插件，检查各种内部特定的规则，保障代码质量。
第5、6个月参与公司业务开发。

在入职之初，我被安排了一个实习经理，在这之后每两周需要跟这位经理一起碰面聊聊实习情况，同时团队也给我安排了一位 Mentor，负责帮助我解决技术方面的问题。此外，我还需要每周跟我们组的老大，即 Lead，进行 1 on 1 的 meet up，我的实习任务也是由这位 Lead 安排的。稍大一些的项目也都会根据实习生的个人特点及意愿进行安排，从这些方面，确实感受到企业对实习生的重视。

自动化

值得一提的是，公司对自动化程度及代码质量的要求很高，比如后端的 REST API 层均是通过代码生成器生成的，而各种本机的配置、数据库、服务器、代码编译等过程都只需要一行命令即可完成。前端项目有完善的 Unit Test、Integration Test 及 Acceptance Test，在 Merge 代码之后，部署机器会运行所有测试及 Linting Rules。在这样严格的测试下，公司的产品在长期迭代过程中有了较好的保障且运行良好。

有趣的是，我也亲自参与了公司自动化流程的开发工作，也就是前文提到的 Ember Model Generator。公司前端使用的是 Ember 框架，而 Ember 有一个 Model 层，这一层在以往需要开发人员根据 Swagger 文档或后端 Entity 进行手动编写，然而这一部分的工作大都是机械化的，因此我们考虑使用代码生成器进行 Model 代码的生成。这个项目的难度适中，因此最终由我一个人来负责开发。我用了整整两个月的时间完成了一个能真正运行的生成器并使用正式的项目进行了完善的测试。这个生成器不仅负责代码的生成工作，它还可以对已有项目进行无缝升级。最后，我又花了一个礼拜附带开发了模型层关系图的可视化工具来帮助开发者理解 Model 之间的联系。整个项目的难点主要在于需要对已有的 Ember Models 进行研究，抽象出公共可用的生成模式，分析模型之间的关系，判断 Field 的类型，并需要对生成器本身进行良好的设计及测试。最终，这个生成器生成的代码与以往纯手工编写的模型匹配程度大致在93%左右，配合 Migration 升级工具，模型能达到百分之百的准确率。

JSConf 2016参会所见所想

Tue, 06 Sep 2016 00:00:08 +0800

这是我第一次参加业内的开发者大会，决定利用一点时间回顾并整理参会的一些想法。在网上跟了3年的JSConf视频，我觉得把它称为中国质量最高的JavaScript会议也名副其实。

本人只讨论个人的一些看法，如果想详细了解大会内容，可以关注官网的视频和Slides，知乎上也有讨论。

参加宁JS（JSConf CN 2016）是个什么样的体验？

实不相瞒，早在去年我就有参会的打算，奈何在深圳举办，天南地北实属无奈。所以这次我果断决定参加，早早地买好机票，订好酒店了。

暑假实训加之签证的事情着实把我折腾得筋疲力竭，于是我更加期盼这次的活动，让我放松一把。终于，我等来了九月。

本次大会在南京绿地洲际酒店举行，不得不称赞大会的格调之高。

走进大门就看到了JSConf签到的地方。领取资料过后，在志愿者的指引下乘坐扶梯到了七楼的会议大厅。

此时各大展区早已熙熙攘攘，有在扫描二维码领取奖品的，也有在跟工作人员交谈的。

由于我对这些展台毫无兴趣，就直奔会场找个位置坐了下来。由于去的不算早，只能坐的比较靠后了。

好在也才刚要开始 Intro Session，我跟邻座聊了起来。整体上参会的人年龄都不大，让我又有一种置身大学的错觉，实则大部分的人都是已经工作了的，我邻座的朋友也不例外，他在上海的一家创业公司工作，前端开发。可惜的是程序员大都不善言辞，我也没有找到更多的谈资。

很快，大会就拉开了序幕。

首先是Vue.js的作者带来的 The past and the future of Vue.js。虽然现场Vue.js的粉丝不要太多，老实说，我对此并无太大兴趣。整场下来，好似一场粉丝见面会，没有太多的干货。我个人对现代框架的喜好程度：React > Angular > Vue.js >= Ember.js > … 所以这只是我个人的体会。不过话说回来，Vue.js 2.0看上去很不错，虽然Vue的概念很多是借鉴来的，不过它也有所创新。Vue.js的活跃程度在国外也是可圈可点的，这已经是很大的成就了！

第二位演讲者是来自 Facebook 的工程师 James，他是 Babel 的核心贡献者，现在是 Flow 项目组的成员。他带来的演讲是 How to build a compiler? 说实话，当初看到这个演讲题目的时候，我是非常有兴趣的。他在现场讲解了一些编译器的基础知识，并使用他的一个开源项目 the-super-tiny-compiler 作为讲解。不过由于我先前已经认真阅读过这个项目的代码，因此这个演讲收获也不大。不过从他的 Slides 就能看出来，作者还是非常用心的，所有的图片都是他亲手画出来的，非常别具一格！编译器这个话题太大，也不是现场三五十分钟能够说清楚的，虽然这不是一门“必修课”，多了解一些知识还是会对日常的开发有很大帮助的。

《企业级框架EGG》，演讲者声音太小，听着很吃力，从Slides上也没看到太多自己有兴趣的内容，于是就跟邻座聊天去了。

接着是严清老师的《聊聊JS测试框架》，一上来就讲了JS测试的两个流派：Tape 流和 Mocha 流用法上的一些区别。我和严老师一样都是 Mocha 流。

然后严老师讲解了 Mocha 流测试框架的原理，主要是通过解析代码构造Context状态机的方式来确定测试的运行流程。总体上讲解很不错，由此我也对测试框架的原理有了一些理解！

现场还开源了一个GridControl项目，是PM2的作者开发的一个分布式控制的工具。还有3D和VR方面的演讲，视觉类的Talk往往很容易博人眼球，这方面的开发需要有图形学方面专门的积累，门槛不低。

中途午饭路上看到了图灵的展台，还看到了我前几个月翻译的《React Native开发指南》。

Android 屏幕直播方案

Fri, 17 Jun 2016 14:47:08 +0800

项目需求是实时同步Android手机屏幕画面至浏览器。这里有两个挑战，一是Android如何在应用内获得屏幕实时视频流，另一个是如何在浏览器上做视频直播。经过一番折腾，确定了如下的实现方案。期间，我们也实现了手机摄像头的直播。

演示效果：

Android获取实时屏幕画面

原理与基础设置

Android 5.0版本之后，支持使用MediaProjection的方式获取屏幕视频流。具体的使用方法和原理如下图所示：

参考**ScreenRecorder项目3**的实现，我们了解到VirtualDisplay可以获取当前屏幕的视频流，创建VirtualDisplay 只需通过MediaProjectionManager获取MediaProjection，然后通过MediaProjection创建VirtualDisplay即可。

那么视频数据的流向是怎样的呢？

首先，Display 会将画面投影到 VirtualDisplay中；
接着，VirtualDisplay 会将图像渲染到 Surface中，而这个Surface是由MediaCodec所创建的；
最后，用户可以通过MediaCodec获取特定编码的视频流数据。

经过我们的尝试发现，在这个场景下，MediaCodec只允许使用video/avc编码类型，也就是RAW H.264的视频编码，使用其他的编码会出现应用Crash的现象（不知是否与硬件有关？）。由于这个视频编码，后面我们与它“搏斗”了好一段时间。

以下是关键部分的代码（来自ScreenRecorder项目3）：

codec = MediaCodec.createEncoderByType(MIME_TYPE);
mSurface = codec.createInputSurface();
mVirtualDisplay = mMediaProjection.createVirtualDisplay(
		name,
		mWidth,
		mHeight,
		mDpi,
		DisplayManager.VIRTUAL_DISPLAY_FLAG_PUBLIC,
		mSurface,    // 图像会渲染到Surface中
		null,
		null);

在编码之前，我们还需要设置视频编码的一些格式信息，这里我们通过MediaFormat进行编码格式设置，代码如下（来自ScreenRecorder项目3）。

private static final String MIME_TYPE = "video/avc"; // H.264编码
private static final int FRAME_RATE = 30;            // 30 FPS
private static final int IFRAME_INTERVAL = 10;       // I-frames间隔时间
private static final int TIMEOUT_US = 10000;

private void prepareEncoder() throws IOException {
    MediaFormat format = MediaFormat.createVideoFormat(MIME_TYPE, mWidth, mHeight);
    format.setInteger(MediaFormat.KEY_COLOR_FORMAT,
            MediaCodecInfo.CodecCapabilities.COLOR_FormatSurface);
    format.setInteger(MediaFormat.KEY_BIT_RATE, mBitRate);
    format.setInteger(MediaFormat.KEY_FRAME_RATE, FRAME_RATE);
    format.setInteger(MediaFormat.KEY_I_FRAME_INTERVAL, IFRAME_INTERVAL);

    codec = MediaCodec.createEncoderByType(MIME_TYPE);
    codec.configure(format, null, null, MediaCodec.CONFIGURE_FLAG_ENCODE);
    codec.start();
}

数据获取

2015 年度小结

Thu, 31 Dec 2015 14:47:08 +0800

今天是2015年最后一天了，今年也经历了不少的事情，写点文字做个收尾吧。

流水账

2月，年初给常胤师兄投了一份简历，然后开始准备前端的面试。
3月，经过几轮面试，拿到了人生中第一份Offer，当时怎么也没想到自己这么快就能去理想中的公司实习。
4月，在github整理了一份React Native学习材料，目前快突破3000star大关。由于最近关注React不太多，2016年尽量把更好的资料整理出来。
5月，收到一些工作或合作的邀请。
6月，图灵图书工作人员找到我，希望能参与React Native书籍编写工作。由于本身缺少实战经验，加上还是个学生，暂时无法胜任，最后商量进行Learng React Native这本书的翻译工作。
7月，入职阿里，赶上了RDC团队的outing，在莫干山度了三天假，还被“强制”跳了无节操的草裙舞，不过玩的很开心。
8月，实习，工作，学习，认识了一些朋友。我们在杭州的软件设计竞赛拿了全国一等奖。
10月，返校读书。负责东北大学官方网站的开发工作。看似非常简单的几个网页，实际开发起来费不少力气。如果做每一件事情，都可以有新的收获，那么它就是值得的。
11月，进行社团技术培训。参加了HackShanghai黑客马拉松，连续编程24小时，最后我们团队三个人都跪了，最后拿了一个Top9。还参加饿了么黑客马拉松比赛，有些累，不过很有收获，虽然没有进总决赛，不过值得了！
12月，由于李老师离职，书籍翻译的事儿泡汤。于是商量如果有时间的话，来年翻译另一本。然后就是做了一个新简历，不断的海投，已经收到一些公司的拒信了，还做了其中一家公司的OA，最后也是跪。不过这只是一个开始，我相信自己可以的。

技术成长

可以说2015年是我技术最长进的一年了。
前端技术更扎实了。不多说了，做好喜爱的事。
服务端开发，尤其是各种并发模型方面，也有更深刻的理解了。
简单学习了一下 Android & iOS，感觉跟前端有很多共同点。
重拾 Java 和 Go，静态类型语言也很有趣。
开始尝试造轮子，醍醐灌顶。
Github经营得不错。

个人成长

步入职场，体会了很多为人处事方面的道理。
上台更放松，能较好地给别人做分享。
渐渐地克服浮躁的心理，认识了非常多优秀的人，自知差距，仍需戒骄戒躁，不断努力，踏实做事。

展望2016

2016年，我希望能找到一个理想的公司实习。希望自己能更努力地打好基础，继续提高技术水平，抓住机会，取得进步。2016，要为自己将来的发展做一个决定了，这将又会是一个分岔路口，我应该慎重地做决定。

Anyway, good luck, 2016!

Some thoughts on eleme hackathon

Sat, 12 Dec 2015 00:00:08 +0800

What’s it?

Well, this is my first time to write articles in English. Recently, I attend an activity named Ele.me Hackathon(www.ele.me is a company provides campus food take-out service.) with my senior fellow student, he is very well-qualified with techniques who is learning Data Mining as a graduate in NEU. We’re both instered in this kind of contest and then we decide to participate in.

How it plays?

First of all, we read the specification of the activity on their gitlab. What we should do is to develop an high-performance server program according to their requirement by using languages Python, Java or Golang and they provide a small cluster consists of 3 servers and 1 mysql machine and 1 redis machine. The requirement is to implement services such as sign in, sign up, view food, add to cart, place order, view orders, they provides Vagrant virtual machine with Redis, Mysql, Runtime and Data installed in it. Obviously, they also provides us with unit tests and benchmark. All we should do is to improve the benchmark score as high as possible in condition of passing all unit tests.

东大官网开发记录

Wed, 04 Nov 2015 00:00:08 +0800

参与东北大学官网的开发工作，记录一下工作完成之后的一些收获。

采用HTML5 + CSS3技术

在项目初期，我们考虑到应该提升用户的浏览体验，团队经过调研、分析和讨论后决定采用一种名为“优雅降级”开发方式，即以现代浏览器为开发基准，后期再通过编写shim的方式对低版本浏览器进行兼容。这种做法一来为用户提供了更加良好的视觉和交互体验，二来也保证了广大用户即便使用低版本的浏览器，也能畅通无阻。

采用sea.js模块加载器方案

新版的网站采用了模块加载器的方式实现了JavaScript代码的模块化和规范化，弥补了前端代码全局污染的缺陷。该方案同时也为团队开发带来了便捷，提高了底层代码的复用性和业务逻辑的抽象能力。

屏幕适配良好

对于屏幕的适配，我们采用css3的media queries功能分别对市面各种常见的屏幕尺寸进行了响应式适配，实现了低分辨率、普通分辨率和高分辨率屏幕的伸缩适应，最大程度满足了用户的浏览体验。对于低版本浏览器，我们同样通过shim的方式对其进行了分辨率适配。

兼容性强

官网作为一个对外的信息平台，我们必须保证网页的兼容性。经过团队不断努力，我们实现了市面近乎所有浏览器的兼容性，包括 Chrome, Firefox, Safari, Opera, IE, 360浏览器, 搜狗浏览器，猎豹浏览器等。

RESTful API架构模式

网站的数据通信采用了近年非常流行的RESTful API架构，代替了旧版的模板与框架结构。这种架构方式降低了系统间的依赖，提高了接口的灵活性和扩展性，同时减少了客户端的请求次数，提高网页加载速度。

全站静态化方案

考虑到网站整体的安全性，我们沿用了旧版静态化的方案。这种做法极大地提高了安全性和服务器响应速度，实现更快的浏览器体验，并且也有利于搜索引擎的收录。

测试覆盖率全

为了保证网站良好的适配和兼容，我们进行了多次全面的测试。内容包括各类浏览器及其主流版本的兼容性测试，各类尺寸的屏幕响应式测试，组件的加载容错性测试以及代码review等。

规范化的开发流程

在开发期间我们进行了结构的设计，前端使用sea.js作为模块加载器，开发过程引入了grunt构建工具，采用sass预处理工具进行css编写，本地使用connect启动开发服务器，grunt-watch进行自动编译，最后使用include-replace工具对代码进行批量打包并同步到远程服务器。整个过程我们统一了开发工具链，降低团队之间协作的成本，提高了开发效率。

采用git协作开发，代码开源

此次项目一个亮点即采用了github开源社区进行代码托管，一方面为了团队协作，另一方面也希望有人能参与我们的开发给我们提供良好的建议。

一句话总结：经过这次项目，学到了不少兼容性的知识，有收获！

实习心得体会

Fri, 09 Oct 2015 00:00:08 +0800

最近从公司离职返校，好多人过来问我实习情况，一些人是因为好奇，另一些人希望我分享经验。这段时间确实有一些收获，由于没有总结只好搪塞。早上正好有空，好好梳理一下并展望和规划一下今后的发展，与君共勉。

写在开头

曾经我也抱着去阿里走一趟，能让自己成为大牛的想法，但实习完之后，老实说这方面的提高没有达到自己的预期。原因可能是公司使用技术会选择一种适合自己业务场景的方案，这种方案并不一定是最新，性能最好的，而是如何能快速开发和迭代，运行是否稳定，如何能适合更多人参与其中，降低这方面的学习成本。不可否认的是，团队里有很多技术非常牛的人，甚至还有前端界名人，他们都非常的谦虚，会耐心的跟你讨论技术。但是，我发现他们并不以自己技术有多牛为资本，职场讲究的远不止这一点。公司一般分为业务开发和基础架构两种，像国内的绝大多数公司还是以业务开发为重点（至少前端是这样），公司要能看到你的业绩，业务能最容易也最直观地体现你的业绩。所以有很多人，需要在工作之余额外抽出时间来进行基础架构的建设，实属不易。所以，作为一名程序员，技术是基础保障，但绝不是全部。不断提升技术的同时，我觉得更应该去全面发展自己，这可能会成为不少技术宅的阻碍。

下面讲讲技术之外的一些收获：）

学会总结

在公司，我们每周都需要向团队或者部门每个人发送自己的周报。由于工作的分散性，周报成了领导和其他人了解你工作最直接的方式。如果主管不能更好的了解你的工作，可能会影响到你的业绩考核。再者，让别人更好的了解你，是别人认可你的基础。在公司工作，不再是自己小打小闹，更多时候需要跟很多人一起合作。就前端来说，通常需要跟PM、产品、设计、交互、后端、测试打交道。总结自己不仅可以促进跟伙伴的合作，也能理清自己的思路。有时候，一个人手上同时并行若干个项目，如果不加以协调安排，往往工作的效率就会很低。另外，我们还可以把平时遇到的技术问题加以总结。

书面化表达

我看过很多招聘，都优先考虑有自己的技术博客的人。这并不是没有道理的，听懂一件事，深入理解一件事，和用文字表述出来是三种不同的境界和能力。

在大公司里，毫不夸张的说，能人异士实在太多。怎么样让你从中脱颖而出则成为成功的关键。作为一个PM，你需要通过文字来汇报项目的进度。作为PD，你需要用文字去感染别人去关注你的产品。作为一个技术人员，你要通过文字来分享一些技术的积累，还要编写技术文档，一个好的文档能让推广你的技术方案事半功倍。一旦你的技术被别人所采用，那么别人认可你是迟早的事情。

谈话技巧

留心观察就会发现，公司里的很多人都很有口才。也许是这样一个工作氛围锻炼出来的。这个情况主要表现在，第一，能够清晰的表述自己的观点。第二，能够说服别人接受你的观点。第三，能够较好的组织语言，安排好表述的次序，先说什么再说什么最后说什么，让别人很容易的理解你表述的内容。这些技巧也不是一蹴而就的，需要在平时说话过程中多加思考，谨言慎行。谈话技巧这个话题太大，三言两语很难说全面。不过很重要的一点是，说话需要分场合，如果是正式的场合，尽量要使用陈述的语气去表明一个事实，表达自己的诉求，最好能够加上一些合理的解决方案等等。而不能带着自己的主观想法批判的去说明一件事。

争取多参加一些分享，在台上分享可以更好的展示你的能力和魅力。同时，做一次分享你的收获远比观众来的更多。

当然，在平时工作中也不需要过分的严肃，在基本礼仪的基础之上，如果能有一些诙谐那就更哗众取宠了。不过这大都跟性格有一定关系，倒不必强求。

学会主动

每个人都想加薪升职，但需求有限，并不是所有人都可以如愿以偿。如果无法学会怎样去主导一个项目，那可能需要做很长时间的螺丝钉。在公司，从表面上看可能大家都差不多，但如果看级别，每个人都参差不齐。那么如何学会主导？我觉得需要在平时工作中多加思考，积极的提出自己的想法，给团队提供合理的建议。不要只会听，只会做，更要有主见。哪怕是领导的想法，也可能存在一些纰漏，我们可以进行更深入的考虑，并及时的提出自己的看法。

作为一个有主导能力的人，往往还需要一定的管理能力，需要能够合理的安排任务，协调工作进度，解决问题并进行决策。

久而久之，你就会形成爱思考的习惯，能常常积极主动的在团队发言。用不了多久，别人就会对你刮目相看，觉得你是个靠谱的人，可以胜任一些重要的工作。这样一来，升职加薪就可以提上议程了。

最后说两句

不论在学校还是职场，都需要不断地去学习，留心观察，取长补短。所以在今后的日子，我也需要不断的去丰富和提高自己。技术依然不会放松，因为这是我最热爱做的事情，但绝不能一心只做技术，个人的能力更需要注重。提高你的技术，奉献你的热情，展现你的能力，这也是师兄对我的期待，共勉！

以上。

阿里巴巴前端开发实习总结

Fri, 25 Sep 2015 00:00:08 +0800

短暂的两个月实习转眼间就结束了，回想第一天来报到的场景还历历在目。很庆幸能有这样一次宝贵的机会来到阿里，来到FGT这个大家庭同大家一起学习，我想这注定会是一段珍贵难忘的经历。说到总结，在这两个月里自己对业务的了解、团队合作、项目的流程和沟通方面以及个人技术都有很大的收获。

总结工作

Clink浮屏
- 当初师兄安排这个工作之后，我花两个小时完成了demo。虽然是一个小日常，但是并没有自己想象的那么简单。不仅需要跟后端商量控制浮窗的接口、兼容现有的后台系统，还需要不断的打磨一些细节，然后上日常，上预发，最后才发布。发布之后又需要根据线上实际的表现进行修改。看似一个简单的日常，其实包含了许多流程，也从中学习到规范和严谨的重要性。
在线协作Markdown编辑器
- 这是属于一个创新的小日常，起初没有多想就开始动手做，后面发现实现起来其实有很多细节的问题需要考虑，导致实现的demo体验不太好。后来翻阅一些资料，也参考了别人的一些实现，才把这个功能基本实现了，要真正实现良好的文本实时协作功能难点主要在于如何定制一个编辑器前端，纯文本的实现难度在于同步的差异化算法或Operational Transformation(OT)算法，这也让自己意识到今后应该更加注重基础算法的培养。
阿暖梦想跑道
- 这是我完成的第一个完整的项目，经历了从视觉评审到项目构建、开发、联调、测试等各个阶段。这也是自己觉得实现地还不错的一个作品，能够比较清晰的组织和控制流程，测试过程中也很少有功能性的bug。更重要的是从这个项目中，我学会了应该怎样优雅地定制接口，怎样将flexbox、modulex、xTemplate运用到生产环境中。
梦想团-服务提效：TODOLIST&详情
- 实习一个月之后，就投入精力跟着@石霸师兄一起开发TODOLIST&详情，一开始觉得这对自己是个不小的挑战，而且时间上也比较紧张，还好有师兄不厌其烦的指导和帮助才能顺利地按时完成任务。项目初期，我很快学了一下Angular.js，第一次做比较复杂的前端项目，出于今后的维护和项目的稳定性考虑，需要不断地思考，尝试抽象更灵活的组织方式。在这个项目开发中，我也经常跟开发、交互、测试同学讨论实现方案。这真正让我感受到自己不再仅仅是一个实习生，我也可以很好的融入到项目开发的氛围中去。

写在最后

千言万语唯有感谢，感谢所有师兄师姐在工作和生活上的关心和帮助，感谢@清羽@常胤让我在大二的夏天能有这样一次宝贵的经历，感谢@石霸师兄不仅仅在技术上给予我良好的引导和鼓励，提供建议和方案，不厌其烦地帮助我解决一些困难，更多的是教诲我如何为人处事，独当一面，如何更好的规划自己将来的发展，如何在提高技术的同时也不断提升自己的软实力。我想这将是未来人生一笔宝贵的财富。

总结自己，在平时工作中我也发现自己有很多不足，发现自己和别人的差距，在这样一个优秀的团体，时刻需要不断的学习和总结，同时也希望自己能更有自信一些，能更积极主动地提出自己的见解，开放心态。

短短的60天，还没来得及跟大家更好的了解彼此，就要说再见了，很高兴认识你们这一帮良师益友，期待今后我们有缘再相聚！最后祝各位工作顺利，一切都好，大家中秋节快乐~~

手机跑酷游戏开发小记

Sun, 05 Apr 2015 00:00:08 +0800

为了参加比赛，这个暑假开发了这款跑酷类手机小游戏。虽然辛苦，也学到不少东西，至少作品还算满意吧。

从准备到开发确实花了不少时间，虽说真正开发大概只有十来天的样子，前期也需要熟悉框架，了解开发的流程，团队开发的磨合等等。

这款手游是基于Cocos2d-JS开源引擎，通过SpiderMonkey + js-binding的方式调用底层Cocos2d-x的引擎。

可能有的人会质疑这样操作的效率，后来事实证明，这样的方式效率虽然有待改善，但至少也轻松虐了一番Canvas在手机的表现。

本篇文章不过多的介绍 cocos2d-js引擎的使用，而仅讨论一些心得。

效率的问题一方面可能是引擎引起的，肯定也有开发者的问题。起初开发时没有过多的考虑游戏效率问题，到后来发布APK发现手机表现差强人意才进行了一些优化。优化主要考虑到以下几个方面：

图像资源的预加载
plist文件预加载
减少粒子数目
资源的复用

还有其他的资源需要加载，例如动画资源等，但由于前期的疏忽加之时间紧迫，这次没有进行预加载。

预加载实现

我们可以在游戏开始前的场景或者消耗少的地方进行资源预热，事先载入缓存中。这里只交代cc(cocos2d简称)的加载方式：

cc.spriteFrameCache.addSpriteFrames(res.gold.plist); //plist预加载方式
/*以下加载图片至内存*/
//获取所有图像
String.prototype.endWith=function(s){
    if(s==null||s==""||this.length==0||s.length>this.length)
        return false;
    if(this.substring(this.length-s.length)==s)
        return true;
    else
        return false;
    return true;
}

//变量获得图像,资源文件使用对象字面量嵌套的原因，略显啰嗦
var temp = [];
for (var i in res) {
    if(typeof res[i] == "object"){
        for(var j in res[i]){
            if(res[i] instanceof Array) {
                continue;
            } else {
                if(typeof res[i][j] == "string"){
                    if(!res[i][j].endWith("plist") &&
                       !res[i][j].endWith("mp3")) {
                        temp.push(res[i][j]);
                    }
                }
            }
        }
    } else {
        if(typeof res[i][j] == "string"){
            if(!res[i][j].endWith("plist") 
               && !res[i][j].endWith("mp3")) {
                temp.push(res[i]);
            }
        }
    }
}

//载入内存，这步是关键
for(var i in temp) {
    cc.textureCache.addImage(temp[i]);
}

这里主要使用两个方法,cc.spriteFrameCache.addSpriteFrames(PLIST);和cc.textureCache.addImage(IMAGE)进行载入。