在iOS中，需要调起一个app可以使用scheme协议，这是iOS原生支持的，并且因为iOS系统中都不能使用自己的浏览器内核，所以所有的浏览器都支持，这跟android生态不一样，android是可以自己搞内核的，但是iOS不行。

在iOS中提供了两种在浏览器中打开APP的方法：Smart App Banner和scheme协议。

Smart App Banner

即通过一个meta 标签，在标签上带上app的信息，和打开后的行为，例如：app-id之类的，代码形如：

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

具体可以看下开发文档：https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

今天Smart APP Banner不是我们的主角，我们说的是scheme

使用scheme URL来打开iOS APP

scheme类似自定义url协议，我们可以通过自定义的协议来打开自己的应用，形如：

myapplink://
# 例如 facebook的
fb://
# itunes的
itms-apps://
# 还有短信也是类似的
sms://

如果要打开一个app，最简单的方式是通过一个链接，如我们在html中这样写：

<a href="myapplink://">打开我的app</a>

当用户点击链接的时候就可以打开对应的app。

绑定click事件

但是实际中我们更多的情况是绑定事件，比如做个弹层啥的，不能一味的用a标签啊，所以可以通过两种方式来解决：location.href和iframe。

• location.href，简单，但是容易出现问题，比如没有安装可能会跳转啦。
• iframe，比较复杂，需要创建一个iframe，然后把scheme扔给src

iframe的方式是开发中常用的，但是他也有一些问题：

• 我们没很好的方式来判断是否打开了app
• 会引起history变化
• 因为引起history变化，所以一些webview会有问题，比如：我查查，打开一个页面，如果有iframe，选择在safari中打开，实际打开的是iframe的页面
• 如果页面暴漏给了android系统，那么也会出现页面打不开，之类的问题
• 如果没有app，调起不成功，ios的safari会自己弹出一个对话框：打不开网址之类的提示

所以现在的问题是：如何知道iframe已经打开了某个app，即解决iframe打开app回调

在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。

1. Weinre移动调试
2. DOM 断点
3. debugger断点
4. native方法hook
5. 远程映射本地调试

Weinre

在移动上面开发调试是很复杂的，所以就有了weinre。安装weinre可以实现pc来调试手机页面，所以对于移动开发调试是很重要的哦~

安装weinre

weinre可以通过npm来安装：

npm install -g weinre

安装完之后，可执行下面的命令来启动：

weinre --httpPort 8080 --boundHost -all-

最近看老外的ppt，看到了句话：

Use tools. not rules!

所以今天介绍个利器：liveStyle，liveStyle是Emmet团队开发的，Emmet就是大名鼎鼎的zen coding啊。

其实在订阅的weekly里面早就介绍过livestyle，真正用起来还是看了上面老外的这个ppt，试用了下liveStyle，结果一下子就喜欢上了，如果你开发遇见了下面的问题就可以使用liveStyle了：

1. 在chrome DevTools中修改了样式，想同步到css文件中
2. 修改了css文件，不想刷新chrome，就可以实时看到效果

嗯，livestyle解决了这两个问题，提高了开发效率！

livestyle安装

安装sublime text的liveStyle插件

在package control搜索livestyle就可以了，或者去官方下载

安装chrome扩展

通过这个网址，安装livestyle，如果打不开，可能需要准备梯子，你懂的~ 感谢裆~

安装后，在chrome中按F12打开DevTools就可以看到在console后面多了个LiveStyle面板。

使用livestyle

1. 用sublime text 打开一个css文件，例如a.css
2. 随便打开个网址，然后F12 切换到LiveStyle
3. 选中Enable LiveStyle for current page，这时会把页面的所有css都列出来
4. 选择一个需要替换的css，在下拉框中选择要替换掉的sublime打开的css文件，例如：a.css；或者点击add file按钮
5. 这时候在sublime中修改a.css，就可以在chrome中实时看到效果；在chrome修改样式，也可以将修改同步到a.css文件中

fis的wiki整理的不是很好，结合最近几天的体会，整理了FIS常用的功能，加上自己对fis的理解，整理了这篇文章

FIS 和 FISP

fis是百度的开源的前端开发解决方案，另外还有个fisp（即fis-plus，前身是fis-pc），fisp可以说是百度业务定制版，主要集成（并扩展）了smarty模板，本地调试等功能。

fisp是在fis基础上做的一层封装，订制了一些 config 配置，所以一些fis的配置，在fisp里面是会自动忽略，不会生效的，比如说jswraper配置。

FIS原理

fis其实是一个 半成品 ，只有经过更多的包装（例如插件）才能发挥最大的作用，fis的核心是生成的 map.json ，很多想法可以通过 map.json 这个表来实现。比如我自己订制的require inline方式。

fisp结合 map.json 和 FISSource.class.php ，对smarty语法进行了扩展，扩展出来了 html、widget、require、script等smarty自定义标签。

想了解详情的童鞋，可以直接看下fisp的 plugin 。

FISP环境部署

安装

• 安装node环境
• 配置java环境，并放入环境变量
• 安装php环境，并且将php.exe放进环境变量

然后进入cmd，依次执行：

#安装fis-plus
$ npm install -g fis-plus
#安装fis-plus调试环境
$ fisp server install pc
# 启动fisp
$ fisp server start
# 这时应该会自动打开系统默认浏览器访问127.0.0.1
# 查看www路径
$ fisp server open
# 清理www路径，慎用，会清理掉之前安装的调试环境
$ fisp server clean

