Alice库构建

4,844 views
4,666 views

Published on

在淘宝的分享

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,844
On SlideShare
0
From Embeds
0
Number of Embeds
1,413
Actions
Shares
0
Downloads
135
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Alice库构建

  1. 1. Alice 为构建更好的支付宝而作 v3 颗粒化 标准 注重协作 兼容 轻量级 快速构建
  2. 2. Alice 为构建更好的支付宝而作 v3 颗粒化 标准 注重协作 兼容 轻量级 快速构建 小鱼,支付宝前端开发攻城师 微博 @sofish | HTTP://sofish.de
  3. 3. SUMMARY 内容概要1 从一个CSS文件开始 为什么会有现在这种模式?2 构建 Alice 样式库的基础 如何去构建这样一个库,如何做才是最适合我们的?3 未来与设想 Alice 小组的计划进一步工作
  4. 4. 从一个 CSS 文件开始优化⼀一下这个CSS文件吧 pa.css
  5. 5. 从一个 CSS 文件开始优化⼀一下这个CSS文件吧 pa.css
  6. 6. 从一个 CSS 文件开始 优化⼀一下这个CSS文件吧1. 压缩版本:94k2. 1200+ 行(6000+)3. 全局设置没有限制,文档不齐全4. 所有系统样式都放在同一个文件中 pa.css
  7. 7. 从一个 CSS 文件开始 优化⼀一下这个CSS文件吧1. 压缩版本:94k2. 1200+ 行(6000+)3. 全局设置没有限制,文档不齐全4. 所有系统样式都放在同一个文件中 无从下手 pa.css
  8. 8. 从一个 CSS 文件开始这个无从下手的东东
  9. 9. 从一个 CSS 文件开始这个无从下手的东东 文件太大,我只有几个页面, 不需要 100k / 6000+ 行的代码
  10. 10. 从一个 CSS 文件开始这个无从下手的东东 文件太大,我只有几个页面, 不需要 100k / 6000+ 行的代码 改版了,我要用什么? 组件大 多是个人版的,还要不要用
  11. 11. 从一个 CSS 文件开始这个无从下手的东东 文件太大,我只有几个页面, 不需要 100k / 6000+ 行的代码 改版了,我要用什么? 组件大 多是个人版的,还要不要用 太多全局设置了,改了怕影 响其他设系,不敢改啊
  12. 12. 从一个 CSS 文件开始这个无从下手的东东 文件太大,我只有几个页面, 不需要 100k / 6000+ 行的代码 改版了,我要用什么? 组件大 多是个人版的,还要不要用 太多全局设置了,改了怕影 响其他设系,不敢改啊 新手,不知道从哪里去入手
  13. 13. 从一个 CSS 文件开始这个无从下手的东东 文件太大,我只有几个页面, 不需要 100k / 6000+ 行的代码 改版了,我要用什么? 组件大 多是个人版的,还要不要用 太多全局设置了,改了怕影 响其他设系,不敢改啊 新手,不知道从哪里去入手 ...
  14. 14. 从一个 CSS 文件开始设计模式
  15. 15. 从一个 CSS 文件开始设计模式
  16. 16. 从一个 CSS 文件开始设计模式
  17. 17. 从一个 CSS 文件开始设计模式 new
  18. 18. 从一个 CSS 文件开始设计模式 new
  19. 19. 从一个 CSS 文件开始base.css• CSS reset包括  HTML5  标签的  reset• 小功能:.fn-­‐clear  清除浮动.fn-­‐hide/.fn-­‐show  相当于display:block;/display:none;.fn-­‐left/.fn-­‐right  相当于  float:left;/float:right;
  20. 20. 从一个 CSS 文件开始TPL 结构模板<h3 id="link-0">⼀一般列表(.ui-list)</h3><ul class="ui-list"> <li class="ui-list-item"><a href="#">新闻第⼀一条</a></li> <li class="ui-list-item"><a href="#">新闻第⼀一条b</a></li> <li class="ui-list-item"><a href="#">新闻第⼀一条c</a></li></ul>/* * @name: 导航 * @overview: ⼀一般导航 * @require: null */.ui-nav{}.ui-nav-item{}.ui-nav-item-current{}.ui-nav-item-child{}.ui-nav-item-active-child{}
  21. 21. 从一个 CSS 文件开始Solutions
  22. 22. 从一个 CSS 文件开始 解决问题1. 减少依赖,仅存 base.css2. 减肥:把 solution 分出来,使用 TPL3. 颗粒化,只依赖 base.css,并分离各系统的依赖
  23. 23. 从一个 CSS 文件开始 解决问题1. 减少依赖,仅存 base.css2. 减肥:把 solution 分出来,使用 TPL3. 颗粒化,只依赖 base.css,并分离各系统的依赖
  24. 24. 从一个 CSS 文件开始 解决问题1. 减少依赖,仅存 base.css2. 减肥:把 solution 分出来,使用 TPL3. 颗粒化,只依赖 base.css,并分离各系统的依赖 /*  *  @name:  ui-­‐组件名  *  @overview:  组件描述  *  @required:  与其他组件的依赖关系,⼀一般为null  */
  25. 25. 从一个 CSS 文件开始解决问题
  26. 26. 从一个 CSS 文件开始 解决问题只有 base.css,只有 solution 和 TPL,没有实际的东西
  27. 27. 从一个 CSS 文件开始 解决问题 坑爹只有 base.css,只有 solution 和 TPL,没有实际的东西
  28. 28. 从一个 CSS 文件开始解决问题
  29. 29. 从一个 CSS 文件开始解决问题
  30. 30. 从一个 CSS 文件开始解决问题
  31. 31. 从一个 CSS 文件开始解决问题 只有 base.css, 只有 solution 和 TPL, 大家的编码风格 还是一样。
  32. 32. 从一个 CSS 文件开始解决问题 坑爹 只有 base.css, 只有 solution 和 TPL, 大家的编码风格 还是一样。
  33. 33. 从一个 CSS 文件开始Alice v3 与样式库
  34. 34. 从一个 CSS 文件开始Alice v3 与样式库
  35. 35. 从一个 CSS 文件开始Alice v3 与样式库
  36. 36. 从一个 CSS 文件开始Alice v3 与样式库
  37. 37. 从一个 CSS 文件开始Alice v3 与样式库
  38. 38. 构建 Alice 样式库的基础Alice v3 规范
  39. 39. 构建 Alice 样式库的基础Alice v3 规范1. 设计模式2. 文档结构/命名/注释3. 组件库构建规范4. Maven 自动部署与展示平台5. 其他
  40. 40. 构建 Alice 样式库的基础Alice v3 规范1. 设计模式2. 文档结构/命名/注释3. 组件库构建规范4. Maven 自动部署与展示平台5. 其他申请访问权限:https://docs.google.com/Doc?docid=0AWiI12yCmwaoZGNiemJqOGpfMThjanM5NWJjaA&hl=en_US
  41. 41. 构建 Alice 样式库的基础组件编写:命名/模块化规范
  42. 42. 构建 Alice 样式库的基础 组件编写:命名/模块化规范1
  43. 43. 构建 Alice 样式库的基础 组件编写:命名/模块化规范 21 2
  44. 44. 构建 Alice 样式库的基础 组件编写:命名/模块化规范 21 3 3 2
  45. 45. 构建 Alice 样式库的基础组件编写:命名/模块化规范
  46. 46. 构建 Alice 样式库的基础组件编写:命名/模块化规范
  47. 47. 构建 Alice 样式库的基础组件编写:命名/模块化规范
  48. 48. Alice 小组的计划进一步工作未来的工作CSS3 方面的应用和影响交互/视觉的实践研究 未来 规范自动化检测工具 让更多人能用 开源与自动化的结合,让运营能自 己添加页面 增加库的应用,如强化搜索 和代码实时修改 ...
  49. 49. Alice 小组的计划进一步工作未来的工作CSS3 方面的应用和影响交互/视觉的实践研究 未来 规范自动化检测工具 让更多人能用 开源与自动化的结合,让运营能自 己添加页面 增加库的应用,如强化搜索 和代码实时修改 ... HTML4和5的应用
  50. 50. thxThank You !! & FAQ keynote by sofish http://sofish.de

×