CocoaChina线下沙龙上海站嘉宾分享：独立游戏开发者魏子钧《When iOS loves JS》

【嘉宾简介】

魏子钧（自由职业者，CocoaChina用户名：fins）



演讲主题： When iOS loves JS



主题简介：JSBinding 技术的出现, 架起JavaScript 与原生语言之间的桥梁, 让我们能够充分发挥两者的优点.但是这项技术在过去仍然偏小众, 并没有被非常广泛的应用。不过随着iOS 7的推出, JSBinding终于从某个角落里被请到了台前.本次分享就和大家聊一聊iOS 7原生的JSBinding技术。



个人简介： 魏子钧, 网名大城小胖. 国内知名的前端和Java工程师、著名HTML5专家、独立游戏开发者， 9年IT从业经验。 主要从事以HTML5为代表的Web技术的研究和相关产品的研发。



以下为演讲实录


我名叫魏子钧。我们来聊一聊JS。JS 语言是世界知名语言是很恶心的一名语言，但是也没办法弃这个大腿，所以没办法。很多人可能对JS的一些基本概念有一点模糊。


我在这里重申一遍，首先JS这个语言，早些年的广告很烦人，都是用JS来做的。其实JS本身并不能做这些流氓广告，它之所以可以做是因为它调浏览器的UI。比如说你现在经常打开网页，点击右键，查看源代码会有这样的一些东西，它会弹出一个对话框，下面有什么标题等等。但是这些东西本身来和JS没有关系，JS本身提供的东西是什么？变量操作等等就是一些基本东西，本质上就是一门语言，它加入了浏览器的关联，让它实现调出浏览器的UI。

浏览器这个东西它就是大量的使用JS的方式，把原先的东西和JS进行很好的整合起来。由于JS的这种特性，JS引擎放在浏览器里面，既然可以这么做，自然而然就可以不把橘***，绿色的东西抠出来让它做一些其它的事情。这其它事情是什么？在几年前大家听说过，一个很牛的人把尝试把JS放在Server，去做一些服务器端做的事情。还是那个绿色的和橘***的不变，把它拿出来黄到了Server，现在调一些文件的API，然后让它去调另外的API。所以JS在服务器端得到的一些发展。



前面说了JS这个框架它这几年发展非常好，但是它发展好很大一部分原因并不是因为它有多牛逼。它为什么发展好呢？主要是因为社区强大，它之所以发展好主要是因为社区强大，因为原来写JS的这些人就是喜欢重复遭轮子，所以JS推出以后，成千上万的增长的，它们两年时间做完了过去两年做的事情，所以在这个社区的繁荣下，JS得到了很大的发展。

整个浏览器都用到这个东西,有一个什么好处呢？非常大的好处？它通常做的网络爬虫，总之你可以用语言代码控制浏览器，可以去模拟登陆，然后读取里面的一些东西，非常非常强大。

这个代码是非常强大的代码，这个代码就截图，写完以后打开一个网站，下面配置生成了这个网站，生成了这个图片，渲染等等很多功能都可以做出来。还有一个地方，现在也有一些人尝试使用JS嵌入式设备。JS这门语言它随着浏览器的发展得到了很大的重视。

说了这么多，给大家演示一个简单的例子，这个例子是我之前做的，它这个就是JS的代码，它利用JS来抓取新闻的一个代码，它本质上都是JS用到的一些东西。而在下面这一段这里面的东西，如果了解网页开发的都明白，其实这些都是网页里面的JS代码。它实际上这个地方这么解释，我们说我加载这个网页，打开这个网页之后，我在这个网页的运行的环境里面做一些事情。

具体事情不讲了，给大家做一个演示，就像你在浏览器中去打开那个网站，这部分操作它应该做完了。我抓的是移动版的网页，所以说是手机的样子。这个是今天的新闻，同时我也把其它的一些新闻都抓出来，具体就不看了。JS它用的东西蛮多的，尤其现在很多网站蛮智能的，就是说可以防止你去偷一些东西，但是在JS面前这些东西都不使。因为它就是个浏览器。

在网络里爬，在Server里面跑，典型的Hybrid这个技术，Hybrid它最有名的就是一个插件，它本身的原理无非就是一个里面装一个网页，把自己伪装成一个原生英文一样的东西，典型的一个例子。网页版的话左边全是浏览器的样子。它中间核心的部分里面装的是它的网页，好处很明了，它开发一个两种方式都可以用。而且Facebook自己也抛弃了这种方式，不过现在这两年这个问题不大了，性能完全是没有问题的。这种价值和意义就不多说了。

