TAT.helondeng | AlloyTeam

BaselineJPEGvs.ProgressiveJPEG

In 未分类 on 2015年06月15日 by TAT.helondeng view: 1,037

JPEG 有两种存储格式：baseline 和 progressive。Baseline JPEG 会在数据可用时，一行一行自上而下显示。Progressive JPEG 会先显示模糊图片，然后逐渐清晰。

01-02_baseline_vs_progressive

Vue.js 简介

In 未分类 on 2015年05月24日 by TAT.helondeng view: 3,020

Vue.js 是一个基于 MVVM 模型的 web 库。通过双向数据绑定连接 View 和 Model 层。实际的 DOM 操作被封装成 Directives 和 Filters。

基本定义

每个 Vue 对象的实例是一个 ViewModel。创建方式：

var vue = new Vue({

el: view,

data: model

});

其中 vue.$el 用于管理 View 层上的 DOM 。而 vue.$data 用于管理 Model 层的数据，可以通过 vue.$data.property 访问 Model 层数据，也可以直接 vue.property 访问。

Hello World 入门

<h1>{{ title }}</h1>

<ul>

<li v-repeat='todo:todoList'>{{ todo | uppercase }}</li>

</ul>

</div>

// 对应 js

var demo = new Vue({

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 绑定处理函数（可以是表达式）。函数的第一个参数是 DOM Event 对象，该对象附带 targetVM 指向 DOM 对应的 ViewModel。

var vue = new Vue({

el: '#example',

data: {},

methods: {

clickHandler: function(e){

console.log(e.targetVM); // 指向vue对象，可以理解为this。

}

});

自定义指令

内置的指令不够用怎么办？想自定义数据变化对 DOM 的影响怎么破？
Vue.js 允许自定义全局指令，格式：

Vue.directive(id, {

bind: function(){

// 仅在初始化绑定元素时调用

update: function(newVal, oldVal){

// 初始化时调用一次，以后每次数据变化，就被调用

unbind: function(){

// 仅在指令解绑时被调用

}

});

同时，在指令函数中，提供了一些 this 上下文的公开属性（这里列举了几个常用的）：

el : 访问绑定的 DOM 元素，提供 View 层访问。
vm : 访问指令对应的上下文，ViewModel 对象，this.vm.$el = this.el
expression : 指令绑定的表达式，不包括参数和 filter
args : 参数

举个栗子。

Vue.directive('demo', {

acceptStatement: true,

bind: function(){

this.el.style.cssText = 'color: red; background: #666;';

update: function(newVal, oldVal){

this.el.innerHTML = 'name = ' + this.name + ' ' +

'arg = ' + this.arg + ' ' +

'expression = ' + this.expression + ' ';

console.log(this.vm.$data);

console.log(this.el === this.vm.$el);

}

});

var demo = new Vue({

el: '#example',

data: {

message: 'hello world!'

methods: {

onClick: function(){

// custom directive update will be called.

this.$data.message = 'hahaha!';

}

});

自定义过滤器

Vue.js 允许使用全局函数 Vue.filter() 定义过滤器，将 Model 数据输出到 View 层之前进行数据转化。

1 2	Vue.filter(id, <span class="keyword">function</span>(){});

双向过滤器允许 View 层数据（input 元素）变回写到 Model 层之前，进行转化，定义方式如下：

Vue.filter(id, {

read: function(val){},

write: function(newVal, oldVal){}

});

举个栗子：

{{ message }}

</div>

Vue.filter('twoWays', {

read: function(val){

return 'read ' + val;

write: function(newVal, oldVal){

console.log(newVal, oldVal);

return ov + ' write';

}

});

var demo = new Vue({

el: '#example',

data: {

message: 'hello'

}

});

总结

Vue.js 提供的核心是 MVVM 中的 VM，确保视图和数据的一致性。同时，借鉴了 Angular 中的 Directive 和 Filter 的概念，但是却简化了 API。

RosinVSJSConsole

In 未分类 on 2015年04月29日 by TAT.helondeng view: 732

Rosin 是一个 Fiddler 插件，协助开发者进行移动端页面开发调试。

特性

可配置的页面匹配规则
拦截 console
日志内容的存储，展示，过滤
脚本运行错误捕获

原理

首先在 fiddler 里面配置了匹配规则
访问的页面进过 fiddler 之后，匹配规则会生效，如命中，则在返回的内容中注入脚本。
脚本重写了 console 的各种方式（也监听了 onerror 事件）
将 console 打出的各种消息 push 到消息队列
队列达到阈值或者间隔的时间到，就将消息通过 xhr 发送到 http://__rosin__.qq.com
rosin 插件在 fiddler 中捕获上面的请求（并且隐藏了，所以看不到这个请求），将请求的 body 部分显示到面板上面
将 log 存储到本地 D:Program Files (x86)Fiddler2ScriptsRosinLog

add: function() {

Array.prototype.push.apply(this._queueArr, arguments);

// 定时发送消息

clock.start();

//队列达到阈值就触发上传

if (this._queueArr.length >= THRESHOLD) {

this._post(this._queueArr.splice(0, this._queueArr.length));

return;

}

Log 格式：

log

JSConsole

JSConsole 是一个 JS 命令行调试工具。

如何使用

在 http://jsconsole.com/中输入:listen 创建一个 session（主要是生成一个 GUID）
在页面中引入脚本

1 2	<script src="http://jsconsole.com/remote.js?FAE031CD-74A0-46D3-AE36-757BAB262BEA"></script>

原理

引入的 remote.js 脚本创建一个隐藏的 iframe，Url 指向了 http://jsconsole.com/remote.html，并且把上面的 GUID 带上
重写 console 中的方法，这里的问题是：如何把消息 push 到 jsconsole.com？
页面调用 console 等方法时，实际通过 postMessage 是向 iframe 发送了一条消息。