归档

关于Function.prototype.toString的野生小技巧

⚠约定: 以下将Function.prototype.toString简称为fn.toString

我发现自己快没救了，又把一个短文硬生生写成了长文，客官慢用…

先介绍下Function.protoype.toString

The toString() method returns a string representing the source code of the function.
—- from MDN

即这个原型方法可以帮助你获得 函数的源代码！！, 比如

title: 使用莱文斯坦距离（Levenshtein distance）计算两数组的差异
tags: [algorithm, javascript]
date: 2014-10-21 21:40:04

—

前言

莱文斯坦距离(Levenshtein distance以下简称ld)是一种常见的算法或可以称之为一种度量单位(前提是操作权重确定)，它用于表示从字串序列A到字串序列B所需要进行操作(增加、删除、更新)的综合。

鉴于数组与字符的相似性，这个算法当然同样适合与数组

问题是作为一个前端开发，你不好好切图，用这个算法做啥？

事实上Regularjs内部就使用到了这种算法，它用于检测数组的变动差异，并将差异反映到View中(即Dom)。

ld算法的另一个好处是，可以容易的将计算结果映射到未来将会到来的JS ES6Array.observe的返回值形式，方便未来的无缝迁移。

前端黑科技——纯clip-path打造的3D模型渲染器

⚠警告:

  • 本页DEMO只兼容到webkit浏览器(如chrome)， 请确保你的正确打开姿势

  • 本文涉及到的资源clip3d: https://github.com/leeluolee/clip3d

  • 前戏较长， 请耐心..

缘由

几天之前, 一个species-in-pieces的网站把我震到了(如下图), 出于一个优秀前端的敏锐嗅觉和原始本能，
我立刻祭出了看家法宝——Chrome开发者工具开始偷窥这个网站.

species in pieces

简单推敲之后，我发现其实原理可以归结为一个属性—clip-path, 又一篇博文的材料到手！
当我兴高采烈的将我的《Species in Pieces原理解析》进行到一半时，发现First blood在weibo上已经被人抢了.

你不知道的终端Terminl

以下内容大部分源自 man console_codes

关于转移字符

首先废话下转移字符，因为后面介绍到CSI等部分时会涉及到.

  1. 八进制: “\” + 1~3位的8位数字 例如 “\123”;
  2. 16进制长 “\u” + 4位16位数字 例如 “\u738b” (王).
    数字即 char.charCodeAt(0).toString(16)的值
  3. 16进制短 “\x” + 两位16位数字 例如 “\x55”(U) 它等价于 “\u0055”;
  4. 其它诸如\t等制表符 等就不再做说明了

终端的control codes

比如Linux的终端实现了VT102(?)和ECMA-48的，以及一些私有字符集。

看到VT102 terminal实体可能你就明白为何我们称之为“终端”. 对，就是这大家伙
VT102

VT102 被称之为 De facto standard, 即虽然没有相关标准化，但是已然成为了一种事实标准，
我们常规Linux的终端就是模拟实现了它的接口标准

当你输入字符时，如果终端判断其为一个控制字符或正处于一个，它不会将其转换为字符实体并显示，
而是会发生一些特殊的处理，比如改变字体颜色，上下移动光标隐藏光标，发出蜂鸣声等等。

控制字符 (Control characters) 与转移序列

有以下控制字符

  • 00(NUL)
  • 07(BEL)
  • 08(BS)
  • 09(HT)
  • 0a(LF)
  • 0b(VT)
  • 0c(FF)
  • 0d(CR)
  • 0e(SO)
  • 0f(SI)
  • 18(CAN)
  • 1a(SUB)
  • 1b(ESC)
  • 7f(DEL)

事实上我们平时term-dom中使用到的只有ESC转义起始符(以及用来蜂鸣的\x07 BEL);

控制字符会立即生效并且不会被显示, 如果前面的序列正处于CSI阶段，CSI会在生效后继续进行,
唯一的例外是ESC控制符, 它会终止当前的CSI序列

ESC

ESC控制符是我们最常用的

