摘要：
这段时间在学习PHP的一些知识，做为一个前端开发者，看到PHP中有大量的涉及前端HTML页面甚至JS的内容，感到不可思议。其实完全可以把这些工作交由前端JS来完成，server端一行HTML代码都没有是最美的。而前后端的交互，统一由REST API完成。在进入到新公司后，正赶上公司从传统的server行为全面向REST API转型，这不仅引起了我的注意，也有了很多思考。基于REST API的方式，第一个显而易见的好处是适配移动端，方便实现HTML5版本的前端页面。而新的版本可以和旧有的web版共享server API。其次，从分工的角度讲，前端的事情完全交由前端完成，是比较科学的，否则需求变更 阅读全文
摘要：
战棋类游戏一直是我的最爱。97年的时候在表哥家围观他玩《炎龙骑士团》，那种因缘就已经种下。大学期间和几个室友一起玩曹操传，自己一门心思玩三国志9，收获到的不仅仅是征服的快感，还有游戏曲折的情节，当吕布和貂蝉诀别的时候，我甚至心里泛起了一丝酸楚。过去的一个月里，因为偶然的机会玩起了《世界征服者2》，一下子就沉迷其中。渐渐地，其中一些微观的技巧也被我探索出来，感觉非常满足。刚刚翻阅App Store中《策略游戏》排行榜，《世界征服者2》排行第10，非常棒的成绩，而easy tech公司的信息，我在网上却几乎无法搜索出来，想来是一个小团队吧。真是我的偶像！按照我查阅的一些资料显示，战棋类游戏其实出现 阅读全文
摘要：
1，让一个object支持数组遍历函数的写法：['filter','forEach','every','map','some'].forEach(function(name){ Collection.prototype[name]=function(){ returnArray.prototype[name].apply(this._items, arguments); }});2，遍历对象时为什么要加hasOwnPropertyOf()？为了判断false之类的属性值。 阅读全文
摘要：
Single page app是指类似gmail一样的在单个网页上无跳转实现各种网络操作的网页应用。HTML5的兴起也让构建此类单页应用变得更加简便。但目前国内在这方面的积累很少，除了百度和腾讯有个别团队已经有成形的产品外，很少有得到广泛应用的单页app出现。不过作为未来的一个趋势，这是值得我们好好积累的。这里把构建单页app的几个重要经验列出来供大家分享。当然，关键还是在实践，如果实践过后再细品这些原则，会有醍醐灌顶的感觉。如果是正在设计单页app，这些原则也会给你很大的启发。DOM是只写的。程序输出HTML，在elements上操作，但是没有任何东西从DOM读出。在DOM上保存状态是很.. 阅读全文
摘要：
第四章 使用three.js加载以图片为纹理的模型（下）在上一章里，为了演示的方便，我们选择了一个简单的模型。但是如前所述，在实际的生产环境中，一方面我们的模型更为复杂，另一方面我们的贴图也不是普通的照片，而是处理过的uv图。uv图就是xyz三维图通过变换形成的二维图，类似数学里面学的极坐标变换。UV图的制作可以借用一些软件工具完成，在blender里面也有UV图编辑器。这一节我们选用three.js官方例程中的一个加载头部模型的示例。原示例有三百多行代码，我把它精简到一百行多一点，包括扩了核心的uv图加载显示部分。而更多的处理代码则直接删掉，虽然显示效果因此差了一些，但精简的代码更适合说明和 阅读全文
摘要：
第四章 使用three.js加载以图片为纹理的模型（上）在前言中我们介绍过，我们一般不用three.js自带的三维模型创建函数去拼凑我们想要的三维模型，而是使用类似Blender一样的三维建模工具去定制三维模型，然后导出为three.js可以识别的jason格式，加载显示。通过这种方式，我们可以构建较为原始的三维模型在浏览器端显示，比如我们前面看到的马克杯模型。如果单纯依靠三维建模去逼近现实世界中的形体外观是很难的，细节的修缮将给3D建模带来巨大的工作量，同时也会导致模型的加载器计算量巨大，不仅对人还是机器都是巨大的挑战。好在我们可以另辟蹊径，不去追求模型的精细度，而在模型的纹理上做文章，尤其 阅读全文
摘要：
第三章 使用three.js加载blender生成的马克杯模型先看看效果图，这是在firefox里面加载的代码如下： 1 var SCREEN_WIDTH = window.innerWidth, 2 SCREEN_HEIGHT = window.innerHeight, 3 windowHalfX = window.innerWidth / 2, 4 windowHalfY = window.innerHeight / 2, 5 container, camera, scene, loaded, 6 renderer, mouseX = 0, mous... 阅读全文
摘要：
第二章 Blender的使用blender最快的学习方法就是看视频教程了，这里要感谢一位台湾大哥，制作了一整套的适合初学者的视频教程：http://v.youku.com/v_show/id_XMzI4MjkyNDAw.html?f=16694862因为我也是初学者，所以这里我把自己学习过程中遇到的一些问题列出来，想必会对其他初学者有所帮助。1，Blender极其灵活的窗口系统。初学软件，我一般习惯胡乱点开各种菜单功能，先随意转悠转悠。但玩到最后好几个重要的菜单都丢了，只剩下一个乱七八糟的模型在画面中央摆着，让我好不丧气。比如下图的这个拥有一堆工具按钮，包含无数神奇功能的入口的视窗，如果弄没了 阅读全文
摘要：
前言前端3D效果的展示方法很多，如果简单的显示一个立方体，我们可以用六块div，每块div结合CSS的旋转特性，旋转出不同的角度组装出来一个盒子。当我们拖拽这个盒子的时候，可以用JS根据鼠标新的坐标点刷新那六个div新的旋转角度参数，让六个面始终同步旋转，始终是闭合的，所以视觉效果来看是3D的。上述方法适用于简单的3D模型，比如立方体、长方体等。其特点是，各种控件都支持这种css旋转，比如我们可以把一个iframe做出3D的旋转效果，同时不影响iframe上网页内容的操作，这是比较酷的。但是对于一些更注重细节的3D模型，则很难用css特性来实现。也许我们可以用更多的，粒度更小的div来组装，但 阅读全文
摘要：
Input RegExp Result 源码如下：<html><head></head><body> <label for="">Input </label> <input id="inputText" type="text" onchange="var rule = new RegExp(document.getElementById('reg').value), input=documen 阅读全文