团队高效简洁的.pptVIP

团队高效简洁的*第1页，共23页，星期日，2025年，2月5日现状Alice的解决方式Alice介绍内容：123*第2页，共23页，星期日，2025年，2月5日现状——混乱的命名myorder和我的信息？*第3页，共23页，星期日，2025年，2月5日现状——低效的写法重复的样式定义，低效！*第4页，共23页，星期日，2025年，2月5日现状——糟糕的维护相关联的样式被隔开*第5页，共23页，星期日，2025年，2月5日Alice*第6页，共23页，星期日，2025年，2月5日解决命名混乱——表意的命名Alice命名要求表意，模块的命名表示它具体的功能含义ui-button:按钮ui-tab:标签页ui-paging:分页*第7页，共23页，星期日，2025年，2月5日解决书写低效——合并相同属性样式Alice要求合并相同的样式，当各个样式有单独的属性时，再分离出另写。把两个样式的公用部分定义成basebtn，然后针对它们不同的样式再单独设置*第8页，共23页，星期日，2025年，2月5日提升维护性——聚拢的样式块Alice要求相关的样式书写时应该聚拢在一起，避免不相关的样式混杂在一起。把所有相关的button样式代码都写在一块，达到聚拢的样式效果，从而提升代码的维护性。*第9页，共23页，星期日，2025年，2月5日提升维护性——采用继承通过类似Java继承的方式对模块的样式进行扩展通过ui-button-lorange来完成样式的继承扩展*第10页，共23页，星期日，2025年，2月5日Alice介绍*第11页，共23页，星期日，2025年，2月5日Alice简介Alice是支付宝样式解决方案，是一套模块化的样式命名和组织规范。Alice的样式组织分为两个层级：基础框架（base.css+iconfont+栅格+animate.css+常用样式类）通用模块（alice.css）*第12页，共23页，星期日，2025年，2月5日由于不同浏览器缺省的样式各不相同，导致相同的页面设计和实现在不同的浏览器上展现不同——这是最常见的兼容性问题。而base.css的目的就是解决该问题。Alice基础框架——base.css*第13页，共23页，星期日，2025年，2月5日Alice基础框架——iconfont直接引用icon把icon拼接到一张图上，使用sprite技术使用iconfont技术大部分网站的做法是采用雪碧图（CSSSprites），把这些图标放在一张单独的图中，结合使用CSS的background和background-position属性渲染图标。最传统的方式iconfont提供了一种通过把icon图标打包成矢量化字体的方式对图标进行管理。第14页，共23页，星期日，2025年，2月5日优点：轻薄：使用icon图片的大小是字体的4-10倍。百搭：矢量化，在不同的分辨率屏幕上适配缩放不失真！Alice基础框架——iconfont的优点怎么使用？data-iconfont-family第15页，共23页，星期日，2025年，2月5日栅格化开发为我们提供了标准化的协作开发流程，设计师按照Grid栅格设计,开发人员采用Grid栅格方式高度还原设计；栅格化隐藏了复杂的BOXModal细节，为开发者提供了更加高效容易的布局方式，即使不懂CSS，也能写出栅格布局。Alice基础框架——Grid栅格第16页，共23页，星期日，2025年，2月5日通过CSS3的高级属性实现动画交互，没有使用JavaScript。和CSS3特性相关的样式被单独剥离为animate.css，解决了浏览器的兼容问题。

Alice基础框架——动态样式第17页，共23页，星期日，2025年，2月5日常用功能类以fn为前缀，为了在页面中更加容易的重复使用，命名采用了以面向属性的命名方式比如：fn-clear，fn-hide等Alice基础框架——常用功能类第18页，共23页，星期日，2025年，2月5日Alice提供了符合样式规范的常用组件样式库，通过样式库可以有效的规范代码的质量；Alice的通用样式库包括：ui-buttonui-navui-tipboxui-step...Alice通用模块——主样式表第19页，共23页，星期日，2025年，2月5日Alice通用模块——模块的组合Head：ui-grid-25