本教程演示如何使用AEditor制作一个简单的H5交互页demo: 交互页demo地址：点击打开H5交互页demo AEditor访问地址：http://aeditor.alloyteam.comStep1：设置页面背景颜色首先我们设置页面的背景颜色，右击舞台点击“设置背景”： 然后在背景颜色中填上色值rgb(38, 61, 102)，或者选择自己喜欢的颜色： 点击确定，设置页面背景颜色成功。 Step2：AEditor标题文字动画制作首先，点击“文字”按钮，添加文本到AEditor，并改变输入内容为AEditor：设置文字的颜色为浅蓝，并且设置大小为33px，此时文字样式初始化完成： 要对文字应用渐变向下的动画，我们需要把文字添加到时间轴。右击文字，选择”添加到时间轴“：点击后会发现顶部多了对应该文字的时间轴： 此时我们就可以开始具体到帧的动画编辑了。帧动画的时长默认是6s，我们并不需要这么长的动画时间。所以我们选中该时间轴，把时长改成1s，发现此时时间轴变短了，只有1s的动画时长： 选择第一个关键帧，把透明度设置为0，缓动选择easeout：再选择最后一个帧，把右则属性编辑器的Y值设置为60（此时会生成新的关键帧）：然后点击播放，则可看到文字渐变向下出现的动画。 另外描述部分的动画制作过程大同小异，就不详述了，描述部分添加到AEditor的效果： Step2：制作企鹅log ...继续阅读 (20)

为什么Nuclear这里列举Nuclear在竞品中的优势：借助浏览器本身的机制，无任何代码约定和入侵放心使用HTML+CSS+JSobservejs替代EventLoop、requestAnimationFrame、Ticker等定时循环解决MV*无法构建复杂特效的难题，随意构建超复杂交互特效，自由地大展拳脚支持Dom和Canvas组件，未来支持SVG和WebGL.SVG库Sword已经整装待发：https://github.com/AlloyTeam/SwordWebGL库pixeljs正在全力推进https://github.com/kmdjs/pixeljs获取NuclearNuclear网站http://alloyteam.github.io/Nuclear/.Githubhttps://github.com/AlloyTeam/Nuclear你也可以通过npm安装Nuclearnpm install alloynuclear使用Nuclearjs文件可以在这里找到最新版的:nuclear.jsornuclear.min.js你可以直接在页面引用也可在AMD环境同步 requiredefine(function (require) { var Nuclear = require('nuclear'); });或者异步 require：require([ 'nucle ...继续阅读 (10)

Event-driven programming for AndroidAndoird 中事件驱动编程https://medium.com/google-developer-experts/event-driven-programming-for-android-part-i-f5ea4a3c4eab(This is the first article in a three-part series)(本文是系列文章中的一部分)Although Android includes some event-driven features in its development, it is far away from being a pure event-driven architecture. Is this something good or bad? As in every issue with software development the answer is not easy: it depends.虽然 Android 已经包含了若干事件驱动特性，但其离纯正的事件驱动架构还有一定的距离。这到底是好事还是坏事呢？和多数软件开发问题的答案一样：看情况。First, let’s establish a definition for event-driven development. ...继续阅读 (16)

前言：除了我们日常使用的调试方法，在Chrome中，其含有一些有意思的方法，有助于提高我们的开发调试效率。Sources页command + p  文件跳转使用Sublime的人或习惯用command + p 进行文件的跳转，在chrome dev tools中其实也有类似的跳转方法。command + p   command + p + 文件名 + : + 数字command + shift + o  任意方法跳转Sublime中使用command +R 进行方法跳转，而在dev tools中，可以使用command + shift + o  进行任意方法的跳转。command + shift + o  // 跳转到任意方法注： 查找某文件中的方法，使用command + p 和  command + shift + o 更配哦~Elements页使用方向键快，上下键导航，左右键收起展开；H键快速隐藏dom（效果相当于给DOM加入visibility:hidden属性，有别于display:none）Enter进行快速编辑属性；鼠标右击使用各类方法…Console页$_   表示上次的计算结果举个栗子15 * 15   $_ * 10$0   获取当前选中的DOM选中DOM之后，在控制台输入$0。$0注：$1 $2 $3 是获取前几次选的dom，不常用 $(sel ...继续阅读 (16)