强调一下，Hybrid这个技术本身它不仅仅是开发者自己想的一种方法，也得到了很多官网的认可，比如说Window 8，大家看到红色的部分，它其实在Window 平台是被认为是一类技术，就是同一个档次，很支持它。苹果也蛮支持。总之，苹果对Hybrid技术是很开放的。

JSBindind，大家对这个JSBindind应该不陌生，大家或多或少会用到。我今天讲这个JSBindind，就是iOS平台它也支持JSBindind，而不需要做第三方的框架。

JSBindind到底是什么？就是把JS和原生代码做了一个绑定，JSBindind无非就是假定几个JS码和原生之间的桥梁，大家可以看到它的一个架构，因为它写一个JS代码，要出现一个引擎来运行这个代码，通过这个引擎跟这个代码之间互相通信。它的效果就是我写了一个JS代码，它本质写的时候是借用原来的脚本写的。在游戏里面非常简单的例子，它游戏里面渲染这个部分。其实Cocos 2d也是这样一个目的。

JSBindind和前面讲的Hybrid的区别是，Hybrid是完整的一个Web的环节，JSBindind直接架起的JS和代码之间的一个桥梁。这两者区间的区别也非常明显，当我们不需要浏览器的特性，比如说我为什么是JSBindind，因为我以会写JS，我OCE只是一个入门的水平，其它都不会，就是JS用了快将近十年了，对JS最熟，我所有东西都是JS来写，所以我自然而然喜欢JS，我在iOS 中用JSBindind技术来跑。

说一下iOS 7，苹果非常高调开放了它们，脑子里产生的结果它直接写入JSBindind。它竟然开放了iOS版本，因为它那个苹果JS本身开元的协议比较多，就不能让我们很方便的使用，所以暂时都没有办法用。

最简单的代码，我知道在这里面讲代码非常枯燥，但是我还是得讲一下能够说明问题。其实JSBindindJS代码和原生代码就是一个通信，通信就是互相调用，第一个最简单的我在原生的代码里面执行一个JS代码，执行的方法很简单，就是在这样的情况下，后面执行1+2，它这里面写的其实是JS代码。运行的之后的结果…在原生里面需要建函数，假设在JS里面定义好了一个函数，调用的方法无非是这样。调用这两个函数，得到的结果取和。非常非常简单。在原生代码里面在JS上下文当中创建一个变量，整个过程就非常简单，有两种方式来实现这个事情。

JS这边和OC这边，它先是一个内行转化，有一个官方的表，对这样一个表很容易理解这种转化的方式。在JS里面想调用一个原生的OC的代码怎么做？其实也非常简单，在这里写一个函数，然后在JS里面就OK。所有的代码就是一个通过一个值改变的JS的环境，制止通过这个JS非常容易沟通。

现实生活中这种技术的应用蛮广的，这些就不讲了。这两个问题是蛮惊讶的，我的观点是JS好，随着浏览器的发展，应用场景就是比较多。从这个角度考虑，JS未来的发展前景还是非常广阔的。如何选择，大家自己都知道我就不讲了。

JS还可以做什么呢？还可以作为一个日常的开发的工具来提升我们的开发效率，大大的让我们偷懒。JS可以在PS里面使用，让我们更好的自动化的生产。结合Node这种工具，右边这个工具它本身和Node没什么关系啊，它本身是一个非常强大的图形，它PS做的事情都能做。我个人的倾向，我个人在工作，学习生活中都尝试用JS做了很多事情，我这里也只是节大家起到一个抛砖引玉的作用，希望大家能够在这个方面思考一些问题。就是说如何最大化你所擅长的东西，让它在工具里面发挥作用。

在PS里面做什么，其实PS大家都清楚，它提供了很多功能，这个对应的都是脚本。如果大家对这个PS的结构比较了解的话，别看它扩展元是JSX，它是扩展文件，下面这些都是JS写的。既然官网能够提供很多东西，我自己肯定可以按照自己的东西来扩展。我现在做的事情有一个不切实际的需求，我想把每个涂层以自己为中心旋转45度，就是自己为中心，而不是整体发布为中心。就是我要旋转45度很简单，可以全选，可以自由变换它旋转45度。但是这种它本身以这个涂层进行旋转的，我可以手工做的方法就是选一个图层旋转一个，选一次转一个，大不了录一个像。但是不管怎么说这个图层非常混蛋。而如果写一个代码的话，上面这个就是JS，但是核心代码就是这个。我把每个图层旋转45度。总之这个效果以我刚才画布为中心的旋转效果是不一样的。



