Sencha SDK 工具之 Slicer 简介-阿里云开发者社区

注：文章最后有 PPT 展示！

Sencha SDK Tools（主页http://www.sencha.com/products/sdk-tools/）是 Sencha 公司围绕 Ext JS 和 JavaScript 应用程序所推出开发者工具箱。在 Sencha 公司内部，如何借助工具来提高生产力一直是大家努力追求的目标或者渴求所在。随着项目的加大，自动化工具需求的呼声也越来越高，于是出现了不少开源或非开源的辅助工具包。据笔者观察，从最早 Jack 所作的 JS Builder （参见我的旧帖子：http://blog.csdn.net/zhangxin09/article/details/5265240）到现在 Sencha SDK，针对工具的态度，不仅由库作者自己手写，发展到集成多个优秀开源库的 SDK 综合利用，当中的一步一步走来，渐近渐现，一点一滴都是持续改良，都是反映出自动化工具不断完善与完备。而其中值得击节的，当属创新思路的引入，好比如说，今日我们这儿所说的 Slicer（属于 SDK 中的一个子工具），其原理即是一个创前人所没有的方法，来解决问题的！在这里我要急不及待地向大家介绍这款工具包 SDK。

一、SDK概述

据 SDK 官方主页宣称，使用 SDK Tools，过去那些打包 JS、压缩/混淆源码、生成 Sprites 图片以及修正计算 CSS 规则的日子，将统统一去不返了，而且还是跨浏览器的。原文：The days of struggling to combine scripts, minify JavaScript, generating custom sprites and calculating CSS rules are gone. 乍一听说，貌似乃前端工作者之福音，十分凌厉，须知道，我们在前端许多的工作就是处理浏览器兼容的问题。不过这一个 SDK 亮点在于，作为工具来说支持许多浏览器，包括 IE6！我们知道老掉牙的 IE 本来无法支持 CSS3 特性的，不禁要问，究竟什么因素，让古老的 IE6 浏览器支持 CSS3 呢？或者是否真的如此呢？抱着种种疑问，我们首先要撇除广告式的洗脑，然后从实际演示的原理说明两方面来个祛魅——就是请跟着本文一一庖丁解牛。

首先，依照惯例，给大家介绍一下 SDK 的下载地址和运行平台，下载大小约 23MB：http://www.sencha.com/products/sdk-tools/download/

今时今日，如果不是跨平台的程序，可能就太逊了。Sencha 岂会不料？所以，SDK 同样也是跨平台的，支持 Windows（但不支持 Win2k，笔者有机器在用 win2k）、Mac OS 和 Linux。

其次，该 SDK 免费，就是没有开源。（应该还有一些内部的工具！记得还有一个不曾公开 JS Docs 在内部，可以抽取源码的注释生成漂亮的 HTML 文档，——真很有用，要知道，ExtJS 的文档可算“文档界中 MM”。）明显，如果开源了肯定有助于我们熟悉原理，否则我们只能在表面上作功夫。然而我们并不是生产工具的商家，或者收集什么情报，只是打算作一个梗概的了解，动不动则要求开源太过分了，呵呵，或者说深入一下其亮点，也就达到了本文的目的、足够了。
不过从 SDK 文件观察，了解到 Qt runtime、Webkit 引擎，由于我对这些内容的了解不是很透彻，所以下面如果讲到，也只能轻微提一下，同大家一道沾沾仙气。：）

再者一点，该 SDK 包含多种工具在内，并不是通过 GUI 交互的，大多都是通过命令行方式操作的工具。

第三个问题。一旦论及 Web 程序，不免要涉及浏览器的兼容问题。当支持 CSS3 的浏览器攻城夺寨之时，一部分人仍在使用古老的浏览器，等于又给已经焦头烂额的开发者添上一道“皱皱的纹”。所以说，解决浏览器兼容问题是我们前端工作者的长期目标。然而值得放心和叹慰的是，SDK 支持到 IE6！没错，最低的那一块板，正是 IE6。但一码归一码，虽然解决是可以解决，然而笔者私下却觉得，不知这是好还是不好，此话何说呢？——好的当然如大家所想，通过这工具我可以省事了，客户用 IE6 也不怕，SDK 一样照顾支持；不好的就是工具对 IE6 之流等于延长寿命，变相放纵，那些不明真相的用户可能则会认为：“IE6 还行喔～Ok，继续照用可也……”——这不，谁笑了？IE6 笑了？——得以苟且乎！？

总之，现在支持 IE6 已经成为 SDK 一大卖点，仿佛很能吸引眼球，为人所称道。这也正是本文斗胆以“IE6 上也可以用CSS3？”作副标题的原因。