ESC c RIS 重绘屏幕.
ESC D IND 换行.
ESC E NEL 新的一行.
ESC H HTS 设置当前列为制表位.
ESC M RI 翻转换行(Reverse linefeed).
ESC Z DECID DEC 私有定义.内核将其解释为
VT102字符,返回字符ESC [ ? 6 c.
ESC 7 DECSC 存储当前状态(光标坐标,
属性,字符集).
ESC 8 DECRC 恢复上一次储存的设置
ESC [ CSI 控制序列介绍
ESC % 开始一个字符集选择序列
ESC % @ \0\0\0选择默认字符集(ISO 646 / ISO 8859-1)
ESC % G \0\0\0选择 UTF-8
ESC % 8 \0\0\0选择 UTF-8(已不用)
ESC # 8 DECALN DEC 屏幕校准测试 - 以E’s填充屏幕.
ESC( 开始一个 G0 字符集定义序列
ESC( B \0\0\0选择默认字符集(ISO 8859-1 mapping)
ESC( 0 \0\0\0选择 vt100 图形映射
ESC( U \0\0\0选择空映射 - 直接访问字符ROM
ESC( K \0\0\0选择用户映射 - 由程序\fBmapscrn\fP(8)
\0\0\0加载.
ESC ) 开始一个 G1 字符集定义
(后面跟 B,0,U,K,同上).
ESC > DECPNM 设置数字小键盘模式
ESC = DECPAM 设置程序键盘模式
ESC ] OSC (是perating system command的缩写)
ESC ] P Inrrggbb P: 设置调色板,后面紧跟7个
十六进制数,再跟一个 P :-(.
这里 \fIn\fP 是颜色(0-16),而 \fIrrggbb\fP 表示
红/绿/蓝 值(0-255).
ESC ] R: 重置调色板

这里的部分序列是term-dom中需要的

CSI

CSI(ESC [) 是由分号隔开的十进制数.空参数或缺少的参数以0处理.
可以用一个问号代替参数序列.

CSI可以实现一些文字效果，比如term-dom大部分实现都基于CSI来实现文件颜色，背景色等

CSI序列的动作由最后一个数字决定

那么问题来了，我只是想换个文字颜色你和我扯那么多干嘛？

1

超简单工具puer——“低碳”的前后端分离开发

前几天，跟一同事(MIHTool作者)讨教了一下开发调试工具。其实个人觉得相较于定制一个类似MIHTool的Hybrid App容器，基于长连的B/S架构的工具其实会是一个更轻量的解决方案。此文会分享一下超简单工具puer，以及如何利用它在产品开发的各阶段实现高效的开发。

本文title有点大哈，相较于目前国内正流行起来的前端后移的前后端分离方案，本文介绍是一种“低碳”的版本，所以不要纠结于这个Title的正确性哈。

requirejs的插件介绍与制作

前言

我这里就不介绍requirejs了， 简而言之： requirejs是支持AMD规范的模块加载器， 事实上它也是AMD的最直接推动者。

现在可供挑选的开源模块解决方案很多，比如component、cjs+browserify、umd等等，但是无疑类似requirejs这类加载系统是现在最成熟和可靠的解决方案，所以regularjs第一步就是提供对requirejs的插件支持。

一步步教你实现一个todomvc(基于Regularjs)

前言

现在市面上充斥了越来越多的javascript框架，给开发者的技术选型带来极大的选择成本，todomvc在这个环境下应运而生.

由于todomvc有一个完整的实现定义，它复杂度适中，大概就是平时开发的一个组件的功能复杂度，开发者可以轻松对各个框架的代码做对比，同时由于功能一致，也可以进行各框架之间的性能对比(当然这个测试案例其实并没有很大的实际意义).

todomvc

LESS to MCSS 指南

前言

虽然首页没有开始做，昨天仍决定将MCSS从身边的基友们开始向杭研推广了，从开始做这个直到现在推广遇到最多的问题是：

不是有LESS了吗？

这个问题回答了很多遍了，但是觉得回答的都不够好，所以觉得写一篇文章解释一下。其实很多答案也都可以从基于MCSS封装的函数库mass中得到解答，本文针对MCSS的例子都可以在这个Try-Page中进行尝试。