简单来说，phantomjs就是一个运行在node上的webkit内核，支持DOM渲染，css选择器，Canvas，SVG等，在浏览器上能做的事情，理论上，phantomjs 都能模拟做到。phantomjs 使用场景：页面自动化测试：无需浏览器的情况下进行快速的Web测试，且支持很多测试框架，如YUI Test、Jasmine、WebDriver、Capybara、QUnit、Mocha等。网页监控：定期打开页面，检查网站是否正常加载，加载结果是否符合预期等页面截图：以编程方式抓起CSS、SVG和Canvas等页面内容网络爬虫：抓取网络页面start在官网直接下载phantomjs。windows环境直接下载exe文件，解压，运行http://phantomjs.org/download.html来个截图小demo由于phantomjs相当于一个没有UI的浏览器，可以抓取url下的所有内容，并渲染。因此，网络截图，对于phantomjs来说，就不费劲了。varpage =require('webpage').create();varurl ='http://ke.qq.com'; page.open(url,function(status) { page.render('index.png'); phantom.exit(); });保存文件为capture.js，在终端 ...继续阅读 (11)

简单来说，phantomjs就是一个运行在node上的webkit内核，支持DOM渲染，css选择器，Canvas，SVG等，在浏览器上能做的事情，理论上，phantomjs 都能模拟做到。phantomjs 使用场景：页面自动化测试：无需浏览器的情况下进行快速的Web测试，且支持很多测试框架，如YUI Test、Jasmine、WebDriver、Capybara、QUnit、Mocha等。网页监控：定期打开页面，检查网站是否正常加载，加载结果是否符合预期等页面截图：以编程方式抓起CSS、SVG和Canvas等页面内容网络爬虫：抓取网络页面start在官网直接下载phantomjs。windows环境直接下载exe文件，解压，运行http://phantomjs.org/download.html来个截图小demo由于phantomjs相当于一个没有UI的浏览器，可以抓取url下的所有内容，并渲染。因此，网络截图，对于phantomjs来说，就不费劲了。varpage =require('webpage').create();varurl ='http://ke.qq.com'; page.open(url,function(status) { page.render('index.png'); phantom.exit(); });保存文件为capture.js，在终端 ...继续阅读 (25)

诚然，吉他有上千个和弦。世界上最厉害的吉他大师，也无法一眼辨识出所有的和弦。更多时候，我们熟记几个基本的和弦，然后通过一定的计算法则，去推导其他的和弦。因而推导的逻辑就非常重要。《吉他三月通》一书把这乐理洋洋洒洒说了一百多页，我想试着让事情简单一些。最后，我们将逻辑实现成一个小程序，可以方便打印出想要推导的和弦。音乐与数学的不同在这之前，我们得谈点有趣的事情，它们都有共同的原因：为什么我们会觉得某首歌很“中国风”？为什么某些日本的传统音乐听起来很“诡异”？为什么钢琴要做成黑键白键，所有键都一样不行吗？我们常用正整数：1、2、3、4、5、6、7 ，对应和弦：C、D、E、F、G、A、B，对应音符：Do、Re、Me、Fa、So、La、Ti每个正整数之间，都是相差1；而按频率高低排列的音符，由于历史原因，它们并不是等差数列。实际上，4比理想的要低一点，7比理想的要高一点，其他的5个音，则基本在理想线性曲线上！这5个跟理想比较吻合的音，就是天朝古代的五音阶：宫、商、角、徵、羽。“中国风”的歌曲，大多使用了这五个音，所以让人感到舒服和温和；而日本的传统音乐，反其道而行用了许多4与7（其实这么说也不太对，是受阴阳调式影响，但表现上大概如此），有一种幽静阴深的效果。所以，以上问题的原因是音符的递增不完全是线性的！我们得把4和7这两个不和谐点标志出来，就出现了“半音和全音”的理论。把3到4和7到1这 ...继续阅读 (14)