第四点，亦是必须提到的是，该工具的适用性如何？既然为 SDK，当然是针对本公司产品而设的。但又据官方主页宣称，其他非 Ext 的 AJAX 程序都可享用……是否这样？我有点保留意见，我认为，该项目仍处于早期释放阶段，而且与 ExtJS 库紧密结合，尚不能任意使用，也就是说，有一定限制性，只对 ExtJS 程序比较有用。SDK 不是灵丹妙药，如果想要借助工具的特性广谱到它种 AJAX 应用程序，虽然很美好，但要等待官方的改进或者社区对其的摸索，以发掘更多的应用技巧。

接着下文，回到 SDK 功能的探讨上，我们逐一分开解析。

二、回顾CSS v1 & v2

首先简单回顾一下 CSS 的发展历程。HTML 早期，内容、样式尚处于混沌状态，也就是我们过去常说的“内容样式彼此不分离”。那时候我们使用 <font> 标签包围一段文本，即如 PPT 所示。那时候我们还经常挂在嘴边的，应该就是我们早期学习网页都会接触的 FrontPage。FrontPage 曾经叱诧一时，很明显，微软赋予它“所即见即所得”使得很多人感觉网页好像用 Word 那么轻松，却不知道背后的冗余代码。

好像 <font> 标准那样的都是 inline 方式的，但为解决修改样式不影响 HTML 内容，有人提出了外置一份文件定义样式，有关样式问题统统写在这份文件中。于是 CSS 的概念被正式的提了出来。CSS 版本由 1997 的 v1.0 到次年的 v2.0/2.1，负责制定草案和标准化，就是 W3C 组织。关于现在的 CSS 第三版严格说还是在草案（draft）审议中，但与此同时，浏览器厂商都不断地在升级浏览器，加入新特性。

于是对于 CSS 的出现，我们可以小结如下：一、提倡并实现了样式与内容的分离，无疑减低了维护成本和提高了开发效率；二、有助于 Web 语义化；三、灵活的换肤机制。值得一提的是，CSS 不但为更换 Web 页面样式而生的，而且还能做真正意义的“软件皮肤”。例如 Flex/Java Swing 即参考了 CSS 样式规则并提供相应的 API。虽然我不知道 Flex/Swing 具体的换肤机制，但我的确知道如 Flex、Swing 等有地方使用了 CSS 来定义其样式。

三、CSS 3演示例子

CSS3 比起 CSS1，CSS2 新加入了什么？（请见 PPT，说明例子）

33个选择器（Selectors）
120+新样式属性
3个新@规则

CSS3 首先为我们那些迫切的需求提供了标准的实现，例如圆角。

人们普遍喜欢带有圆角的设计，Apple 的产品充分体现了这一点。网页设计也不例外。Google 很多产品的简洁风格都在应用了圆角设计后儒雅很多。

可是就连这么一个简单的需求，CSS v1 & v2 都未提供！记得我们是怎么创建圆角的？

至于圆角设计的实现，不一而足。最原始的是使用设计好的背景图片，带来显而易见的缺点就是不够灵活，无法自适应内容大小的变化。当然用极致的方法也有，这里就不多说了。最轻松的是使用样式表定义，不过目前并非所有的浏览器都支持。再接下来就是下面两大类的实现技巧了。

其一，使用 Javascript 处理特定的容器对象。在 DOM 树上动态增加若干辅助的 div 然后通过 CSS 定位等技巧按像素级画出圆角的效果。优点是，保持 xHTML 的语义整洁；缺点是需要等待页面完全加载后才能渲染，页面数据大时可以见到延迟渲染的效果，圆角不够光滑，没有次像素辅助，圆角大时比较生硬。

其二，使用圆角小图片。有些配合表格，有些直接使用额外的 div。然后配合 CSS 在角落处应用定位好的背景图片。优点是无须 JavaScript 介入，所以一旦 CSS 加载完成（通常都比较快），页面上马上出效果，圆角可以较平滑；缺点是 xHTML不再干净，冗余元素众多，并需要事先准备若干小图片。

而 CSS3 时代，使用一行代码就可以实现圆角了。

还有渐变、容器阴影和字体阴影等等：

四、两大问题

但是，在普及 CSS3 以及 HTML5 的进程中，至少面临着两大问题：
第一大问题：浏览器，这里连续用两个浏览器的重要性。在国内，IE6 其恐怖的占有率依然高居不下。据有关统计报道，IE6 仍旧作为浏览器使用，2011年06月14日数字33.9% ，越占三分一，全球 10.9% 越占十分一。如何在 IE6 及其他古老的浏览器上使用 CSS 便成一个难题。就算号称支持 HTML5 的浏览器，不同版本之间支援程度也不尽相同。详尽当前各个浏览器支援 CSS3 的情形如下链接：

http://www.webresourcesdepot.com/html5-and-css3-browser-compatibility-chart/

