Fl  A Js/Html/Css Toolkit That Support Template2012年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, texta...
HTML标签属性切割• 标签名  - <script/defer src=“xxx.js”>• 属性列表  - 属性值2边的引号  - 2边没有引号,但有空格隔开  - 只有属性名,没有属性值http://www.w3.org/TR/html5...
HTML压缩•   移除注释•   简化doctype, charset•   将多个空格替换为一个•   移除相邻2个块级元素之间的空格•   移除可选的闭合标签•   移除可选的属性•   移除可选的属性值•   移除属性值2边的引号•  ...
HTML压缩•   移除注释•   简化doctype, charset•   将多个空格替换为一个•   移除相邻2个块级元素之间的空格•   移除可选的闭合标签•   移除可选的属性              所有的功能•   移除可选的属...
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• [;colo...
CSS Selector相关• CSS3 Selector  Id, Type, Class, Attribute, PseudoElement, PseudoClass• 计算Selector的优先级  http://www.w3.org/T...
CSS 压缩•   移除空格注释等•   移除最后一个分号•   移除空的Selector•   覆盖相同的属性    - 需要识别hack• 简化value• 对属性和选择器重排    - 需要识别hack• 合并选择器里相同的属性    -...
CSS 其他功能• 编码规范检查• 美化• CSS3自动完成
JS相关
JS词法分析和语法分析• JS词法分析 - @cc_on• JS语法分析
后续规划• 开发其他的功能• 提供NodeJS版本• 官网 - http://www.flkit.org/ 官网 - http://www.flkit.org/test/ 单元测试 - https://github.com/welefen/Fl...
谢谢!北京市朝阳区建国路71号惠通时代广场D座1号楼 100025Block 1, Area D, Huitong Times Plaza No.71 JianGuo Road, ChaoYang District Beijing 100025...
Fl介绍
Upcoming SlideShare
Loading in …5
×

Fl介绍

1,379 views
1,277 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,379
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Fl介绍

  1. 1. Fl A Js/Html/Css Toolkit That Support Template2012年9月21日 / welefen
  2. 2. 提纲• 为什么有这个工具?• 功能介绍• 后续规划• Q&A
  3. 3. 为什么有这个工具• 意识到编码规范的重要性• 有些疏忽会引起严重的后果• 现有的一些工具不支持模版语法,不能满足需求• 安全问题非常重要,但不好解决• 需要一套自动化的工具来解决这些问题
  4. 4. 为什么有这个工具• 开发了一套前端编译平台FCP• 将前端语言处理相关的部分作为一个独立的工具开发Fl• 主要解决Js/Html/Css中的规范、安全、压缩等功能• 第一版功能简单,今年年初进行了v2.0的设计和开发• 目前完成了全部的80%功能
  5. 5. Fl功能列表
  6. 6. Fl功能列表
  7. 7. 功能• 词法分析 - 需要支持模版语法和各个浏览器的兼容情况• 语法分析• 所有的功能都是基于词法和语法分析结果进行
  8. 8. HTML处理
  9. 9. 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的兼容
  10. 10. HTML标签属性切割• 标签名 - <script/defer src=“xxx.js”>• 属性列表 - 属性值2边的引号 - 2边没有引号,但有空格隔开 - 只有属性名,没有属性值http://www.w3.org/TR/html5/syntax.html
  11. 11. HTML压缩• 移除注释• 简化doctype, charset• 将多个空格替换为一个• 移除相邻2个块级元素之间的空格• 移除可选的闭合标签• 移除可选的属性• 移除可选的属性值• 移除属性值2边的引号• 移除http和https协议• 压缩style值• 压缩内联的JS和CSS• 去除空的script和style• 合并相邻内联的JS和CSS
  12. 12. HTML压缩• 移除注释• 简化doctype, charset• 将多个空格替换为一个• 移除相邻2个块级元素之间的空格• 移除可选的闭合标签• 移除可选的属性 所有的功能• 移除可选的属性值 都可配置• 移除属性值2边的引号• 移除http和https协议• 压缩style值• 压缩内联的JS和CSS• 去除空的script和style• 合并相邻内联的JS和CSS
  13. 13. XSS自动修复• 一切用户输入的数据都是不安全的• 转义环境 - HTML环境 - JS环境 - URL环境 - 异步接口数据innerHTML环境 - HTML里事件参数环境• 自动识别,并添加对应的转义方式
  14. 14. HTML美化• 构建DOM树 - 可选的闭合标签• 根据DOM树遍历美化
  15. 15. HTML其他的功能• HTML编码规范检查• HTML2JSON• HTMLQuery
  16. 16. CSS相关
  17. 17. CSS词法分析• @相关 - @import url - @media - @charset - @namespace - @font-face - @-xxx-keyframes - @-moz• IE的* _ 9 等hack• [;color:red;]• Expression - 需要调用JS的词法分析,通过匹配()个数
  18. 18. CSS Selector相关• CSS3 Selector Id, Type, Class, Attribute, PseudoElement, PseudoClass• 计算Selector的优先级 http://www.w3.org/TR/selectors/#specificity
  19. 19. CSS 压缩• 移除空格注释等• 移除最后一个分号• 移除空的Selector• 覆盖相同的属性 - 需要识别hack• 简化value• 对属性和选择器重排 - 需要识别hack• 合并选择器里相同的属性 - 需要识别hack
  20. 20. CSS 其他功能• 编码规范检查• 美化• CSS3自动完成
  21. 21. JS相关
  22. 22. JS词法分析和语法分析• JS词法分析 - @cc_on• JS语法分析
  23. 23. 后续规划• 开发其他的功能• 提供NodeJS版本• 官网 - http://www.flkit.org/ 官网 - http://www.flkit.org/test/ 单元测试 - https://github.com/welefen/Fl github
  24. 24. 谢谢!北京市朝阳区建国路71号惠通时代广场D座1号楼 100025Block 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

×