诚然，吉他有上千个和弦。世界上最厉害的吉他大师，也无法一眼辨识出所有的和弦。更多时候，我们熟记几个基本的和弦，然后通过一定的计算法则，去推导其他的和弦。因而推导的逻辑就非常重要。《吉他三月通》一书把这乐理洋洋洒洒说了一百多页，我想试着让事情简单一些。最后，我们将逻辑实现成一个小程序，可以方便打印出想要推导的和弦。音乐与数学的不同在这之前，我们得谈点有趣的事情，它们都有共同的原因：为什么我们会觉得某首歌很“中国风”？为什么某些日本的传统音乐听起来很“诡异”？为什么钢琴要做成黑键白键，所有键都一样不行吗？我们常用正整数：1、2、3、4、5、6、7 ，对应和弦：C、D、E、F、G、A、B，对应音符：Do、Re、Me、Fa、So、La、Ti每个正整数之间，都是相差1；而按频率高低排列的音符，由于历史原因，它们并不是等差数列。实际上，4比理想的要低一点，7比理想的要高一点，其他的5个音，则基本在理想线性曲线上！这5个跟理想比较吻合的音，就是天朝古代的五音阶：宫、商、角、徵、羽。“中国风”的歌曲，大多使用了这五个音，所以让人感到舒服和温和；而日本的传统音乐，反其道而行用了许多4与7（其实这么说也不太对，是受阴阳调式影响，但表现上大概如此），有一种幽静阴深的效果。所以，以上问题的原因是音符的递增不完全是线性的！我们得把4和7这两个不和谐点标志出来，就出现了“半音和全音”的理论。把3到4和7到1这 ...继续阅读 (17)

随着 互联网的蓬勃发展，并且伴随着产品功能的越来越复杂，对于技术人员来说最大的挑战就是如何在保证业务快速发展的同时，也可保证不断复杂的业务对用户体验的影响，其中对用户来说最重要的体验指标是如何快速、稳定的访问业务网站以及产品功能，既是网站的性能。本系列文章将会从前后端性能指标定义、性能工具使用、产品业务核心性能指标、前后端性能解决方案出发对这个性能优化体系进行完整的阐述。建议阅读人群：前端工程师、后端工程师、产品经理核心性能定义介绍：由于涉及前后端的性能指标、定义非常多，本文将重点介绍对前后端影响比较大的指标，让大家对性能优化的核心指标有个整体的认识与了解后端性能定义DNS时间：用户在浏览器输入网址名称（网址）后，浏览器通过查询DNS服务器所需要的时间建立连接时间：根据TCP协议要求，请求方（浏览器等）与接受方（服务器）经过一系列协商所需要的时间服务器处理时间：接收方（服务器）处理请求所需时间数据传输时间：从请求方（浏览器等）到接收方（服务器）以及从接收方（服务器）到请求方的时间前端性能定义：白屏时间：用户浏览器输入网址后至浏览器出现至少1px图片为止首屏时间：用户浏览器首屏内所有的元素呈现所花费时间用户可操作时间(dom ready)：网站某些功能可以使用的时间页面总下载时间(onload):网站中所有资源加载完成并且可用时间影响核心性能因素：DNS时间：与DNS设置的TTL时间 ...继续阅读 (15)

随着 互联网的蓬勃发展，并且伴随着产品功能的越来越复杂，对于技术人员来说最大的挑战就是如何在保证业务快速发展的同时，也可保证不断复杂的业务对用户体验的影响，其中对用户来说最重要的体验指标是如何快速、稳定的访问业务网站以及产品功能，既是网站的性能。本系列文章将会从前后端性能指标定义、性能工具使用、产品业务核心性能指标、前后端性能解决方案出发对这个性能优化体系进行完整的阐述。建议阅读人群：前端工程师、后端工程师、产品经理核心性能定义介绍：由于涉及前后端的性能指标、定义非常多，本文将重点介绍对前后端影响比较大的指标，让大家对性能优化的核心指标有个整体的认识与了解后端性能定义DNS时间：用户在浏览器输入网址名称（网址）后，浏览器通过查询DNS服务器所需要的时间建立连接时间：根据TCP协议要求，请求方（浏览器等）与接受方（服务器）经过一系列协商所需要的时间服务器处理时间：接收方（服务器）处理请求所需时间数据传输时间：从请求方（浏览器等）到接收方（服务器）以及从接收方（服务器）到请求方的时间前端性能定义：白屏时间：用户浏览器输入网址后至浏览器出现至少1px图片为止首屏时间：用户浏览器首屏内所有的元素呈现所花费时间用户可操作时间(dom ready)：网站某些功能可以使用的时间页面总下载时间(onload):网站中所有资源加载完成并且可用时间影响核心性能因素：DNS时间：与DNS设置的TTL时间 ...继续阅读 (10)