Gruntjs是前端项目构建工具，基于node的命令行工具。很多公司或者js项目都是用gruntjs来搭建，例如jQuery，twitter，Qunit等。主要功能有：

• 合并文件
• 压缩html/js/css/图片文件
• 语法检测
• 单元测试（基于Qunit）
• watch功能

相对于Ant的打包工具，grunt更加灵活，语法采用json，比xml语法更加简洁，作为前端工程师可能更喜欢写json。

GruntJS的安装

Grunt是基于nodejs的，所以安装GruntJS之前，需要保证你的电脑有nodejs环境，node环境比之前安装简单多了，现在windows平台只需要下载node安装程序，一路next就可以了。

livereload是一个web开发辅助工具，当我们修改完html、css和js的时候会自动刷新浏览器，解放码农的双手。这样在双屏切图、写js代码的时候会提高很多效率。livereload有很多版本，比如基于ruby的版本，我们今天介绍的是node+grunt+chrome插件一体化方案。

我们使用的这个livereload的基本原理是试用node开启一个websocket服务，并且检测文件变化，浏览器打开一个页面时候，引入固定的livereload.js（chrome插件会帮忙加上）会建立ws请求，当node检测到文件变化，则自动推送消息给浏览器，实现刷新。

livereload环境搭建

• nodejs安装
• grunt安装
• grunt-contrib-watch：npm install grunt-contrib-watch –save-dev
• grunt-livereload：npm install grunt-livereload –save-dev
• chrome插件：安装

昨天看了阮一峰老师的文章：《相似图片搜索原理》，于是把直方图和向量那块算法用js实现了一下，

源码如下：

function getHistogram(imageData) {
    var arr = [];
    for (var i = 0; i < 64; i++) {
        arr[i] = 0;
    }
    var data = imageData.data;
    var pow4 = Math.pow(4, 2);
    for (var i = 0, len = data.length; i < len; i += 4) {
        var red = (data[i] / 64) | 0;
        var green = (data[i + 1] / 64) | 0;
        var blue = (data[i + 2] / 64) | 0;
        var index = red * pow4 + green * 4 + blue;
        arr[index]++;
    }

    return arr;
}

function cosine(arr1, arr2) {
    var axb = 0,
        a = 0,
        b = 0;
    for (var i = 0, len = arr1.length; i < len; i++) {
        axb += arr1[i] * arr2[i];
        a += arr1[i] * arr1[i];
        b += arr2[i] * arr2[i];
    }
    return axb / (Math.sqrt(a) * Math.sqrt(b));
}
function gray(imgData) {
    var data = imgData.data;
    for (var i = 0, len = data.length; i < len; i += 4) {
        var gray = parseInt((data[i] + data[i + 1] + data[i + 2]) / 3);
        data[i + 2] = data[i + 1] = data[i] = gray;
    }
    return imgData;
}

有个问题，假如图片是灰色的跟原图进行比较，那么要比较相似度，需要将图片都转成灰色的，即使用上面代码的gray函数来处理

这是一个很基础的问题，但是我们往往经常做错。

当一个数组需要清空的时候，很多人使用下面的方法：

a = [];

我们知道javascript变量存储方式分为引用类型和直接量。数组属于对象，即引用类型，引用的是变量指针地址，之所以这样设计也是为了节省内存。

再说到上面的请空数组的方式，如果采用直接赋值一个新数组的方式，那么之前引用的数组可能不会被释放（有其他的引用），例如下面的代码：

var a = [2,3];
var b = a;
a = [];
console.log(b);

这时候a和b就不是同一个数组了，清空了a而b还是指到之前的引用地址，除非你是故意的，否则这将会有隐患。

所以最佳的请空数组方式是：将length设置为0，即：

a.length = 0;

在《javascript canvas图片像素》中提到了类型数组（Typed Array），javascript这是一种快速操作二进制数据的解决方案。

随着web发展和html5的推进，javascript来处理音视频、二进制文件和网络协议等都成为了可能，这时候原生的数组Array已经不能够满足需求，需要一种快速操作二进制流的东东产生，于是ArrayBuffer类型和Typed Array诞生了。

类型数组介绍

类型化数组类型表示可编制索引和操纵的ArrayBuffer对象的各种识图。所有数组类型的长度固定不变。如下表所示：

html5 canvas图像转换成数组

html5的canvas可以进行图片处理，图片是由像素组成的。我们知道canvas有方法getImageData，返回的对象中可以取出，image的data 数组（类似数组的Type Array类型数组，Uint8ClampedArray）。

假设canvas宽高是500*400，那么应该有200000个像素点，而通过getImageData().data获取的data数组的length是800000。

我们还知道rgba表示颜色的方法：

• r=red
• g=green
• b=blue
• a=alpha

即红绿蓝三原色和透明值。

所以这个data数组是每四个数组值代表一个像素点。这样一来，一个图像就转化成了数据表示的数组。如下面的代码：

var canvas = document.getElementById('canvas');
var ctxt = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
    ctxt.drawImage(img, 0, 0);
    var data = ctxt.getImageData(0, 0, 480, 480).data;
    console.log(data, data.toString());
}
img.src = 'img/pic.jpg';

图像数组的遍历

如上面的代码，我们可以看到数组data就是图片转换成的数组，那么遍历这个数组就可以取得图片的像素点内容：

var data = ctxt.getImageData(0, 0, 480, 480).data;
for(var i =0,len = data.length; i<len;i+=4){
    var red = data[i],
    green = data[i+1],
    blue = data[i+2],
    alpha = data[i+3];

}