Fl.pdf

Transcript

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