对于传统的页面模型来说，数据的拉取+渲染模型如下：在页面的head部分，使用jsonp预拉取cgi资源，然后在资源加载完成之后，检查预拉取的数据是否已经返回，如果已返回，则直接用该数据渲染（避免了先用缓存数据渲染再用cgi数据渲染导致的二次刷新），否则才用缓存数据渲染。对于上面的优化方式，我们可以用于独立页面的首屏数据渲染中，但是对于由手Q中一个webview内打开的新webview里的H5页面，是否有更好的方法呢？当我们通过点击操作，在webview内调用手Q的openUrl接口打开新的webview并加载页面，新页面对于我们来说是可被预知的，也就是说我们点击打开新webview的时候，其实是知道要打开的页面是什么。因此对于cgi预拉取的逻辑，我们其实可以提前到前一个webview点击的操作时就发起。统计了一下手Q创建webview到开始请求页面url之间的耗时，android端耗时大约在1.5-2秒之间。因此其实我们可以利用这段时间，在点击前一个webview的同时，让新页面的首屏cgi请求提前发起，在等待下一个webview打开并load页面的期间，如果cgi请求已经返回，数据可以暂存在前一个webview中，等新webview页面资源ready之后，通过手Q的webview通信接口mqq.addEventListener/mqq.dispatchEvent从上一个webvi ...继续阅读 (14)