第二大问题：假设有一个美好的设想，十分美好，就是浏览器全部加入 HTML5 之实现，CSS3 等的一概没有问题。可是，是不是等于说前端工程师高枕无忧呢？当然不是了。先说一个问题，就是当项目越做越大，CSS 不可避免地难以维护，试想数百行、数千行的 CSS，又不是什么可编程语言，如何维护?伴随着这一系列问题，解决这问题的思路怎么样？我们不妨列举一下马上可想像的对策，发明新的 CSS 语言？不现实。另外，JS 不是可以控制样式吗？但没有人这样做，其实我私下倒是觉得可以试试的。

于是更为现实的是，人们提出了 CSS 框架的概念。CSS 框架其实问世时间很早，如 BluePrint 为鼻祖的，就是为了解决 CSS 日益复杂难以重构的问题，通过适当加入 DSL、新语法的途径来改进 CSS 本来基于描述式“语言”的不足。严格来说，CSS 和 HTML一样，算不上一门“语言”，与我们熟悉的 PHP/JS 不一样，若说语言只是简单的描述式的语言。

五、CSS库简介：SASS & Compass

针对上述问题，有人提出了“CSS框架”。可以说这是 OO 版的 CSS，或者说，CSS 的 OO 化。

CSS3 虽带来许多新特性，依然为描述式“语言”，可见的未来也不会改变这点。
伴随着越来越大的项目，CSS 也……
发明新的 CSS 语言？不现实
JS可以控制样式？
综上所述问题，CSS 框架被提出来了——OO 版 CSS！——Good idea！

SASS（http://sass-lang.com/）

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
    border-color: $blue;
    color: darken($blue, 9%);
}

.border {
    padding: $margin / 2;
    margin: $margin / 2;
    border-color: $blue;
}

生成最终 CSS 如下（这一过程姑且可称为SASS的“编译”）：

.content-navigation {
    border-color: #3bbfce;
    color: #2b9eab;
}

.border {
    padding: 8px;
    margin: 8px;
    border-color: #3bbfce;
}

Compass（compass-style.org）

Compass为 SASS 的超级
SASS 不是没有 CSS3 模块，但不通过 SASS 来提供 CSS3 支持，而采用 Compass 的
原因在于 Compass 可提供 cross-browser 的兼容，CSS 3！
IE6 这些“老人家”都受益

$boxheight: 10em;

.mybox {
    @include border-radius($boxheight/4);
}

编译所得：

.mybox {
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    -o-border-radius: 2.5em;
    -ms-border-radius: 2.5em;
    -khtml-border-radius: 2.5em;
    border-radius: 2.5em;
}

初始化
c:\>compass create .
新建test.scss文件（同上一源码）：

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

编译……
c:\>compass compile sass/*

CSS 框架有什么 IDE 支持？首选 Komodo，这是大家比较熟悉的 IDE，在动态语言开发方面比较强大，也支持 *.scss SASS 格式的编辑，例如输入 #00000 会有黑色的色块提示你，输入 #fffff 会有白色的色块提示你，非常方便。

CSS 框架为我们带来允许变量、嵌套、逻辑语句、内置函数…更多，但是，是否会复杂过头了？也许你会觉得：“不过就是样式嘛，好看便行，何必再伤脑筋呢？～” 可应当要说的是，你可以说这些东西很复杂，却也可以说他们很有趣。我个人结论：总之，能适应项目的需求就好！存在就是合理的。之所以加入框架，其意义在于：如果所写的样式表只是为了满足两三张页面或者一个小型程序，使用框架与否的区别也不太大。但是，如果所写的 CSS 上百行、甚至上千行，维护代码就是很大的问题了。对于大型项目而言，如 UI 框架这类的，反倒可简化。

附一些 CSS 框架的学习资源：

《CSS 开发利器 ——Sass 相关工具框架介绍》
http://www.showmuch.com/article/article_1.html
《用 Compass 寫 CSS》
http://blog.xdite.net/?p=2097
《Sass 使用介绍》
http://blog.meituo.net/2011/03/27/sass-%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/
《SASS/LESS 如何安装使用 – 拥抱 HTML5》
http://uecss.com/sass-less-how-to-install-and-use.html
《Sass 使用介绍》
http://blog.meituo.net/2011/03/27/sass-%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/

六、Slicer原理

官方原文转述，应该可理解其大意：

Supporting Legacy Browsers

The slicing tool creates a new browser instance, which loads Ext JS and a specified CSS file. Once loaded, it parses a JavaScript file which includes every Ext JS component that needs styling (panel, window, toolbar, etc.). It then analyzes each of those components and determines the size and location of each image that needs to be sliced. It then slices each of the images, sprites them together and saves them in the location defined in the manifest.

创建 CSS3 风格的图片，无缝连接内部的 Webkit 渲染引擎。如此一来，尚未支持 CSS3 的浏览器即可呈现出 CSS3 效果。

Slicer 有何意义？

该技术优点：