Fl介绍

FlA Js/Html/Css Toolkit That Support

Template

2012 年 9 月 21 日 / welefen

提纲

• 为什么有这个工具？• 功能介绍• 后续规划• Q&A

为什么有这个工具

• 意识到编码规范的重要性

• 有些疏忽会引起严重的后果

• 现有的一些工具不支持模版语法，不能满足需求

• 安全问题非常重要，但不好解决

• 需要一套自动化的工具来解决这些问题

为什么有这个工具

• 开发了一套前端编译平台 FCP

• 将前端语言处理相关的部分作为一个独立的工具开发 Fl

• 主要解决 Js/Html/Css 中的规范、安全、压缩等功能

• 第一版功能简单，今年年初进行了 v2.0 的设计和开发

• 目前完成了全部的 80% 功能

Fl 功能列表

Fl 功能列表

功能

• 词法分析 - 需要支持模版语法和各个浏览器的兼容情况

• 语法分析

• 所有的功能都是基于词法和语法分析结果进行

HTML 处理

HTML 词法分析需要注意的点

• IE 的条件注释 - <!—[if

• 一些通用的 status ok

- <!—status ok

• 文本中 <> 字符与 tag 中的 <> 识别 - <div>welefen<<<</div>

• Pre, textarea, script 等特殊 tag

- script 的 type=“text/html”

• Tag 名可能是模版语法的识别 - <{%$tagName%} class=“cls” >

- <<&$tagName&> class=“cls” >• XML 的兼容

HTML 标签属性切割

• 标签名 - <script/defer src=“xxx.js”>

• 属性列表 - 属性值 2 边的引号 - 2 边没有引号，但有空格隔开 - 只有属性名，没有属性值

http://www.w3.org/TR/html5/syntax.html

HTML 压缩

• 移除注释• 简化 doctype, charset• 将多个空格替换为一个• 移除相邻 2 个块级元素之间的空格• 移除可选的闭合标签• 移除可选的属性• 移除可选的属性值• 移除属性值 2 边的引号• 移除 http 和 https 协议• 压缩 style 值• 压缩内联的 JS 和 CSS• 去除空的 script 和 style• 合并相邻内联的 JS 和 CSS

HTML 压缩

• 移除注释• 简化 doctype, charset• 将多个空格替换为一个• 移除相邻 2 个块级元素之间的空格• 移除可选的闭合标签• 移除可选的属性• 移除可选的属性值• 移除属性值 2 边的引号• 移除 http 和 https 协议• 压缩 style 值• 压缩内联的 JS 和 CSS• 去除空的 script 和 style• 合并相邻内联的 JS 和 CSS

所有的功能都可配置

XSS 自动修复

• 一切用户输入的数据都是不安全的

• 转义环境 - HTML 环境 - JS 环境 - URL 环境 - 异步接口数据 innerHTML 环境 - HTML 里事件参数环境

• 自动识别，并添加对应的转义方式

HTML 美化

• 构建 DOM 树 - 可选的闭合标签

• 根据 DOM 树遍历美化

HTML 其他的功能

• HTML 编码规范检查

• HTML2JSON

• HTMLQuery

CSS 相关

CSS 词法分析

• @ 相关 - @import url

- @media

- @charset

- @namespace

- @font-face

- @-xxx-keyframes

- @-moz

• IE 的 * _ \9 等 hack• [;color:red;]• Expression

- 需要调用 JS 的词法分析，通过匹配 () 个数

CSS Selector 相关

• CSS3 Selector

Id, Type, Class, Attribute, PseudoElement, PseudoClass

• 计算 Selector 的优先级

http://www.w3.org/TR/selectors/#specificity

CSS 压缩

• 移除空格注释等• 移除最后一个分号• 移除空的 Selector• 覆盖相同的属性 - 需要识别 hack

• 简化 value• 对属性和选择器重排 - 需要识别 hack

• 合并选择器里相同的属性 - 需要识别 hack

CSS 其他功能

• 编码规范检查

• 美化

• CSS3 自动完成

JS 相关

JS 词法分析和语法分析

• JS 词法分析 - @cc_on

• JS 语法分析

后续规划

• 开发其他的功能

• 提供 NodeJS 版本

• 官网 - http://www.flkit.org/ 官网 - http://www.flkit.org/test/ 单元测试 - https://github.com/welefen/Fl github

谢 谢 ！

北京市朝阳区建国路 71 号惠通时代广场 D 座 1 号楼 100025 Block 1, Area D, Huitong Times Plaza No.71 JianGuo Road, ChaoYang District Beijing 100025, P.R.C.

Tel: +86 10 5878 1000 Fax: +86 10 5878 1001