造轮子

2018-03-15 JavaScript

不依赖任何框架、库，无需编译，用最原生的 JavaScript 造轮子。

Read More

树形结构

2017-12-24 数据结构与算法

树形结构是一种层次嵌套的结构。它提供了一种有序的组织方式，能够方便地表示层次关系和结构化数据，在文件系统、数据库索引、DOM 等场景中被广泛应用。树形结构的遍历、搜索和操作等算法也是计算机中常见的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const tree = [
  {
    "id": 74,
    "parentId": null,
    "children": [
      {
        "id": 62,
        "parentId": 74
      },
      {
        "id": 86,
        "parentId": 74,
      }
    ]
  }
]
Read More

LeetCode JavaScript Solutions

2017-10-01 数据结构与算法
  1. 两数之和
  2. 回文数
  3. 有效的括号
  4. 二叉树的前序遍历
  5. 翻转二叉树

Base 64 编码

2017-05-10 计算机组成原理

Base64 是一种用 64 个可打印字符来表示任意二进制数据的二进制编码方法。可以用来处理和传输任意二进制数据。

Base64 最初是用在电子邮件中，为了满足电子邮件中不能直接使用非 ASCII 码字符的规定，用来传输二进制文件的。除此之外，它还可将任意不可打印的二进制数据，转化为可打印的文本编码，使用文本软件进行编辑（二进制流中有很多都是无法显示和打印的，比如 ASCII 中的控制字符，二进制文件 jpg、pad、exe 等，如果用记事本打开这些文件，会看到一堆乱码）。

Read More

字符编码

2017-02-01 计算机组成原理

计算机只能处理数字，如果要处理文本，就必须先把文本编码转换为数字才能处理（图片、语音、视频…，这些多媒体文件也一样）。

Read More

函数式编程

2016-12-02 JavaScript

科里化函数

科里化的关键是返回函数实现连式调用、参数收集、以及判断收集结束做最终调用。判断收集结束有很多办法：对比实参和形参的长度；判断实参的个数是否为 0（不传）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function currying(fn) {
  return (...args) => {
    if (args.length === 0) { // 通过手动调用的方式（即不传参数）来判断收集结束
      return fn(...args);
    }
    return currying(fn.bind(null, ...args));
  }
}

function add(...args) {
  return args.reduce((total, num) => {
    return total + num;
  }, 0);
}

add = currying(add);

// 须手动结束调用
var result = add(1)(20)(3)(4)(6, 2)();
console.log(result);
Read More

CSS 设计模式

2016-12-02 Web

大型的 CSS 项目中，往往会遇到 CSS 结构混乱、多人协作命名冲突、没有组件化无法复用…等等问题。为了解决这些问题于是引入 CSS 设计模式，用 BEM 来解决命名空间的问题，用 SMACSS 来解决代码分层问题，用 OOCSS 来解决解构复用问题。

Read More

排序算法

2016-09-05 数据结构与算法

冒泡排序

外循环控制几轮冒泡，内循环进行冒泡（比较大小交换位置，就像气泡一样从数组底部”冒泡”到数组的顶部）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function bubbleSort(arr) {
  const len = arr.length
  // 共进行 arr.length 轮冒泡
  for (let i = 0; i < len; i++) {
    // 冒泡
    // 俩俩对比，最后一个元素后面没有元素了，所以减 1，已冒泡上去的元素无需再参与，所以减 i
    for (let j = 0; j < len - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]] // distribute 交换数组位置
      }
    }
  }

  return arr
}

bubbleSort([3, 44, 15, 36, 26, 27, 2, 46, 4, 19, 50, 48])
Read More

JavaScript 类型系统

2016-07-26 JavaScript

类型动静态强调的是静态类型检测，类型强弱强调的是隐式类型转换，JavaScript 是一门动态类型（dynamically typed）且弱类型（weakly typed）语言，既不对类型进行静态检测，又允许隐式类型转换。

1
2
3
let foo = 42; // foo 是 number
foo = 'hello'; // foo 是 string
foo = true;  // foo 是 boolean
1
2
10 + ''; // number 转成了 string
!!1; // number 转成了 boolean
Read More

移动端适配方案

2016-07-02 Web

在 PC 端，除了数据可视化和中后台这样一些全屏设计场景需要适配，绝大多数的网页采用的都是固定尺寸设计，由于 1366+ 的屏幕尺寸大于常用的固定设计尺寸，网页按设计尺寸 1:1 还原即可，不需要考虑适配。而在移动端，由于屏幕尺寸大小不一，且采用全屏的设计风格，则需要做适配。

目前移动端端内主流适配方案有：

1
2
3
* 流体式/弹性式；
* Layout Viewport Scale；
* VW + Rem；
Read More