作为一名前端开发人员，经常也是需要有一个静态服务器的。下面让我们来分分钟搭建自己的静态服务器吧一：使用http-serverhttp-server基于Node，所以得先确保有Node环境。1. 安装http-servernpm install http-server -g2. 启动http-server -a 127.0.0.1 -p 9999上面的命令表示在本机的9999端口上启动一个静态服务器，应用根目录为执行上面命令的所在目录优点：简单，快速缺点：命令行一关，服务就中止了。每次开机都要再启一次，麻烦二：使用ApmServer/XAMPP两者都是PHP的集成环境，这里以ApmServer为例（只有用过ApmServer）。首先在网上下载ApmServer的压缩包（免安装），解压到一个盘的根目录（建议是根目录，因为路径有空格可能造成一些不必要的麻烦），下面是其解压后的目录结构：双击APMServ.exe启动应用，可以看到下面的界面：因为我们只需要一个静态服务器，所以把MySQL和SSL等选项都去掉，然后点击“启动APMServ”就完成我们的静态服务器了。这时要部署应用，只需要把文件放到apmServer/www/htdocs目录下面就可以访问到了。这里想说的是其虚拟目录配置，即映射硬盘上任一目录作为服务器的一个子目录。有了虚拟目录，我们就可以定制出多个不同的服务器了。打开虚拟目录 ...继续阅读 (17)

在 Angular, Vue.js等MVVM框架中，都涉及到指令（directive）的概念，directive实际上是一种针对DOM操作的抽象封装，并通过框架处理，将DOM操作逻辑与DOM元素进行自动化绑定，用一个简单的声明式语法简化了DOM操作逻辑中的给元素命名，查询目标元素，进行DOM操作步骤。举个小例子，比如我们有一个header组件，它的HTML片段内容是：html按钮如果我们希望给这里的按钮添加一个高亮的class，用zepto的代码是这样写的：jsvar $ = require('zepto');var $btn = $('.header button')$btn.addClass('highlight')由以上小例子可以看出，我们在写JS交互逻辑的时候，几乎所有的JS交互逻辑都像以下流程一样：初始化／数据变更／事件触发 --> 给目标元素命名（或者使用DOM树结构）--> 用选择器选中目标元素 --> 进行DOM操作为此，封装DOM操作并自动化将DOM操作与元素绑定，可以减少1/2的交互逻辑代码（1个步骤替换3步骤），甚至做到根据DOM操作与元素与及数据进行绑定，那就可以用一个绑定声明减少了全部的手动步骤。根据这一思路，我们先实现DOM操作封装与html按钮组件的HTML中声明了一个click事件，绑定JS模块中的onBtnClick函数，JS模块的代码为：js// ...继续阅读 (36)

AEditor是什么？AEditor是一个方便广大web开发者进行H5动画交互页开发的工具，开发者可以在AEditor上对交互动画以进行编辑，最终导出页面项目。与面向大众的H5交互页编辑平台（如玉兔，易企秀等）不同的是，AEditor面向开发者，在提供预设动画模式的同时，支持对动画进行帧的编辑，事件通知模型，以及可二次开发的特性，从而让开发者能更灵活地实现各种自定义的动画交互需求。浏览器支持：只支持chrome浏览器 概览AEditor主要由五部分组成，分别是：基础操作栏、时间轴管理栏、元素属性编辑栏、精灵管理栏以及预览区域。 基础操作栏场景分类：新建：打开一个全新的作品。保存：把作品内容保存下来，需要定义作品名称（双击可编辑），默认为‘暂无标题’。 载入：点击载入会打开作品列表，我们可以从已保存的作品列表中选择载入指定作品。导出：把已完成的作品进行导出，下载一个压缩包，里面包含了页面的项目结构，我们可以直接打开index.html看到生成的页面，并且可以在此基础上进行二次开发（例如监听事件进行数据上报等）。 基本对象分类：基本对象包括图片，文字，图层三种。图片：用户需要上传需要用到的图片，图片上传之后在编辑器中可进行编辑，并且图片上传后会对体积进行压缩，最终导出之后会被放置到img目录下被生成的页面引用。文字：可对文字内容以及样式进行编辑，富文本编辑器提供一定程度的样式修改， ...继续阅读 (28)

