Google Docs Ctrl + C 技术浅析

用 google docs 打开 pdf 文件,选中文本:

表面上没有任何有趣的地方。但仔细一看,会发现选区的颜色是浅蓝色,而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性,立马 firebug:

不看不知道,一看真蹊跷。selection-highlight 是选区,选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性:Ctrl + C 可以复制图片中的文字!

google 太强悍了,好在前端代码都是开源的,下面简单分析下。 阅读全文 »

Tags: ,

KISSY 迁移到 github.com

终于迁移到 github.com 了,欢迎 fork: github.com/kissyteam

调整了目录组织:
kissy team structure

文档迁移到:KISSY Docs

Git 使用,推荐阅读:
1. Git Reference(简明扼要的介绍了 Git 的基本理念和常用命令)
2. Pro Git | 中文(深入浅出,看完不喜欢 Git 都难)

原本计划 7 月 22 日发布的 v1.1 版本,推迟到 8 月 2 日。详情:plan_v1.1.html
v1.2 也已经在开发中,包含编辑器等组件:plan_v1.2.html

欢迎感兴趣的朋友与我联系,帮忙 review code 或者直接参与到 KISSY 组件的开发中来,等的就是你。

Tags: ,

用 JS 枚举质数

酷壳上的这篇文章很诱人:检查素数的正则表达式
翻译成 JavaScript 代码如下:

function prime(MAX) {
    var re = /^(11+?)\1+$/,
        n, C = '1', s = C,
        r = [], j = 0;

    while ((n = (s += C).length) < MAX) {
        !re.test(s) && (r[j++] = n);
    }
    return r;
}
alert(prime(10000).length);

作为前端,为了让上面的脚本能在实际页面中应用,还得考虑 脚本在浏览器中的耐心 以及 分时优化处理

最后,请猛击测试页面:prime-number.html

Tags: ,

What it really is, not what it is

看了 infinte 的这篇文章:再见,Button;你好,Command, 和我这半年的一些想法很相近,本质是对 UI Controls 的再次抽象分类。

传统的 UI 控件分类,体现的是 what is looks like, 比如 Menu, Button, Tabs, Toolbar, Dialog, Grid, Tree 等等。

近期新近的一些 UI 类库比如 jQuery EasyUI, 开始逐步抽象出 Draggable, Droppable, Resizable 等 Base 功能点,这些形容词已经逐步开始从 what to do, not what it is 层面开始抽象。虽然 EasyUI 最后体现出来的依旧是 Menu, Dialog, Tree 等传统 UI 控件,但抽象层次和代码组织等已经逐步演化。

前不久在 InfoQ 发过一篇文章:构建 UI 组件的新思路, 介绍了 KISSY 类库中,通过 Switchable 抽象,实现 Tabs, Slide, Album 等 UI 控件的思路,抽象的出发点是 what it really is, not what it is.

结合 infinte 的想法,画了一个还比较混乱的图:
UI 3.0

或许 UI 3.0 的时代真的来临了!

比如 Autocomplete(自动补全组件)或 Suggest(搜索提示组件),可以这样实现:

    Suggest = Widget.combine(DataProvider, Overlay, Selectable);

在现实生活中,我们需要实现一个复杂实体时,经常用到的办法是将简单的实体组合起来。比如法拉利,是一堆汽车零件的组合。不同的法拉利,是选用的零件或组合方法有差异。类、继承等 OOP 概念,真的不是必须的。去掉后,世界照样清晰。

抽象、思考,思考、再抽象,多想想 what it really is, and what to do, not what it is. 我相信,未来是 UI 3.0 的世界!

infinte 的文章让我很激动,上面的想法还很不成熟,UI 3.0 是我杜撰的(当然,希望以后会说是我首创的,哈哈)。大家随意看看,极其欢迎讨论,提出你的想法与建议。

Tags: , , ,

KISSY.all(‘.good-student’)

猛击:join-taobao.html

  KISSY.all('.good-student').appendTo('#taobao').icanfly();

你懂的,赶快投递简历到 yubo(at)taobao.com 吧^o^

Tags: , ,

Page 1 of 3712345102030...Last »