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本項目!