一、概念解析：Mongoose:Let’s face it,writing MongoDB validation, casting and business logic boilerplate is a drag. That’s why we wrote Mongoose.Mongoose简单来说就是数据库操作ORMcreateConnection 与 connect:许多入门学徒在看到这两个函数的时候都会有一定疑惑，但是这两个函数其实并不是一个东西，createConnection 创建的并非一个默认的数据库连接，它返回的是一个Connection。我们需要通过这个Connection来创建Model、Instance，然后进行数据表操作，这通常是在程序需要连接多个数据库的情况下使用，否则一般使用connect来打开默认的数据库连接，这时候我们就可以用mongoose.model来创建我们的Model了。var conn = mongoose.createConnection('mongodb://localhost:27017/test'), MyModel = conn.model('project', projectSchema), m = new MyModel; m.save();VSva ...继续阅读 (22)

CSS样式的clip-path来源于SVG元素，它们的本质都是剪切每个人都知道剪切，那么clip-path实现的剪切有什么特别之处呢？它的剪切元素可以是任意对象你整个HTML页面也好，一个form表单也好，图片也好，一切都可以变成一块一块的在看效果之前先检查一个这个属性的浏览器兼容情况，如下图：IE是完全不支持，尽量使用webkit内核，需要加上内核前缀-webkit- 好了，接下来就是栗子了，整片文章多图~下面是一个资源管理器的静态页面让我们对其简单的剪切下变成了一个三角形，简单的一句话代码-webkit-clip-path: polygon(0 0,750px 0,750px 500px);利用polygon多边形给出了三个点，画了一个三角形，也就是将整个图切割成了一个三角形给多了的点的话就可以生成各种形状，比如四边形，五角星，六边形等等……目前来说没有什么亮点，但是如果clip-path里面的数值变化可以触发transition的话那瞬间就不一样了所以关于clip-path的大部分动画都是这样的，我给出一个简单的例子本身效果是毫无卡顿感的，因为录制成gif希望文件较小所以帧间隔较大，显得比较卡由于clip-path剪切出来的部分和正常的DOM节点其实是一样一样的，那么很多关于DOM节点的操作也可以给它加上，比如……3D动画！之前的长方形变成了一个三角形，如果是由一个长方形变成 ...继续阅读 (22)

语法void expression描述这个操作符允许插入一个计算结果等效于undefined的表达式。void操作符经常仅仅是用来获得undefined值，比如经常使用到的“void(0)”(这等效于“void 0”)。快速调用函数表达式但使用一个快速调用函数表达式，void可以用来强制将函数关键语作为一个表达式来使用，而不是一个声明。void function iife() { var bar = function () {}; var baz = function () {}; var foo = function () { bar(); baz(); }; var biz = function () {}; }Javascript URIs当浏览其遇到一个javascript:URI，它会运算带有URI的代码，然后将计算结果替换当前页面的内容，除非它的返回值是undefined。void操作符可以被用于返回undefined。Click here to do nothingClick here for green background然而，值得注意的是，相对其他方案来说，javascript:伪协议并不被推荐作为句柄使用。规范Specification StatusECMAScript 1st Edi ...继续阅读 (15)

If it is too strong, then you are too weak.就算是背景吧随着ES2015的到来，JavaScript引进了许多新特性，很多很强大的特性完全可以弥补JS本身语法上的弱点，比如让很多初次尝试JS的程序员感到不习惯的变量提升问题、没有块级作用域问题等问题。strong modeES5增加了strict mode，现在V8又实现了一种新的模式——strong mode。strong mode是strict mode的升级版，在语法要求上更严格了，同时正因为这些严格的要求，让开发者得以规避语言本身一些糟粕或者让人困惑的地方。开启strong mode跟开启strict一样，js文件第一行或者function第一行加上'use strong';，使用–strong_mode标志位，需要Chrome Cancry或者iojs v2.0以及上。!!!注意了：如果iojs使用–use_strong标志位，将开启全局strong，不管代码里有没有’use strong;’，一律当作strong mode运行，因此很有可能伤及nodejs本身的模块和第三方不支持strong mode的模块，同样的–use_strict也是全局开启strict模式，都请慎用。strong mode有哪些改变下面将涉及到一 ...继续阅读 (19)

