摘要：經(jīng)過周末的連續(xù)通宵加班加點(diǎn)，版本終于問世。雖然組件通訊非常方便，但是各種數(shù)據(jù)傳遞組件實(shí)例互操作或者循環(huán)依賴，讓代碼非常難看且難以維護(hù)。所以是為了讓組件通訊幾乎絕跡。所以的插件不會(huì)有太多。完善的腳手架你可以安裝，用來初始化項(xiàng)目腳手架。

原文鏈接--https://github.com/AlloyTeam/omi

Omi框架經(jīng)過幾十個(gè)版本的迭代，越來越簡(jiǎn)便易用和強(qiáng)大。
經(jīng)過周末的連續(xù)通宵加班加點(diǎn)，Omi v1.0版本終于問世。雖然版本遵循小步快跑、頻繁迭代，但是Omi團(tuán)隊(duì)成員都有著克制之心，處女座占了半壁江山，所以O(shè)mi的API除了增量的API，其他的歷史API沒有任何變化。

Github：https://github.com/AlloyTeam/omi

廢話不多說，這就為大家介紹到目前1.0版本為止，關(guān)于Omi，你必須知道的點(diǎn)點(diǎn)滴滴。

先說說Store系統(tǒng)是干什么的！

當(dāng)我們組件之間，擁有共享的數(shù)據(jù)的時(shí)候，經(jīng)常需要進(jìn)行組件通訊。在Omi框架里，組件通訊非常方便：

通過在組件上聲明 data-* 傳遞給子節(jié)點(diǎn)

通過在組件上聲明 data 傳遞給子節(jié)點(diǎn) （支持復(fù)雜數(shù)據(jù)類型的映射）

聲明 group-data 把數(shù)組里的data傳給一堆組件傳遞（支持復(fù)雜數(shù)據(jù)類型的映射）

完全面向?qū)ο?，可以非常容易地拿到?duì)象的實(shí)例，之后可以設(shè)置實(shí)例屬性和調(diào)用實(shí)例的方法。比如(標(biāo)記name、標(biāo)記omi-id)

當(dāng)然你也可以使用event emitter / pubsub庫(kù)在組件之間通訊，比如這個(gè)只有 200b 的超小庫(kù)mitt 。但是需要注意mitt兼容到IE9+，Omi兼容IE8。

雖然組件通訊非常方便，但是各種數(shù)據(jù)傳遞、組件實(shí)例互操作或者循環(huán)依賴，讓代碼非常難看且難以維護(hù)。所以：

Omi.Store是為了讓 組件通訊幾乎絕跡 。雖然：

Redux 的作者 Dan Abramov 說過：Flux 架構(gòu)就像眼鏡：您自會(huì)知道什么時(shí)候需要它。

但是，我不會(huì)告訴你

Omi Store 系統(tǒng)就像眼鏡：您自會(huì)知道什么時(shí)候需要它。

因?yàn)?，Omi Store使用足夠簡(jiǎn)便，對(duì)架構(gòu)入侵性極極極小(3個(gè)極代表比極小還要小)，讓數(shù)據(jù)、數(shù)據(jù)邏輯和UI展現(xiàn)徹底分離，所以我的觀點(diǎn)是：

如果使用Omi，請(qǐng)使用Omi.Store架構(gòu)。

比如連這個(gè)Todo例子都能使用Omi.Store架構(gòu)。如果連復(fù)雜度都達(dá)不到Todo，那么Omi其實(shí)都沒有必要使用，你可能只需要一個(gè)模板引擎便可。

關(guān)于Store詳細(xì)的用法，后續(xù)再寫文章闡述。

omi-finger Omi的AlloyFinger插件，支持各種觸摸事件和手勢(shì)

omi-transform Omi的transformjs插件，快速方便地設(shè)置DOM的CSS3 Transform屬性

omi-touch Omi的AlloyTouch插件，Omi項(xiàng)目的觸摸運(yùn)動(dòng)解決方案（支持觸摸滾動(dòng)、旋轉(zhuǎn)、翻頁(yè)、選擇等等）

omi-jquery-date-picker Omi的時(shí)間選擇插件，支持各種時(shí)間或者時(shí)間區(qū)域選擇

omi插件主要是賦予dom能力，并且能和instance關(guān)聯(lián)。如果主要是結(jié)構(gòu)行組件，就寫成Omi組件，和插件也沒有太大關(guān)系。所以omi的插件不會(huì)有太多。

你可以安裝omi-cli，用來初始化項(xiàng)目腳手架。

$ npm install omi-cli -g       //安裝cli
$ omi init your_project_name   //初始化項(xiàng)目
$ cd your_project_name         //轉(zhuǎn)到項(xiàng)目目錄
$ npm run dev                  //開發(fā)
$ npm run dist                 //部署發(fā)布

項(xiàng)目腳手架基于 Gulp + Webpack + Babel + BrowserSync ，并且支持sass生成組件局部CSS

支持HTML、JS、CSS/Sass文件分離的目錄方式，也支持HTML、JS、CSS 全都寫在JS里的方式，兩種方式可以同時(shí)出現(xiàn)在項(xiàng)目里，按需選擇。

大量的示范例子(md2site、qq-nearby實(shí)戰(zhàn)、各種example)

雙版本支持，(omi.js和omi.lite.js)

其中omi.lite.js是不包含 mustache.js模板引擎的omi.js。Omi團(tuán)隊(duì)認(rèn)為：

1.隨著ES的發(fā)展，模板字符串和ES語法強(qiáng)大到可以不使用模板引擎（僅限于all in js的代碼目錄組織方式）
2.讓開發(fā)者重寫 Omi.template 去使用任意模板引擎

良好的兼容性，支持IE8（請(qǐng)自行引用es5-shim或es5-sham）

本來沒有支持IE8的打算，后來發(fā)現(xiàn)babel加兩個(gè)插件便可以支持IE8:

query: {
    presets: "es2015",
    plugins : [
        "transform-es3-property-literals",
        "transform-es3-member-expression-literals"
    ]
}

輕量迅速的DOM Diff 和 HTML Parser

更智能的事件綁定，如：

class Hello extends Omi.Component {

    handleClick(evt){
      alert(evt.target.innerHTML)
    }
  
    render() {
      return  `
      

          
Hello ,{{name}}!
      
          `
    }
}

你可以傳遞任意參數(shù):

class Hello extends Omi.Component {

    handleClick(str, num){
    
    }
  
    render() {
      return  `
      

          
Hello ,{{name}}!
      
          `
    }
}

來自AlloyTeam、Mars Holding、騰訊、TalkingCoder、阿里、微軟的優(yōu)秀的工程師會(huì)協(xié)商規(guī)劃好Omi發(fā)展路線，跟進(jìn)優(yōu)秀的思想和模式

來自AlloyTeam的工程師會(huì)跟進(jìn)Omi使用者的任何問題

Omi的Github地址https://github.com/AlloyTeam/omi

如果想體驗(yàn)一下Omi框架，可以訪問 Omi Playground

如果想使用Omi框架或者開發(fā)完善Omi框架，可以訪問 Omi使用文檔

如果你想獲得更佳的閱讀體驗(yàn)，可以訪問 Docs Website

如果你懶得搭建項(xiàng)目腳手架，可以試試 omi-cli

如果你有Omi相關(guān)的問題可以 New issue

如果想更加方便的交流關(guān)于Omi的一切可以加入QQ的Omi交流群(256426170)