In 未分类 on 2016年03月04日 by TAT.felix view: 20,484

11

介绍这个工具前不得不先介绍一下积木系统。

积木系统是 imweb 团队出品、为产品运营而生的一套活动页面发布系统，详细介绍见 PPT

简单可以这么理解它的理念:

一个页面 = 一个模板 + 多个组件
一个组件 = 一份代码 + 一份数据
一个组件开发一次，复用多次
一个页面使用多个组件拼装后，实时预览、快速发布上线

此前在阿里实习的时候也接触过一个叫 TMS（淘宝内容管理系统）的系统, 专门用于快速搭建电商运营活动页面.

这种系统可统一理解为运营活动页面发布系统。

初探 performance – 监控网页与程序性能

In 未分类 on 2015年09月03日 by TAT.felix view: 43,012

13

使用 window.performance 提供了一组精确的数据，经过简单的计算就能得出一些网页性能数据。

配合上报一些客户端浏览器的设备类型等数据，就可以实现简单的统计啦！

额，先看下兼容性如何：http://caniuse.com/#feat=nav-timing

这篇文章中 Demo 的运行环境为最新的 Chrome 的控制台，如果你用的是其他浏览器，自查兼容性哈~

VPS 捣鼓小记

In 未分类 on 2015年08月23日 by TAT.felix view: 7,403

5

不作死就不会死，不捣鼓就不会活 -- via 菲利克斯· 肖恩莱特

什么是作死？作死就是不懂原理乱写代码，不懂环境乱配，不懂工具乱用，打掉一个 bug 再怀上一个 bug，伤元气瞎折腾。

什么是捣鼓？捣鼓和作死相反，在解决问题时力求寻因导果，既能解决问题，又能学到新知识拓展新视野。

在最近折腾 VPS 的时候，我就不断在作死，才捣鼓出了新乐趣，写下来和大家分享一下。

React 初探

In 未分类 on 2015年04月20日 by TAT.felix view: 19,316

22

React 简单介绍

先说 React 与 React Native

他们是真的亲戚，可不像 Java 和 Javascript 一样。

其实第一次看到 React 的语法我是拒绝的，因为这么丑的写法，你不能让我写我就写。

但当我发现 React Native 横空出世后，它学习一次到处运行的理念非常诱人。React Native 可以写出原生体验的 iOS/Android 应用？那不就多了一门装逼技能？所以我们调研小组试了一下，感觉 "Duang" 一下，很爽很舒服。写 React Native 需要两门基础技能：React 语法和 iOS 基础知识。

很爽很舒服，索性就研究一下，算是入门。了解之后发现，React 真是有另一番天地，值得学习。

接下来总结以下我对 React 的理解，分享给大家。

在浏览器端和服务器端下载并打包文件

In 未分类 on 2015年03月24日 by TAT.felix view: 9,181

5

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

假设我们有以下目录结构：

用户可能需要打包这个目录下的所有文件，或其中一些文件的组合（在定制组件的场景下）。

我们一般的做法是，提供一个页面，让用户进行选择，然后可以有两种做法：

1. 提交请求到服务器端，服务器对定制化的文件组合进行合并之后打包，返回给客户端进行下载。

2. 在客户端下载所需要的文件，自行进行合并之后打包，保存到本地。

在服务器端合并打包文件应该是比较常见的做法了，这里主要介绍一下浏览器端下载。

我们先来了解一下 Blob 对象。

一个 Blob 对象一种原生数据的封装，只读，可以用于文件操作。基于 Blob 对象实现的有 File 对象。

创建一个 Blob 对象很简单，使用构造函数：

1

2

3

4

5

6

7

8

9

10

11

// 参数 array 是 ArrayBuffer、ArrayBufferView、Blob、DOMString 对象的一种，或这些对象的混合。

// 参数 options 含两个属性：

var array = ['<div id="myId"><a href="http://alloyteam.com">Alloyteam</a></div>']

var options = {

type: '', // 默认为空，指定 array 内容的 MIME 类型

endings: 'transparent' // 默认为 'transparent', 指定遇到包含结束符 '/n' 的字符串如何写入

// 'native' 表示结束符转化为与当前用户的系统相关的字符表示，

// 'transparent' 表示结束符直接存储到 Blob 中，不做转换。

};

var myBlob = new Blob(array, options);

console.log(myBlob);

1

2

3

4

5

6

7

创建了一个 Blob 实例后，它具有两个属性和一个方法

- 两个属性：

- size - 大小，单位为字节

- type - MIME 类型，若构造时不指定则默认为空

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// DOMString 类型数据

var array = ['<div id="myId"><a href="http://alloyteam.com">Alloyteam</a></div>']

// 生成 Blob 对象并指定 MIME 类型

var myBlob = new Blob(array, {type: 'text/html'});

// 输出看看有啥

console.log(myBlob);

// 大小，单位为字节

var size = myBlob.size;

// MIME 类型，创建时不设置则为空

var type = myBlob.type;

console.log('size: ', size);

console.log('type: ', type);

1

2

3

4

5

6

<a href="http://www.alloyteam.com/wp-content/uploads/2015/03/c.png"><img class=</

AlloyTeam

AlloyTeam

使用 window.performance 提供了一组精确的数据，经过简单的计算就能得出一些网页性能数据。

React 简单介绍

先说 React 与 React Native