兴趣部落页面中，为了加强下拉刷新的体验效果，我们用web模拟了ios下手Q下拉刷新时的水滴效果，实现效果如下。页面开发已经很久，今天写这篇来总结一下吧。实现原理这里分为几个部分实现的关键在于水滴的绘制部分，考虑到尺寸特别小，这里我们使用canvas来进行绘制为什么是canvas首先用CSS3来做的话会非常麻烦，很多东西不能直接控制，并且涉及到动画，所以基本不用考虑，SVG的话也是不错的选择，就是控制也不是很方便，Canvas就性能和控制性上都比较高，所以最终选择了Canvas来做关键帧的绘制。水滴的绘制如果仔细观查水滴是由三部分组成，两个半圆加中间连接线，如果两个半圆的端点用直线连起来的话，看起来过渡会很生硬，如下所示所以我们要选择一个好一点的曲线来连接两个半圆。但实际上，水滴的绘制可以是完全用贝塞尔曲线绘制的鉴于canvas使用三次贝塞尔曲线绘制比较复杂一点（其实也还好，三次贝塞尔曲线要求两个控制点，控制点选择坚直就好了，具体没有尝试，这可能是一个优化点），所以考虑用二次的贝塞尔曲线来连接两个半圆，所以问题变成是如何选择二次贝塞尔曲线的控制点二次贝塞尔曲线二次贝塞尔曲线的canvas Api大家可以在网上搜到JavaScript 语法：context.quadraticCurveTo(cpx,cpy,x,y);下面有一个动画图更能反映这个曲线的绘制过程控制点的选择其实也有很多种， ...继续阅读 (46)