CSS3的3D变换transform属性attrdescss leveltransform向元素应用 2D 或 3D 转换。3transform-origin允许你改变被转换元素的位置。3transform-style规定被嵌套元素如何在 3D 空间中显示。3perspective规定 3D 元素的透视效果。3perspective-origin规定 3D 元素的底部位置。3backface-visibility定义元素在不面对屏幕时是否可见。3@transfrom兼容性IE10，firefox以及Opera支持@keyframe，而chrome和safari需要加浅醉-webkit-，IE9及早期IE版本是不支持的，所以这些功能一般是在移动端使用.一个demo这个div会沿着Y轴旋转130degdiv { transform: rotateY(130deg); }一个H5上的应用场景实现一个旋转木马的效果，这里列出核心代码，完整的后续放在github上核心是css代码一个div作为舞台的.container { perspective:800px;//这里是一个视角的位置，}perspective 800px是一个视角的位置，表示屏幕距离3d变化中心点的位置，一般是这个经验值，可以设置大一点，这样你看到的动画什么的就会离你很远。。。。一个容器.m-courseList { ...继续阅读 (18)

现在前端圈子最热的莫过于ReactNative。以Web的开发方式来开发Native，并且仗这facebook这个国际互联网公司做保证，这种革命性的产品都让前端coder和客户端coder都炸开了。本文打算以ReactNative的Text标签的角度，这个最基本的标签，来带你跨入入ReactNative的世界的第一步。如果把React Native 上的View标签对应成web的div标签，那么想把Text标签对应为web的Span标签或者P标签真是大错特错。严格来说，你应该把Text当初一个ReactNative的组件！（是的，本身就是！）Text标签在ReactNative上非常非常的常用，其属性方法，内部细节为开发者所必须掌握的。同时我们能透过Text标签，也能理解ReactNative上的一些设计理念。一，文本输出必须用Text标签包起来这点大家应该都比较清楚，如果使用View标签输出文本，ReactNative是会直接报错的，我们必须用Text标签包起来。// 直接编译不通过，少年Some text// successSome text二，关于Text的嵌套Text元素是一种特殊的相对布局。如果Text标签嵌套Text标签，Text内层的不再是flexbox布局，而是纯文本布局。即是，内层Text元素设置长宽间距都是没有效果的。另外，一点注意的是，Text元素内层也只能是 ...继续阅读 (18)

现在canvas图表的库越来越多，也越来越成熟，以致于大家想到图表制作都直接想着用第三方库，而忽略了自己动手制作的可能性。其实要绘制一个简单基本的canvas图表库并不难。下面就让我展开介绍。第一期，我先挑了最基础的扇形和环形图表进行讲解。若要看懂此文，先要阅读一下MDN的canvas文档。https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API有了canvas的基础之后，我们便可以开始对问题进行拆解。画一个扇形或者环形图需要什么元素。1. 画一出扇形或环形，以及上色2. 数据标签。3. 动画效果。1. 绘制图形，则需要找到合适的绘制图形的函数。绘制圆弧 arc(x, y, radius, startAngle, endAngle, anticlockwise)该方法有五个参数： x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及engAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。ctx.beginPath(); // 移动到圆心 ctx.moveTo(this.cx, this.cy); // 从圆心画直线到计算好的圆外边上的点 ctx.lineTo(startPos.x, st ...继续阅读 (20)

有时候我们的代码有很多的条件判断，我们只能用switch语句来让代码更好看一点。function getDrink(type) { if (type === 'coke') { type = 'Coke'; } else if (type === 'pepsi') { type = 'Pepsi'; } else if (type === 'mountain dew') { type = 'Mountain Dew'; } else if (type === 'lemonade') { type = 'Lemonade'; } else if (type === 'fanta') { type = 'Fanta'; } else { // acts as our "default" type = 'Unknown drink!'; } return 'You\'ve picked a ' + type; }像上面介样子的代码，看起来是很头疼滴。而用switch语句，代码会更直观简洁。var type = 'coke'; var drink; switch (type) { case 'coke': ...继续阅读 (11)

react是facebook推出一个用来构建用户界面的js库。官方介绍的三大特性如下：just the ui把react只当作一个ui组件就好，等同于传统mvc中的view。virtual domreact在编程模型和传统dom之间添加了一层，称之为虚拟dom。好处非常多，性能更好，可以在node环境下完成渲染（解决seo问题），可以更好的用于开发native apps。data flow反应式的单向数据绑定，比传统数据绑定更简单，简单的使用js事件触发改变组件状态也可以实现双向绑定的效果。什么是angularjsangularjs是google推出的一个前端js框架，面世已有几年时间，非常成熟，目前已经有非常多的第三方模块，基本上可以解决前端工程领域的各方面的问题。网上的资料也非常多，这里就不做过多介绍。reactjs和angularjsreactjs是非常纯粹的组件式开发，所有的页面元素均由各大小组件组合而成。再插上虚拟dom的翅膀，实现了一处代码多平台执行的效果，关键是这货性能还不错。但是呢，除了组件以外，这货其他什么功能也没有，你需要重新造出所有的缺失的轮子或者选择第三方的轮子。angularjs则是一个完整的框架，意味着不需要太多的工作，就可以使用于大部分的业务场景。简单好用的module和依赖注入系统，controller中定义的数据和事件，service实现不同组件之 ...继续阅读 (8)

积木系统上线半年，取得了些成绩，也暴露出不少问题，加上 2.0 版本也准备开动，因此正是时候来个总结反思下。项目开始之前系统要解决的问题产品运营在产品侧来说，是个大事，产品的冲量、用户的活跃等等一大堆指标都靠它了，有人说再好的产品不运营也是个渣渣。于此同时，产品运营对技术岗的同学来说，是无休无止的赶时间点（节假日、网络热点）以及不是很能体现技术含量的重复性的简单页面。这个矛盾，让产品和技术双方都很沮丧，产品觉得技术不够重视，技术则觉得不应该在重复性的简单的工作上投入过多时间。好吧，这其实就是积木系统想要解决的问题以及终极目标，让产品同学可以快速发布页面，同时技术同学沉淀组件（积木）来避免重复性工作，如下图：系统的核心功能分析了各方的痛点以及诉求之后，系统的核心功能其实和容易理出来：简单易用的、可视化的可编辑页面通用的、简便地组件接入机制当然除此之外还要有：发布系统，既然是批量的生成页面，也就没必要每次都有测试（首次发布要严格测试）来发布编译系统，类似 grunt ，fis 做的事，发布之前要编译，如果资源合并、CDN 路径替换等等业务管理系统，是的，这个系统不能只为腾讯课堂服务权限系统，不多说响应式，一次配置，多端运行……开始技术规划之前，我们有必要也必须要分析现有的解决方案，没必要重复轮子。现有的一些解决方案传统的后台管理系统（CMS）不管是产品还是开发，对 CMS 应该都不陌生 ...继续阅读 (18)

PromisePromise是ES6的新特性，在ES6之前各大浏览器、各种polyfill和各种js执行环境都针对Promise进行了自己的实现，不过实现上大同小异。V8 Promise内存泄漏不过V8对Promise的实现存在内存泄漏问题，当一个promise无法resolve也无法reject的时候，就会发生内存泄漏。一个很容易造成Promise内存泄漏的场景便是递归Promise或者嵌套Promise。为方便观察内存使用情况，下面是一段在Nodejs里面运行的代码(function() { // 记录Promise链的长度 var i = 0; function run() { return new Promise(function(resolve) { // 每增加10000个Promise打印一次内存使用情况 if (i % 10000 === 0) console.log(i); i++; // 模拟一个异步操作 setTimeout(function() { // 100000个Promise之后退出 if(i === 10000 * 10) re ...继续阅读 (20)

1. iconfont简介什么是iconfont？正如字面意思，就是图标字体，下面我给大家慢慢道来web页面包含什么元素？文字链接流媒体视频音频图片背景图（大）插图（中，例如照片集，课程封面等）图标（小）在所有包含ui的程序架构中，以上不同的ui元素在各种环境中都会遭遇到不同的问题，同时也都有与之对应的解决方案iconfont 就是一个解决【图标】问题的解决方案之一1.1 图标问题首先来看一下图标会有什么难题：图标的大小会变，在两种情况下：每次ui改版，那些厌倦一成不变喜欢尝鲜的设计师们总是会淘气地改变图标大小，图标一般是点缀其他事物，例如文字，有时候设计会把某个图标从一段描述文字改成标题的点缀，这时候图标就需要变大自适应页面，整个页面的大小都在变，难道图标还能独善其身吗？图标会经常换，这点还是那些设计师的问题，他们说不好看要换，作为开发我们还能说什么？图标自身也会变，“来把那个图标改成红色吧，鲜艳点！”，“那个谁，把那个图标的底色改成蓝色吧~”，“…”背景图和插图一般不会有这些问题，他们偏向于主体内容而不是点缀，一般不会改变。背景图一般是平铺，插图一般也是定宽，所以大小也不怎么需要改变。1.2 图标解决方案图标的解决方案有：使用png图片，这是最传统的方案，兼容性最好，使用方面基本不会有技术问题。但是它不够方便，主要有以下两个问题：只要图标稍有改动都必须换新的图片，即使只是换个颜 ...继续阅读 (23)

程序=数据结构+算法在我对数据结构和算法进行描述之前，请允许我把这句话放在文章开头来显示数据结构和算法的重要性。科班出身的同学都明白数据结构和算法的重要性，而对于没有接受过正规的计算机科学教育，唯一熟悉的数据结构就是数组了，但在处理一些复杂的问题时，数组实在是太low了。随着js在服务器端发展的趋势，灵活运用数据结构和算法是必须的。用一句话概括让你对数据结构和算法有一个初步的印象：只要是有些规模的程序，就需要用数据结构存储程序输入的数据，再加上一些巧妙的算法输出理想的结果。最终该程序的性能就取决于你使用的数据结构和算法了，时间复杂度上是O(1)还是O(n)由你做主。举例说明：我们姑且不考虑空间复杂度，使用数组和BST（二叉查找数）完成查找一组数中最大值的算法，时间复杂度上数组最多做到O(N)，而BST查找、插入、删除的复杂度等于树高，也就是O(logN)，最坏O(N)。前言结束，下面就对javascript数组进行描述。数组定义：一个存储元素的线性集合，元素可以通过索引来任意存取，索引通常是数字，用来计算元素之间存储位置的偏移量。一、javascript数组特性1.数组在js中是一个特殊的对象，表示偏移量的索引是该对象的属性，但是不管该索引是不是整数，在内部都会被转换为字符串类型。2.脚本语言里，数组中的元素不必是同一种数据类型，这一点和很多编程语言不同。3.专家推荐使用[]操作符 ...继续阅读 (32)

一、PolymerPolymer是Google在2013年的Google I/O大会上提出了一个新的UI框架。Polymer的实现使用了WebComponent标准，并且Polymer可保证针对包含各种平台的Web Component规范本地实现的浏览器、库和组件的使用效果完全相同。1.1 Polymer框架：Polymer框架可以分为三个层次：基础层(platform.js)：是基本构建块。大多数情况下，基础层都是本地浏览器的API。核心层(polymer.js)：实现基础层的辅助器。元素层：建立在核心层之上的UI组件或非UI组件。1.2 基础层基础层包括以下技术：DOM Mutation Oberservers和Object.observe()：用于观察DOM元素的变更，是纯JavaScript对象。指针事件：处理鼠标和触摸操作，支持所有的平台。阴影DOM：封装元素内的结构和样式，适合自定义元素。自定义元素：可以自定义HTML5的元素。自定义元素的名字必须包含一个破折号，这是一种简单的命名空间标识，以区别于标准元素。HTML导入：包自定义元素。这些包可能包含HTML、CSS和JavaScript。模型驱动的视图(MDV)：把数据直接绑定到HTML。Web动画：一套统一的Web动画API。阴影DOM、自定义元素和HTML元素Web Components，是网络组件模型。Web C ...继续阅读 (17)

写在前面Github:https://github.com/AlloyTeam/AlloyGameEngineHTML 5新增了progress标签，那么再去使用AlloyRenderingEngine去模拟进度条是否多余？不多余。有四大好处：样式更加灵活(想怎么绘制就怎么绘制)跨平台跨浏览器样式更加统一（使用便签，各个浏览器默认样式是五花八门）效果更加酷炫，（比如燃烧的进度条= =！）像素能够统一管理统一像素管理的好处：更容易的全尺寸缩小和放大（最常见的：全屏游戏）缩小和放大不用操心内部元素错位（只是交给浏览器去进行插值运算）更好的滤镜控制（如游戏中死亡画面，全屏黑白化）更好的移植性和跨平台性（opengl<->canvas2d<->webgl<->opengl等等各种mapping）上面所列的，对AlloyRenderingEngine所有组件都适用。演示开始演示(ps:可以直接点击进度条黑色部分设置进度)组件使用; (function () { //注意：当要渲染文字(Text)和图形(Graphics)时，请使用Cavnas渲染 //Progress组件内部使用了Graphics //第二个参数true代表关闭webgl,使用Canvas2d渲染 //如果要使用webgl渲染，请使用Lable渲染文字，Shape渲染矢量图。 var ...继续阅读 (14)

Vue.js 是一个基于MVVM模型的 web 库。通过双向数据绑定连接View和Model层。实际的 DOM 操作被封装成Directives和Filters。基本定义每个Vue对象的实例是一个ViewModel。创建方式：varvue =newVue({ el: view, data: model });其中vue.$el用于管理 View 层上的 DOM 。而vue.$data用于管理 Model 层的数据，可以通过vue.$data.property访问 Model 层数据，也可以直接vue.property访问。Hello World 入门{{ title }}{{ todo | uppercase }}// 对应 jsvardemo =newVue({ el:'#example', data: { title:'todo list', todoList: ['do work','read book','shopping'] } });从上面的例子可以看出：模版替换使用的是{{ variable }}Directives 格式是v-xxx，如上 v-repeat 。Filtrs 格式是{{ variable | filter }}，如上 uppercase事件在 DOM 节点上通过v-on绑定处理函数 ...继续阅读 (23)

本篇文章用来介绍在nodejs中，用来测量时间和内存的函数process.memoryUsage返回描述以字节为单位的节点进程的内存使用量的对象。相应执行代码例子如下：var util = require('util'); console.log(util.inspect(process.memoryUsage()));相应执行结果如下：{ rss: 4935680, heapTotal: 1826816, heapUsed: 650472 }heapTotal和heapUsed参考V8的内存使用情况。rss为驻留集大小，相应说明可以参考驻留集相应api链接为http://nodejs.org/docs/v0.4.10/api/process.html#process.memoryUsageprocess.hrtime返回当前高分辨率实时在[秒，纳秒]元组。它是相对于过去任意的时间。它和一天中的时间不相关，因此，不会受到时钟偏移影响。主要用途是用于测量时间间隔之间的性能。相应执行代码例子如下：var time = process.hrtime(); // [ 1800216, 25 ] setTimeout(function() { var diff = process.hrtime(time); // [ 1, 552 ] console.log( ...继续阅读 (25)

写在前面Github:https://github.com/AlloyTeam/AlloyGameEngine在dom元素里，自带了input标签，设置其type为text，它就是一个文本框。那么在Canvas中模拟input文本框是不是闲的没事找事？绝对不是！因为在游戏当中可以统一化像素管理，具体统一化像素管理有什么好处，以后新开文章详细讨论。演示上面的文本框就是使用AlloyRenderingEngine渲染出来的。使用; (function () { var Stage = ARE.Stage, Textbox = ARE.Textbox; var stage = new Stage("#ourCanvas", true); var textbox = new ARE.Textbox({ fontSize: 22, color: "red", width: 200, height: 26 }); textbox.x = 50; textbox.y = 50; textbox.focus(); stage.add(textbox); })();原理(都在注释里); (function () { //先把要使用类的赋给临时变量，以后就不用打点了: ...继续阅读 (18)

flexbox是一个新的盒子模型，当你给一个元素使用了flexbox模块，那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方，下面就着重讲述一下它的一些使用场景：Example 1：flexbox等分布局如果你要实现以下所示的样式，你可能首先想到的是用float：1fdeg霸气值：1702bling霸气值：1603lea霸气值：150ul li { width: 32.9%; float: left; border-right: 1px solid #fa9900; padding: 5px 0; }但当只有2个排名后，少了一个li节点后，就会展示如下：删除两个li节点后如下：但是用户以及设计师肯定不希望看到这样的界面。他们肯定希望界面是这样的：减少一个li节点后：删除两个li节点后如下：那么这里用display:flex布局是最好不过的了，新的flexbox布局模式被用来重新定义CSS中的布局方式：ul { display:flex;//表示改直接子元素用flex布局，默认横向布局 } ul li { /*width: 32.9%;*/ /*float: left;*/ border-right ...继续阅读 (22)

SodaRenderSodaRender是一款具有类似Angular模板写法的模板引擎,使用SodaRender模板引擎会带来更直观的优点：轻量，代码少模板清晰，可读性强防止意外的XSS防止因cgi字段丢失导致的错误使用SodaRender假如你还在使用JS和模板混杂的前端模板引擎，在它不至于使你的模板变得一团遭的时候，它们看起来是这样的<% for(var i = 0; i < data.length; i ++){ var item = data[i]; %><%=item.id%>"><%=item.name%><% } %>在使用sodaRender重构之后，你的代码看起来是这样的{{item.name}}如果你还想继续为一大堆的%噩梦所揪挠，那你的模板可能看起来是这样的<% if(item.status === 'curr'){%>active<%}else{%>common<%}%>"> <%=item.name%>如果你希望更简洁的阅读，你可能会选择sodaRender{{item.name}}如果还想在你的模板中混合函数，那么你的模板会更糟糕，如下<% for(var i = 0; i < data.length; i ++){ var item = data[i]; var formatTime = function(time){ ...继续阅读 (23)

在说容易按比例缩放前，我们先说下图片按比例缩放。对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放，如.demo1{ width:100px;/* 只设置宽度，根据等比例缩放得到高度为75px */} .demo2{ height:150px;/* 只设置高度，根据等比例缩放得到宽度为200px */}图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频呢？一般在响应式中，我们会要求视频的宽高比为16：9或4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候（改变高度不考虑），视频的宽度变了，那么高度也得根据我们要求的16：9或4：3改变。这里老外提供了一个很巧的方案：Creating Intrinsic Ratios for Video核心思想为：提供一个容器，设置容器的高度为0，再设置padding-bottom为56.25%（因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例），最后设置视频绝对定位，其宽高为容器的100%.wrap{ height:0; padding-bottom:56.25%;/* 16:9 */position: relative; width:100%; } .wrap .vid ...继续阅读 (15)

传送门observejs：https://github.com/kmdjs/observejs本文演示：http://kmdjs.github.io/observejs/list/本文代码：https://github.com/kmdjs/observejs/tree/master/example/list写在前面javascript的编程体验一直被改善，从未停止过。从最早的Jscex(现在的windjs),改善异步编程体验。如今ES6的Generator改善异步编程体验。还有类似的seajs、requirejs提供极致的模块化开发体验；五花八门的Class.js改善面向对象编程体验；kmdjs同时改善模块化编程、面向对象编程和构建体验；各式各样的template.js改善数据->标记的体验。所有的改善，使代码更直观、友好，使程序易维护、可扩展。最近使用observejs开发组件，发现有几大优点：–Dom操作几乎绝迹–专注于数据操作–视图全自动更新–性能棒棒的–仅一行代码搞定上面四点本文使用世界上最简单的List组件作为例子，大家通过该例子感受一下observejs组件开发改善之处。组件代码var List = function (option) { this.option = option; this.d ...继续阅读 (15)

前面文章讲了FIS的源码实现细节，这篇文章偏实战一些，给出FIS跟require.js结合的简单例子。FIS编译流程如果已熟悉了FIS的编译设计，可以跳过这一节，直接进入下一小结。FIS的编译主要有三步：命令解析–>资源编译–>资源部署资源编译：FIS将文件资源抽象成File实例，该实例上有文件资源类型、id、内容、部署路径等的属性。对于文件的编译，实际上都是对File实例进行操作，比如修改资源的部署路径等（内存里操作）。资源部署：根据File实例的属性，进行实际的部署动作（磁盘写操作）。FIS的这套编译体系，使得基于FIS的扩展相对比较容易。在扩展的同时，还可以确保编译的高性能。针对资源编译环节的扩展，除非是设计不合理，不然一般情况下不会导致性能的急剧降低。getting started啰嗦的讲了一大通，下面来点半干货。喜欢require.js，但又喜欢用CMD编写模块的朋友有福了，下面会简单介绍如何整合require.js与FIS。demo已经放在github，下载请猛戳。首先看下项目结构。modules目录里的是模块化的资源，lib目录里的是非模块化资源。其中：index.html依赖require.js来实现模块化管理index.js模块依赖util.js模块index.js、util.js均采用CMD规范也就是说，本例子主要实现的，就是CMD到AMD的转换。. ├── f ...继续阅读 (19)

前面已经提到了fis release命令大致的运行流程。本文会进一步讲解增量编译以及依赖扫描的一些细节。首先，在fis release后加上--watch参数，看下会有什么样的变化。打开命令行fis release --watch不难猜想，内部同样是调用release()方法把源文件编译一遍。区别在于，进程会监听项目路径下源文件的变化，一旦出现文件（夹）的增、删、改，则重新调用release()进行增量编译。并且，如果资源之间存在依赖关系（比如资源内嵌），那么一些情况下，被依赖资源的变化，会反过来导致资源引用方的重新编译。// 是否自动重新编译if(options.watch){ watch(options);// 对！就是这里}else{ release(options); }下面扒扒源码来验证下我们的猜想。watch(opt)细节源码不算长，逻辑也比较清晰，这里就不上伪代码了，直接贴源码出来，附上一些注释，应该不难理解，无非就是重复文件变化–>release(opt)这个过程。在下一小结稍稍展开下增量编译的细节。functionwatch(opt){varroot = fis.project.getProjectPath();vartimer = -1;varsafePathReg = /[\/][_-.sw]+$/i;// 是否安全路径（参考）varignor ...继续阅读 (27)

先是环境：在windows上用VMware安装了ubuntu，用ubuntu运行终端。可以用VMware文件共享、网络文件共享、nginx、ftp实现两个操作系统的文件共享linux主目录配置文件保存在github：https://github.com/feix760/yuan如果换一台电脑，我只需要git clone –recursive myGithubPath 就可以拿到以前的配置文件vim的插件可以用Bundle来管理，只要在.vimrc用 Plugin ‘XXX’ 指明需要的插件，随后用:PluginInstall自动安装新插件下面是我的.vimrc插件配置的部分，随后介绍各个插件的用途Plugin ‘gmarik/Vundle.vim’Bundle 插件管理插件Plugin ‘vim-scripts/L9’vim 基础库Plugin ‘majutsushi/tagbar’插件taglist的替代品，函数名称等的预览窗口，如果要预览js，需要安装命令jsctags(?windows用此标记windows可能无法支持)Plugin ‘mattn/emmet-vim’zen codingPlugin ‘kien/ctrlp.vim’使用 Ctrl+p 搜索文件Plugin ‘scrooloose/nerdtree’Plugin ‘ivalkeen/nerdtree ...继续阅读 (195)

React Native综述：在React Native中，JavaScript跟Object-C均有一个对应的中间件负责交互，源码中称为bridge，它们通过callback的形式进行传参，通过参数配置来触发OC的控件，从而达到以JavaScript来控制Native的目的。React Native的设计理念：既拥有Native的用户体验、又保留React的开发效率。React Native的口号：Learn Once,Write Anywhere.交互细节：双方均维护一套相同的模块配置表，而这份表是由OC遍历OC模块中带了暴露标记的方法以及JS中配置的模块方法而得到的，该操作是由React Native自动完成的。在JS调用OC方法时，中间件会将该调用做一些格式化操作，在react native中格式化为[ModuleID,MethodID,params(包含CallbackID)]，并将其放在等待OC调用的队列中，而CallbackID 则缓存在JS中间件上等待回调。在用户触发了各种事件启动事件，触摸事件，timer事件，系统事件，回调事件时，OC会去调用JS模块配置表中JS模块的方法，此时JS会连同等待OC调用的队列一起传回OC中执行。JSBridge：前面说过，在React Native中，JS与OC共同遵循一个模块配置json,并以此为基础来相交传参及调用，而这个jso ...继续阅读 (35)

前面已经已fis server open为例，讲解了FIS的整体架构设计，以及命令解析&执行的过程。下面就进入FIS最核心的部分，看看执行fis release这个命令时，FIS内部的代码逻辑。这一看不打紧，基本把fis-kernel的核心模块翻了个遍，虽然大部分细节已经在脑海里里，但是要完整清晰的写出来不容易。于是决定放弃大而全的篇幅，先来个概要的分析，后续文章再针对涉及的各个环节的细节进行展开。看看fis-command-release老规矩，献上精简版的release.js，从函数名就大致知道干嘛的。release(options)是我们重点关注的对象。'use strict'; exports.register =function(commander){// fis relase --watch 时，就会执行这个方法functionwatch(opt){// ...}// 打点计时用，控制台里看到的一堆小点点就是这个方法输出的functiontime(fn){// ...}// fis release --live 时，会进入这个方法，对浏览器进行实时刷新functionreload(){//...}// 高能预警！非常重要的方法，fis release 就靠这个方法走江湖了functionrelease(opt){// ...}// 可以看到有很多配置参数，每个参数的 ...继续阅读 (91)