我在实际的开发当中，其实我用到的所有的图层，因为我们之前美术它在起那个图层名的时候非常随意，大小写混着来，所以我写的脚本就重命名，还写了一个导出的JS的版本。这个图层做这样一个事情，PS在保存这部分实现的不是很科学。但是不管怎么说，这边看到导出的没有图层，而且保存它在原始的图层，这个非常重要。PS讲的功能不是很多，但是这些功能和前面所有的东西类似，JS语言还是JS语言。它这么强大，就是因为JS可以调PS提供的一些UI，比如说你当前的打开的文档，它下面所有的文档这个API提供的，和JS没什么关系，JS只是调用一下而已。总之我们利用这样一些版本，确实可以把之前枯燥的工作批量化的，自动化非常简单。我为什么是自由开发者，因为这些东西是很普遍的。大家如果是小团队的话，小团队效率率很重要的，你们回去讨论一下怎么样把这个流程优化。

因为2D可以直接导出这个数据的关系，这个都是可能的。我这边导出了一个文件，对于我来讲的话，我要求比较高。如果画大头，我要给它缩小怎么办？说到我刚才说另外一个工具，把我刚才生存到处的这些文件拷贝多了一个工作目录下。我又写了另外一个工具，这个工具本质上和JS没什么关系，这个东西用什么脚本其实都能做，其实我在这边由于用到了大量JS什么很多很多东西，所以我整体一体化这到工具，所有的东西用的都是JS，我这边做的这些事情写了一个脚本，它把所有图片缩小大50%，然后把大它们砍掉作为空白的东西，然后生成的文件，会在这个文件夹里面生成的还是那些图片。我有一套已经缩小的。我同事还生成了一套虚拟的，可以把空白的砍掉，同时把它生成了打包到一个定义的文件。我利用这个NODEJS把所有的都进行一个批量化的生产。而且它有一个好处，它里面内置的缩放效果非常多，它比内置的缩放的效果都要好。尽量不要过滤过渡，进来的不要产生模糊。总之，有时候我们利用这种工具可以产生更强大的功能。

我这个PPT所要讲的核心的东西基本上完了，我刚才讲的东西就是我现在用到的，我做独立开发游戏，这样的话可以在浏览器里面进行一个的简单的运行调试。而且大家知道浏览器不需要改域名吧。我直接调到第5关到第3关进行开发等等。总之我个人在喜欢在Web开发游戏，非常非常快也非常便捷。我在运行iOS 5的时候，我在那个地方用到了JSBindind，我在处理图片的时候跟我们美术远程合作，它在杭州把美术画完了传给我，后期那些乱七八糟的东西不愿意打扰它，我就用刚才说的PS的方法来非常快捷的处理好。

我刚才讲的主题是JS，用JS用来抓其它网页的东西，就是我用来做一些不太道德的事情。总之这一套东西，我现在是被JS绑架的一个人，不管干什么活都是用JS。所以今天的主题是JS无处不在，就是跟大家分享一下JS广阔的运用环节。




【提问】：你是我见过第二个整个开发都用JS的人，第一个我问它的开发工具是什么？整个平时的开发过程里面真正的什么都不用？

【魏子钧】：不用的，也没什么好用的。因为它JS它API 比较少，我用的API是跟浏览器相关的。而我这个开发用到的API真的很少。

【提问1】：但是如果它的JS绑定它下面就很多了，如果你要进去记这些东西不是挺麻烦的吗？

【魏子钧】：所以我没用啊。

【提问】：如果我们开发用纯JS做的话，如果下面做一个通信的，这种扩展我在JS里面能做自动绑定吗？

【魏子钧】：自动绑定是什么意思？前提你是想在OC里面就非常简单，自己写的东西打到那个OC的代码里面，有一个JS引擎的库。如果你要是在Server，你可以JS库扩展，总之你中间还是有那么一层解决方案来帮你做这个事情。而不是说JS直接调用，那肯定是不行的。

【提问】：JS里面处理做一些线程怎么办？

【魏子钧】：你说的异步的东西来做一些事情，JS本身是它多线程的。比如你刚才JS刚出来的时候，它主打的亮点就是一个单线程，它带来的就是强大的抗压性，JS单县城会给我们带来很大方便。我是觉得JS单线程是一个优点。你那个多线程的场景，你是要多线程可以多个虚拟器，刚才那个JSBindind沃恩没有细讲，JSBindind它可以取多个虚拟机，这样是可以的。但是这样同步你要自己来实现，因为JS本身它没有这个东西，你要同步锁，性能也降下来的，风险也高了，得不偿失了。

【提问】：你还有什么秘密武器吗？

【魏子钧】：以后再分享给大家。

【提问2】：因为我想同步做的话，JS还有什么方法？

【魏子钧】：前提是对话那个域在服务端加一个域，服务器允许你访问这个域，完全可以在上面加一个跨域访问的。服务器端还是要发这样的请求，其实对于你客户端来讲无所谓。