之前写过两篇文章，分别是《前端抢后端饭碗 — Node.js + Socket.io 制作简易聊天室》和《koa + socket.io 制作简易聊天室》，实质上都是利用了浏览器的websocket属性进去前后端的消息交流。今天我们要介绍另外一种比较新但更为简洁的消息传输方式，eventsource。下面是关于eventsource的浏览器支持情况。除了IE和Opera Mini之后，其它浏览器的支持情况良好。除了浏览器的兼容性问题之外，eventsource其实 写起来更为简洁方便。 首先是前端的代码：var evtSource = new EventSource("xxxxxxxxxx"); evtSource.onmessage = function(e) { var res = JSON.parse(e.data); // 其它操作 }前端代码只需要通过onmessage事件就可以获得后台传过来的数据。或者，可以监听其它的事件，如下：evtSource.addEventListener("ping", function(e) { //其它操作 }, false);至于后台的代码，网上流传是大部份是php的版本。甚至连MDN上的都是。我们AlloyTeam的iPresst则使用了koajs开发，因此也使用js开发我们的消息系统。将status设为200是必 ...继续阅读 (48)

为什么要使用数据结构和算法（程序=数据结构+算法）数据结构是对在计算机内存中（有时在磁盘中）的数据的一种安排。包括数组、链表、栈、二叉树、哈希表等。算法是对这些结构中的数据进行各种处理。比如，查找一条特殊的数据项或对数据进行排序。举一个简单的索引卡的存储问题，每张卡片上写有某人的姓名、电话、住址等信息，可以想象成一本地址薄，那么当我们想要用计算机来处理的时候，问题来了：如何在计算机内存中安放数据？所用算法适用于100张卡片，很好，那1000000张呢？所用算法能够快速插入和删除新的卡片吗？能够快速查找某一张卡片吗？如何将卡片按照字母进行排序呢？事实上，大多数程序比地址簿要复杂得多，想象一下航班预订系统的数据库，存储了旅客和航班的各种信息，需要许多数据结构组成。如果您很清楚这些问题，那么请您对我的博文给出宝贵意见，如果不清楚，那么在我的博文中可以给您一些适当的指引。随着NodeJs技术的发展，可以在服务器端使用javascript，控制MongoDB进行持久化数据存储。这就需要一些复杂的数据结构和算法来提高程序的性能，仅仅使用数组和for循环来处理数据是远远不够的。数据结构概述数据结构优点缺点数组插入快，如果知道下标，可以非常快的存取查找慢，删除慢，大小固定有序数组比无序数组查找快删除和插入慢，大小固定栈提供“后进先出”的存取方式存取其他项很慢队列提供“先进先出”的存取方式存取其他项 ...继续阅读 (18)

手机上的环境传感器，一般包括气压传感器、温度传感器、湿度传感器、光传感器、声音传感器和距离传感器等。气压传感器能通过气压测量，判断手机当前位置的海拔高度，能提高GPS定位的精度，在三星Galaxy Nexus上有配备；温度传感器一方面用来测量气温，判断当前环境是否舒适，一方面也能监测手机内部温度是否异常；而比较普遍的是光传感器和距离传感器，对智能手机来说几乎是标配，并且一般设计位于手机正面上方听筒附近位置。N.1.1 距离传感器和环境光传感器[图N.1.1智能手机距离/光感应器位置]距离传感器由一个红外LED灯和红外辐射光线探测器构成。距离传感器位于手机的听筒附近的主要原因是，当手机靠近耳朵时，系统通过距离传感器知道用户在通电话，然后会关闭显示屏，防止用户因误操作影响通话。距离传感器利用“飞行时间法”的原理来检测与物体之间距离，它通过发射特别短的光脉冲，由被物体反射回来的时间计算而得。手机的光传感器，即环境光传感器，能感知设备周围光线情况。手机操作系统利用光线传感器的数据，自动调节显示屏亮度————当环境亮度高时，显示屏亮度会相应调高；当环境亮度低时，显示屏亮度也会相应调低。自动亮度一方面保证了手机在不同环境中的屏幕阅读体验，一方面降低了电量损耗，最大限度地延长设备工作时间。 N.1.2 Proximity APIProximity API是W3C规范中关于距离传感器的一个独立AP ...继续阅读 (23)

1 mvvm 学习1.1 实现原理mvvm类框架的实现原理不复杂，大致如下：模板分析得到依赖的属性通过某种变动监测手段监测这些依赖的属性当属性变动的时候，触发相应的directive的处理逻辑即可实际上，directive的处理逻辑不一定是对view进行操作，比如上报。但是，在mv的思想下，建议对view的操作都集中在directive里实现从最核心上看，mv思想仅仅是一个观察者模式的具体应用于延展而已1.2 核心技术点1.2.1 模板分析模板分析是比较基础的，凡是和view相关的基本都会涉及模板，这是原始资料，这里的关键点是模板来源的问题，实际上，它应该可以是任何字符串这里暗示了框架需要一个模板解析器，不管这个解析器复杂还是简单，它都处于一个模式：【输入 –> 模板引擎 –> 输出】于是，mvvm的模板解析器特点如下：输入：任何符合规则的字符串输出：需要监听的data.attr，directive，filter在设计一个框架的时候，如果想要有更好的可扩展性，则输入应该足够灵活，从来源上来说，模板可以是someDomHere.html()，也可以是动态输入，那就更有可适用性；从内容上来说，如果引擎可以识别更高级的语法，那就更有功能性输出应该足够收敛，收敛的意思是有限并规则，像mvvm框架，最后出来的只是directive和filter，具体的处理都集中在这两 ...继续阅读 (22)

1 mvvm 学习1.1 实现原理mvvm类框架的实现原理不复杂，大致如下：模板分析得到依赖的属性通过某种变动监测手段监测这些依赖的属性当属性变动的时候，触发相应的directive的处理逻辑即可实际上，directive的处理逻辑不一定是对view进行操作，比如上报。但是，在mv的思想下，建议对view的操作都集中在directive里实现从最核心上看，mv思想仅仅是一个观察者模式的具体应用于延展而已1.2 核心技术点1.2.1 模板分析模板分析是比较基础的，凡是和view相关的基本都会涉及模板，这是原始资料，这里的关键点是模板来源的问题，实际上，它应该可以是任何字符串这里暗示了框架需要一个模板解析器，不管这个解析器复杂还是简单，它都处于一个模式：【输入 –> 模板引擎 –> 输出】于是，mvvm的模板解析器特点如下：输入：任何符合规则的字符串输出：需要监听的data.attr，directive，filter在设计一个框架的时候，如果想要有更好的可扩展性，则输入应该足够灵活，从来源上来说，模板可以是someDomHere.html()，也可以是动态输入，那就更有可适用性；从内容上来说，如果引擎可以识别更高级的语法，那就更有功能性输出应该足够收敛，收敛的意思是有限并规则，像mvvm框架，最后出来的只是directive和filter，具体的处理都集中在这两 ...继续阅读 (70)

一般来说，有重构的团队，工作流程是这样的：设计师出稿 > 重构转静态页面 > jser拉取数据实现交互等 …这样我们总是有静态页面在备份的，下次遇到修改什么的或者换一个人，还是可以由这个简单的静态页面熟悉下html结构。而没有重构或一个人一条龙服务的，那就是：设计师出稿 > 边写页面边拉取数据实现交互…这种模式下，是不存在静态页面备份的，如果碰到修改什么或者换人，那看到的直接就是源代码中的各种逻辑判断，如果是你自己写的代码那恭喜你，如果不是的话要不就连猜带蒙要不就咬紧牙关啃吧，当然最后还是免不了各种bug。最近因为改版一个模块，所以想去改善下这种方式，经过各种弯路，最后选择在scss文件中注释html结构。因为scss是按模块组织文件的，一个模块一个scss文件，所以这是非常合适的。以腾讯课堂课程卡片模块为例：可以看出这个模块存在几种逻辑判断，每种都有些小差异，如果另外一个地方要用到这个卡片或者略做修改，你要从线上扒html结构的话，要想扒出个齐全的逻辑还是比较困难的，而如果让你去阅读源码，里面各种判断输出也够头大的。下面为我在scss文件中注释的结构：是不是结构清晰明了，各种逻辑判断一目了然简单说下该注释方法：以emmet书写方法为骨架()表示特殊化追加的class，[]表示需要的属性，｛｝表示标签内的文本内容单行判断采用单行注释法，以if开头多行判断采用if,else,end ...继续阅读 (18)

一般来说，有重构的团队，工作流程是这样的：设计师出稿 > 重构转静态页面 > jser拉取数据实现交互等 …这样我们总是有静态页面在备份的，下次遇到修改什么的或者换一个人，还是可以由这个简单的静态页面熟悉下html结构。而没有重构或一个人一条龙服务的，那就是：设计师出稿 > 边写页面边拉取数据实现交互…这种模式下，是不存在静态页面备份的，如果碰到修改什么或者换人，那看到的直接就是源代码中的各种逻辑判断，如果是你自己写的代码那恭喜你，如果不是的话要不就连猜带蒙要不就咬紧牙关啃吧，当然最后还是免不了各种bug。最近因为改版一个模块，所以想去改善下这种方式，经过各种弯路，最后选择在scss文件中注释html结构。因为scss是按模块组织文件的，一个模块一个scss文件，所以这是非常合适的。以腾讯课堂课程卡片模块为例：可以看出这个模块存在几种逻辑判断，每种都有些小差异，如果另外一个地方要用到这个卡片或者略做修改，你要从线上扒html结构的话，要想扒出个齐全的逻辑还是比较困难的，而如果让你去阅读源码，里面各种判断输出也够头大的。下面为我在scss文件中注释的结构：是不是结构清晰明了，各种逻辑判断一目了然简单说下该注释方法：以emmet书写方法为骨架()表示特殊化追加的class，[]表示需要的属性，｛｝表示标签内的文本内容单行判断采用单行注释法，以if开头多行判断采用if,else,end ...继续阅读 (20)

lambda.js的由来作为一个当耐特程序员，对lambda一定不陌生。随着当耐特版本的更新迭代，C#也由委托==〉匿名委托==〉lambda表达式。由于javascript语言的约束，没有提供相应的lambda的机制，所以就有了lambda.js，让广大jser也可以(a,b)=>a.xx==”yyy”&&b;>11一把！Query Operator而lambda最常用的地方就是Query Operator。比如下面一些C# code：int[] numbers = { 5, 4, 1, 3, 9, 8, 6, 7, 2, 0 }; int oddNumbers = numbers.Count(n => n % 2 == 1);对应的javascript code(不使用lambda.js)var numbers = [ 5, 4, 1, 3, 9, 8, 6, 7, 2, 0 ]; var oddNumbers = _(numbers).count(function (item) { return item % 2 === 1 });使用lambda.js之后var numbers = [5, 4, 1, 3, 9, 8, 6, 7, 2, 0]; var oddNumbers = _(numbers).count(_("a=>a%2===1"));lambda.js当然提供了 ...继续阅读 (20)

ionic是最近一个很流行的Hybird移动开发解决方案，个人兴趣研究了一下，还是不错的https://github.com/driftyco/ionic1.环境准备安装nodejs安装cordova和ionic$npminstall -g cordova ionic或者下载github上项目代码进行构建(不推荐)安装java JDKjdk是Java运行开发环境，按android开发必须的开发的环境JAVA_HOME D:/program file/java/jdk_1.7.34/ path D:/program file/java/jdk_1.7.34/bin classpath C:/apache-ant-1.8.1/lib测试方法：java -version安装Apache antApache Ant,是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具，大多用于Java环境中的软件开发。由Apache软件基金会所提供。这里用到的的是用于android签名证书等打包(android开发过程中ide使用gradle配置打包，早期都是用的ant打包，这里使用的方法比较原始)http://ant.apache.org/bindownload.cgi上下载最新版apache-bin(可选择安装型或压缩包型)，然后添加系统环境变量ANT_HOME C:/ apac ...继续阅读 (25)

ionic是最近一个很流行的Hybird移动开发解决方案，个人兴趣研究了一下，还是不错的https://github.com/driftyco/ionic1.环境准备安装nodejs安装cordova和ionic$npminstall -g cordova ionic或者下载github上项目代码进行构建(不推荐)安装java JDKjdk是Java运行开发环境，按android开发必须的开发的环境JAVA_HOME D:/program file/java/jdk_1.7.34/ path D:/program file/java/jdk_1.7.34/bin classpath C:/apache-ant-1.8.1/lib测试方法：java -version安装Apache antApache Ant,是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具，大多用于Java环境中的软件开发。由Apache软件基金会所提供。这里用到的的是用于android签名证书等打包(android开发过程中ide使用gradle配置打包，早期都是用的ant打包，这里使用的方法比较原始)http://ant.apache.org/bindownload.cgi上下载最新版apache-bin(可选择安装型或压缩包型)，然后添加系统环境变量ANT_HOME C:/ apac ...继续阅读 (28)

1.环境准备安装nodejs安装nativescript$npminstall -g nativescript或者下载github上项目代码进行构建(不推荐)安装java JDKjdk是Java运行开发环境，按android开发必须的开发的环境JAVA_HOME D:/program file/java/jdk_1.7.34/ path D:/program file/java/jdk_1.7.34/bin classpath D:/program file/java/jdk_1.7.34/lib测试方法：java -version安装Apache antApache Ant,是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具，大多用于Java环境中的软件开发。由Apache软件基金会所提供。这里用到的的是用于android签名证书等打包(android开发过程中ide使用gradle配置打包，早期都是用的ant打包，这里使用的方法比较原始)http://ant.apache.org/bindownload.cgi上下载最新版apache-bin(可选择安装型或压缩包型)，然后添加系统环境变量ANT_HOME C:/ apache-ant-1.9.5 path C:/ apache-ant-1.9.5/bin classpa ...继续阅读 (21)

1.环境准备安装nodejs安装nativescript$npminstall -g nativescript或者下载github上项目代码进行构建(不推荐)安装java JDKjdk是Java运行开发环境，按android开发必须的开发的环境JAVA_HOME D:/program file/java/jdk_1.7.34/ path D:/program file/java/jdk_1.7.34/bin classpath D:/program file/java/jdk_1.7.34/lib测试方法：java -version安装Apache antApache Ant,是一个将软件编译、测试、部署等步骤联系在一起加以自动化的一个工具，大多用于Java环境中的软件开发。由Apache软件基金会所提供。这里用到的的是用于android签名证书等打包(android开发过程中ide使用gradle配置打包，早期都是用的ant打包，这里使用的方法比较原始)http://ant.apache.org/bindownload.cgi上下载最新版apache-bin(可选择安装型或压缩包型)，然后添加系统环境变量ANT_HOME C:/ apache-ant-1.9.5 path C:/ apache-ant-1.9.5/bin classpa ...继续阅读 (21)

原文Sean Silva 给我发来一封信：我最近在浏览你 npm.js 项目里的代码（代码链接），很喜欢你的代码风格： 你把逗号放在行首，与上一行 var 中的 r 对齐，或者与上一行的[和{对齐。但是我不是很敢学的你风格，因为很多 JS 教材都说 JS 解释器的自动加分号机制会对代码有影来自: franck ...继续阅读 (36)

JPEG有两种存储格式：baseline 和 progressive。Baseline JPEG 会在数据可用时，一行一行自上而下显示。Progressive JPEG会先显示模糊图片，然后逐渐清晰。浏览器渲染Progressive JPEG在所有浏览器都会显示，这里的关注点是如何渲染。Chrome + Firefox + IE9 下 Progressive JPEG 加载很快。对比用户体验Progresssive JPEG 用户体验更好，用户从开始就知道图片长什么样子，对于弱网用户来说，尤其必要。文件大小一般，Progressive 比 Baseline 格式小几KB。参考这里实验随机从网上下载图片，剔除4xx 和 5xx 错误后，剩余10360张图片，分别转化成 Baseline 格式 和 Progressive 格式。结论大于 10K 的图片，Progressive 格式更小 （in 94% of the cases）。小于 10K 的图片，Baseline格式更小（75%）。实际测试结论（这里受限于机器性能，样本不大）：浏览器支持情况：即便在浏览器不支持的情况下，由于 Progressive 格式的图片比原图小，加载也会更快。性能Progressive 比较耗CPU， 对于移动设备来讲，这是一个顾虑，在低端机型上面可能不会支持Progressive，但是随着硬件升级。这个问 ...继续阅读 (29)

Meta标签：这个想必大家都知道，当页面在手机上显示时，增加这个meta可以让页面强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。PS：在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的”隐藏滚动条”，是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。这两个属性分别对ios上自动识别电话和android上自动识别邮箱做了限制。获取滚动条的值：window.scrollY window.scrollX桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？就是上面两个属性，但是事实证明android也支持这属性，所以 ...继续阅读 (155)

相信volley绝大部分做android的人已经知道了，关于volley的使用网上也是一抓一大把，都是说volley如何如何好用，下面分享下自己在使用volley过程中踩过的坑。volley好用的一个原因是封装的api看起来也比较直接，但是其回调的api做的是一般般，其中有一个JsonObjectRequest类，网上的使用说明也一大把，基本上都是最简单的情形：Get请求示例：RequestQueue queue = Volley.newRequestQueue(this); String url = "http://m.weather.com.cn/data/101201401.html"; JsonObjectRequest objRequest = new JsonObjectRequest(url, null, new Response.Listener() { @Override public void onResponse(JSONObject obj) { System.out.println("----------:" + obj); } }, new Response.ErrorListener() { @ ...继续阅读 (33)

前端测试，或者UI测试一直是业界一大难题。最近Q.js使用Karma作为测试任务管理工具，本文在回顾前端测试方案的同时，也分析下为什么Q.js选用Karma而不是其他测试框架。像素级全站对比曾今有一批人做过这样的UI测试，即最终页面图像是否符合预期，通过图片差异对比来找出可能的问题。如图所示，所谓像素级站点对比，即利用截屏图像前后对比来找出，站点前后差异，从而发现问题。Q: 为什么需要这种测试呢？A: CSS容易被破坏，在大型响应式重构案例中，像素级全站对比是一个比较好的测试方案。目前常用的两大工具：BackstopJSPahntomCSS录制型测试比较经典的有Selenium，本质上提供了编码型测试，但是因为提供了录制功能，所以广泛被用于录制测试。编码测试即通过编写代码来测试UI，但由于各种兼容性问题，这里出现了各种方案。JsTestDriver式即启用一个服务器，然后让测试浏览器链接该服务器，便可自动运行测试任务，下面是BusterJS中的一个演示：启动服务器打开测试浏览器，并连上服务器，按下按钮使得服务器捕获该浏览器在服务器发起一次测试，则每个被捕获的浏览器都会跑一次测试用例静态测试即通常的打开一个页面进行测试，下面是Mocha的静态测试页面例子：无头浏览器测试即通过无头浏览器，如：PhantomJS、SlimerJS来进行测试持续集成测试这个就需要看持续集成系统能提供什么浏 ...继续阅读 (26)

前端测试，或者UI测试一直是业界一大难题。最近Q.js使用Karma作为测试任务管理工具，本文在回顾前端测试方案的同时，也分析下为什么Q.js选用Karma而不是其他测试框架。像素级全站对比曾今有一批人做过这样的UI测试，即最终页面图像是否符合预期，通过图片差异对比来找出可能的问题。如图所示，所谓像素级站点对比，即利用截屏图像前后对比来找出，站点前后差异，从而发现问题。Q: 为什么需要这种测试呢？A: CSS容易被破坏，在大型响应式重构案例中，像素级全站对比是一个比较好的测试方案。目前常用的两大工具：BackstopJSPahntomCSS录制型测试比较经典的有Selenium，本质上提供了编码型测试，但是因为提供了录制功能，所以广泛被用于录制测试。编码测试即通过编写代码来测试UI，但由于各种兼容性问题，这里出现了各种方案。JsTestDriver式即启用一个服务器，然后让测试浏览器链接该服务器，便可自动运行测试任务，下面是BusterJS中的一个演示：启动服务器打开测试浏览器，并连上服务器，按下按钮使得服务器捕获该浏览器在服务器发起一次测试，则每个被捕获的浏览器都会跑一次测试用例静态测试即通常的打开一个页面进行测试，下面是Mocha的静态测试页面例子：无头浏览器测试即通过无头浏览器，如：PhantomJS、SlimerJS来进行测试持续集成测试这个就需要看持续集成系统能提供什么浏 ...继续阅读 (15)