avalon新一代UI库发布
任何前端框架，尤其是国内的，想推广开，必须有一个UI库，光是一个核心库当光头司令是不行的。此外还有一个小圈子，供大家遇到问题时可以发问，一起完善。自从avalon嫁入"去哪儿网"后，拥有一支专业的全职团队在做，其发展可谓一日千里。
首先，先做个备课给之前没有接触过avalon的朋友听。avalon是一个MVVM架构的前端框架，它与knockout, angular, ember，react的目标非常相近，就是让用户专注于数据模型本身，不再自己手动处理DOM。正因为如此，它与当前主流的jQuery的写法是截然不同，jQuery的90%操作是从选择器引擎出发，总是想着如何从一串类名，标签名，ID得到要操作的元素，然后用它高度封装优雅的原型方法来操作元素。但尽管链式操作多么轻便，API多么好用，但我们在接管别人用jQuery写的javascript代码时，都非常痛苦。尤其是新人，他们的代码基本是writeOnly。越大的项目，这缺点就越严重。因此后端搞的那一套类机制，设计模式，于前端是必不可少的。但一般人是很难在写代码应用到那一套东西。这时，我们就需要分层架构。MVVM就是其解药之一。backbone在前年也非常流行，它带来的是没什么改动的MVC，但angular一出来就把它秒了，因此后者让用户写的代码量更少，并有一整套方法论，如何分目 录啊，如何测试，如何定义服务，如何设计指令……照搬就行，不会像jQuery的代码那样千人千面，离奇百怪。
那avalon相对于angular有什么优势呢？
- 更轻量，但功能齐备，不到5千行包含1万7千行的angular的90%功能。
- 没有angular那么多概念，入门简单。
- 兼容IE6，并针对高级浏览器有更高效小体积的avalon.mobile。而 angular只支持IE9，需说网上有各种方案让你兼容到IE6，但这些方案都非常麻烦，也意味着你不能使用老外写的其他外围模块。
- 拥有完整的解决方案，SEO, 打包(r.js)，权限(ms-if)， UI
- 自带加载器，及换用其他加载器的解决方案。注，加载器一般用于开发阶段，上线时还是建议打包压缩。
- 强大的UI库。我之前搞过mass UI，然后为avalon搞了一套Pilot UI。我来去哪儿网前，他们基于avalon搞了一套Onion UI， 最后所有成果汇成这一套Oni UI。现在拥有32个组件，包含大家最关心的日历，表格……
下面Oni UI已有的组件及已经列入开发议程的组件
- UI组件，有界面的，通过ms-widget调用
- 功能组件，没有界面的，添加辅助性功能的
| 名称 | 类别 | 状态 | 说明 |
|---|---|---|---|
| 第1期 | |||
| hotkeys | 功能组件 | 完成 | 钟，组合键 |
| position | 功能组件 | 完成 | 杨，定位 |
| draggable | 功能组件 | 完成 | 钟，拖拽 |
| resizable | 功能组件 | 完成 | 钟，缩放 |
| checkboxlist | UI组件 | 完成 | 田，全选非全选 |
| textbox+suggest | UI组件 | 完成 | 田，文本域及智能提示 |
| at | UI组件 | 完成 | 钟，@提示列表 |
| pager | UI组件 | 完成 | 钟，分页栏 |
| dialog | UI组件 | 完成 | 田，弹出层 |
| grid | UI组件 | 完成 | 钟， 表格 |
| according | UI组件 | 完成 | 田， 手风琴 |
| slider | UI组件 | 完成 | 田，滑动条 |
| flipswitch | UI组件 | 完成 | 杨， 拖动切换 |
| tabs | UI组件 | 完成 | 杨， 切换卡 |
| spinner | UI组件 | 完成 | 田，数字输入框 |
| progressbar | UI组件 | 完成 | 杨， 进度条 |
| dropdown | UI组件 | 完成 | 姚，下拉框 |
| switchdropdown | UI组件 | 完成 | 姚，切换下拉框(图标加提示) |
| miniswitch | UI组件 | 完成 | 姚， 迷你下拉框(只有图标) |
| tooltip | UI组件 | 完成 | 杨，气泡提示（有小三角，围绕元素的任意位置出现） |
| notice | UI组件 | 完成 | 田，信息提示（能并排出现） |
| doublelist | UI组件 | 完成 | 姚，角色选择 |
| datepicker | UI组件 | 完成 | 田， 日期选框器 |
| scrollbar | UI组件 | 完成 | 杨， 滚动条 |
| 第2期 | |||
| json | 功能组件 | 完成 | 钟，json2 |
| cookie | 功能组件 | 完成 | 钟，cookie |
| store | 功能组件 | 完成 | 钟，本地储存 |
| promise | 功能组件 | 完成 | 钟, es6的Promise组件 |
| colorpicker | UI组件 | 完成 | 王，颜色选择器 |
| lazyload | 功能组件 | 懒加载 | |
| editor | UI组件 | 富文本编辑器 | |
| menu | UI组件 | 多级菜单 | |
| tree | UI组件 | 树 | |
| waterfall | UI组件 | 瀑布流 | |
| button | UI组件 | 按钮， http://www.bootcss.com/p/buttons/ | |
| marquee | UI组件 | 多个照片 | |
| carousel | UI组件 | 单个照片 | |
| rating | UI组件 | 星级评分 | |
| uploader | UI组件 | 上传 | |
| preview | UI组件 | 完成 | 钟， 图片预览 |
| scrollspy | UI组件 | 完成 | 杨， 滚动监听 |
| imagecropper | UI组件 | 图片剪切 | |
| validator | 功能组件 | 验证框架 | |
既然本文是宣传Oni UI，那么着重说说其一些特性。它是基于sass来编写它的样式，经过严密的组织，想实现换肤功能是非常轻松的。在avalon OniUI的仓库里有一个chameleon目录。chameleon是OniUI的皮肤生成系统，基于sass的compass框架改写而成。 直接路径下有oniui-theme.scss,oniui-common.scss这两个文件, 其中oniui-common.scss会生成oniui-common.css，这个文件所有UI组件都应该引用，如simplegrid.js就是这样引用
define(["avalon",
"text!./avalon.simplegrid.html",
"pager/avalon.pager",
"scrollbar/avalon.scrollbar",
"css!../chameleon/oniui-common.css",
"css!./avalon.simplegrid.css"
], function(avalon, tmpl) {
//....
})
oniui-theme.scss是用于每个组件对应的scss文件引用的,如avalon.simplegrid.js 肯定与一个叫avalon.simplegrid.scss文件放在一块,这scss里开头就是这样写的:
@charset "utf-8";
@import "../chameleon/oniui-theme";
$uiname : "ui-simplegrid";
.#{$uiname}{
width:100%;
border: 1px solid $ui-state-default-border-color;
@extend %oniui-font-setting;
.#{$uiname}-scroll-wrapper{
width:100%;
overflow:auto;
position: relative;
}
//....
}
正通过这样严格的组件,我们的OniUI就可以修改两处实现全库的换肤功能 第一处位于chameleon/compass/_config.scss文件中,里面有
@import "themes/smoothness" ; $oinui-theme: smoothness !global;
这两个地方修改
第二处是chameleon/compass/theme目录中,因为我们现在的皮肤叫smoothness, 那么就在它里面建一个叫smoothness.scss文件 以后你要添加一个叫sunny的皮肤,那么对应处改成
@import "themes/sunny" ; $oinui-theme: sunny !global;
自己再建一个sunny.scss文件就行了
我们再看一下这皮肤里面的规则是怎么搞的
@charset "utf-8"; // 两种主色调 银灰浅蓝 // 激活的蓝色为天蓝色 #3775c0 // hover上去为浅灰色 #f8f8f8 // 普通的底色为银灰色 #d9d9d9 // 银灰底色对应的边框色为深灰色:#cccccc; //两个用到的绿色 #3e973e(深) #68c969（浅） // 正常的字体颜色为黑色: #000; // slider的激活蓝色为 #22dddd; // input[type=text]，input[type=password],textarea的样式 //┌───┬────┬────┬────┬────┬────┐ //│状态 │default │ hover │active │diabled │error │ //├───┼────┼────┼────┼────┼────┤ //│边框 │#cccccc │#999999 │active │#3775c0 │#ff8888 │ //├───┼────┼────┼────┼────┼────┤ //│背景 │#ffffff │#ffffff │#ffffff │#f5f5f5 │#fffff │ //├───┼────┼────┼────┼────┼────┤ //│文字 │#000000 │#000000 │#000000 │#999999 │#ff8888 │ //└───┴────┴────┴────┴────┴────┘ //字体设置 $oniui-font-size: 1em; $oniui-font-weight: normal; $oniui-font-family: Helvetica,Arial,Sans-serif; $oniui-icon-start-color: #58b359; $oniui-icon-pause-color: #333; $oniui-icon-state-hover-color: #fff; $oniui-icon-state-active-color: #fff; //通用阴影 $oniui-shadow-box: 2px 2px 3px 0 rgba(0, 0, 0, 0.1); $ui-widget-content-border-color:#3e973e!global; $ui-widget-content-background-color:#68c969!global; $ui-widget-content-color:#fff!global; $ui-widget-header-border-color: #aaa!global; $ui-widget-header-background-color: rgb(223,223,223)!global; $ui-widget-header-color: #fff!global; $ui-state-default-background-color: #e6e6e6!global; $ui-state-default-border-color: #d4d4d4!global; $ui-state-default-color: #555!global; //移上去时 $ui-state-hover-background-color: #f8f8f8!global; $ui-state-hover-border-color: #f8f8f8!global; $ui-state-hover-color: #000!global; //激活状态(蓝色) $ui-state-active-background-color:#3775c0 !global; $ui-state-active-border-color: #3775c0!global; $ui-state-active-color: #fff!global; //禁用(灰色) $ui-state-disabled-background-color: #F5F5F5!global; $ui-state-disabled-border-color: #D9D9D9!global; $ui-state-disabled-color: #999!global; //出错（红色） $ui-state-error-background-color: #ff8888!global; $ui-state-error-border-color: #ff8888!global; $ui-state-error-color: #ff8888!global;
你只要将对应位置的颜色值改一下就行了。avalon的组件是分成高亮区，底色区与可变区。
高亮区通过添加.ui-widget-content类名标识，底色区添加.ui-widget-header类名标识；
可变区通过添加不同的类名来判定它的状态实现，一般分正常，hover, 激活，禁用，禁用，出错这几种状态。
它们分别添加.ui-state-default, .ui-state-hover, .ui-state-active, .ui-state-disabled, .ui-state-error类名实现。 悄悄话一句，这其实是抄自jquery ui的皮肤系统。 如果有的组件比较奇特，需要区别对待，那么我们可以在对应的scss文件中，如
@if($oinui-theme == smoothness){
$ui-state-hover-background-color:#E8F5FD;
}
改成这些，重新编译一下就行了。
最后附上国内使用avalon的一些公司LOGO，我们不是一个人在战斗！欢迎大家来fork本项目!
