JavaScript 数据结构和算法简述——前言

In 未分类 on 2015年06月29日 by TAT.李强 view: 5,147

13

为什么要使用数据结构和算法（程序=数据结构+算法）

数据结构是对在计算机内存中（有时在磁盘中）的数据的一种安排。包括数组、链表、栈、二叉树、哈希表等。

算法是对这些结构中的数据进行各种处理。比如，查找一条特殊的数据项或对数据进行排序。

举一个简单的索引卡的存储问题，每张卡片上写有某人的姓名、电话、住址等信息，可以想象成一本地址薄，那么当我们想要用计算机来处理的时候，问题来了：

如何在计算机内存中安放数据？
所用算法适用于 100 张卡片，很好，那 1000000 张呢？
所用算法能够快速插入和删除新的卡片吗？
能够快速查找某一张卡片吗？
如何将卡片按照字母进行排序呢？

H5 页面的跨 webview 预拉取数据尝试

In 未分类 on 2015年06月01日 by TAT.Cson view: 7,150

14

对于传统的页面模型来说，数据的拉取+渲染模型如下：

在页面的 head 部分，使用 jsonp 预拉取 cgi 资源，然后在资源加载完成之后，检查预拉取的数据是否已经返回，如果已返回，则直接用该数据渲染（避免了先用缓存数据渲染再用 cgi 数据渲染导致的二次刷新），否则才用缓存数据渲染。

用 Object 字面量代替 switch

In 未分类 on 2015年05月31日 by TAT.mandyluo view: 5,984

10

有时候我们的代码有很多的条件判断，我们只能用 switch 语句来让代码更好看一点。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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 语句，代码会更直观简洁。

关于 Promise 内存泄漏的问题

In 未分类 on 2015年05月30日 by TAT.云中飞扬 view: 11,082

5

Promise

Promise 是 ES6 的新特性，在 ES6 之前各大浏览器、各种 polyfill 和各种 js 执行环境都针对 Promise 进行了自己的实现，不过实现上大同小异。

React Native 之 JSBridge

In 未分类 on 2015年05月10日 by TAT.simplehuang view: 18,115

4

React Native 综述：

在 React Native 中，JavaScript 跟 Object-C 均有一个对应的中间件负责交互，源码中称为 bridge，它们通过 callback 的形式进行传参，通过参数配置来触发 OC 的控件，从而达到以 JavaScript 来控制 Native 的目的。

React Native 的设计理念：既拥有 Native 的用户体验、又保留 React 的开发效率。

React Native 的口号：Learn Once,Write Anywhere.

复制粘贴的高级玩法

In 未分类 on 2015年04月26日 by TAT.老教授 view: 13,044

5

想做一个好用的在线编辑器，不管是地图编辑器、PPT 创作平台还是通过拖拽快速创建活动页面的编辑器等等，必然要给用户提供各种快捷的操作方法。如非常常用的复制粘贴功能。

举个例子，在 iPresst 创作平台，我们的作品在好几页都要用到同一张图片，总不能每次都点击上传一次图片吧？右键复制粘贴或者直接按快捷键无疑是最符合用户预期的操作方式，然而我们编辑器用到的元素一般比较特别，而且我们复制粘贴的时候经常要做一些特殊处理，此时我们就需要覆盖浏览器给我们提供的复制粘贴功能了。

使用 Generator 解决回调地狱

In 未分类 on 2015年04月23日 by TAT.云中飞扬 view: 11,471

10

（图片来源于互联网）

回调地狱

相信每一个 JS 程序员都曾被或者正在被回调地狱所折磨，特别是写过 Nodejs 代码的程序员。

1

2

3

4

5

6

7

8

9

asyncFun1(function(err, a) {

// do something with a in function 1

asyncFun2(function(err, b) {

// do something with b in function 2

asyncFun3(function(err, c) {

// do something with c in function 3

});

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 的理解，分享给大家。

ES6 Generator 介绍

In 未分类 on 2015年03月30日 by TAT.云中飞扬 view: 14,953

5

1

2

3

4

5

6

7

function* generateNaturalNumber() {

var i = 0;

while(i <= 100) {

yield i;

i++;

}

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

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);