任何前端框架,尤其是国内的,想推广开,必须有一个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本项目!

avalon新一代UI库发布的更多相关文章

  1. Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

    XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序不仅能在个人电脑上运行,还能用在iOS. ...

  2. 免费的Android UI库及组件推荐

    短短数年时间Android平台就已经形成了一个庞大而活跃的开发者社区.许多社区开发的项目业已进入成熟阶段,甚至可以用于商业的软件生产中,且不用担心质量问题. 本文编译自androiduipattern ...

  3. 重大发现: windows下C++ UI库 UI神器-SOUI(转载)

    转载:http://www.cnblogs.com/setoutsoft/p/4996870.html 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多语言 ...

  4. 推荐 9 个样式化组件的 React UI 库

    简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...

  5. 转: windows下C++ UI库 UI神器-SOUI

    转:http://www.cnblogs.com/setoutsoft/p/4996870.html 前言 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多 ...

  6. Ligg.EasyWinApp-100-Ligg.EasyWinForm:一款Winform应用编程框架和UI库介绍

        本项目是一个Winform应用编程框架和UI库.通过这个该框架,不需任何代码,通过XML配置文件,搭建任意复杂的Windows应用界面,以类似Execel公式的方式实现基本的过程控制(赋值.条 ...

  7. GUI - GEB UI库

    最近基于Winform开发了几款产品,感觉Winform有很大的局限性,其最主要的一点在于:控件是基于Windows窗体的,这就导致每个控件都是重量级控件,对复杂的界面来说,其性能和表现力都欠佳.在实 ...

  8. Riot - 比 Facebook React 更轻量的 UI 库

    Riot 是一个类似 Facebook React 的用户界面库,只有3.5KB,非常轻量.支持IE8+浏览器的自定义标签,虚拟 DOM,语法简洁.Riot 给前端开发人员提供了除 React 和 P ...

  9. AloneJs —— 简洁高效的JavaScript UI库

    以前做项目时用了一些第三方的JS UI库,项目比较low的时候用还行,一旦项目要求比较高,特别是交互比较复杂时,某些第三方UI库就显得无能为力,用起来也不顺手,改也不好改,所以我就自己基于jQuery ...

随机推荐

  1. 在返回值拒绝——reference

    在上一篇博客中,我们介绍了简单地使用值传递带来的种种麻烦,相信有些朋友会一心一意将其斩草除根,但是当返回值也使用了引用的时候,麻烦就来了. 依然来个简答的例子 class Rational { pub ...

  2. IIS网页GZIP压缩

    1.开GZIP有什么好处? 答:Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理,这样就会减小通过网络传输的数据量,提高浏览的速度. 2.如何启用IIS的Gzip压缩功能: 答:首先,如果你需 ...

  3. halcon之屌炸天的自标定(2)

    自 halcon之屌炸天的自标定(1)发出以后,有朋友看了文章也应用到了自己的测量项目中,效果奇好,成功搞定了20um的需求,可喜可贺.   在halcon之屌炸天的自标定(1)中我提到了一片论文: ...

  4. 【解决方案】django初始化执行python manage.py migrate命令后,除default数据库之外的其他数据库中的表没有创建出来

    [问题原因]:django工程中存在多个应用,每个应用都指定了对应的数据库.执行python manage.py migrate命令时没有指定数据库,将只初始化默认的default数据库. [解决方案 ...

  5. LNMP架构下Discuz论坛的搭建

    在上一节中,我们对lnmp架构下的mysql.php.nginx进行源码的安装,并设置了相关的安装参数.现在我们将在上一节的基础上,把三者联系起来进行一个论坛的部署. 一.首先进行Discuz(社区论 ...

  6. Linux:提示符PS1个性设置

    提示符PS1个性设置 1)默认PS1 echo $PS1 2)个性PS1 #去掉了默认显示的[]号#\e[1;34m\]\u:user名高亮显示并显示颜色#\e[5;33m\]\h:hostname主 ...

  7. Javascript中的prototype与继承

    通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性列表.javascript创建对象时采用了写时复制的理念. 只有构造器才具有prototype属性,原型链继承 ...

  8. BI系统之统计图表的绘制[后端实现]

    因为在开发内部BI系统中需要画出统计图表,我选了Jpgraph 开源绘图工具实现需求. 之前实现过需求,没想到这次又花了很多时间回忆,各种搜索,真的是好记性不如烂笔头, 不会总结的人没有未来啊. 常用 ...

  9. bzoj 2212 Tree Rotations

    bzoj 2212 Tree Rotations 考虑一个子树 \(x\) 的左右儿子分别为 \(ls,rs\) .那么子树 \(x\) 内的逆序对数就是 \(ls\) 内的逆序对数,\(rs\) 内 ...

  10. LOJ10131. 「一本通 4.4 例 2」暗的连锁【树上差分】

    LINK solution 很简单的题 你就考虑实际上是对每一个边求出两端节点分别在两个子树里面的附加边的数量 然后这个值是0第二次随便切有m种方案,如果这个值是1第二次只有一种方案 如果这个值是2或 ...