Omi v1.0震撼發佈 - 使人窒息的Web組件化框架

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

寫在前面

Omi框架通過幾十個版本的迭代，愈來愈簡便易用和強大。
通過週末的連續通宵加班加點，Omi v1.0版本終於問世。雖然版本遵循小步快跑、頻繁迭代，可是Omi團隊成員都有着剋制之心，處女座佔了半壁江山，因此Omi的API除了增量的API，其餘的歷史API沒有任何變化。

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

廢話很少說，這就爲你們介紹到目前1.0版本爲止，關於Omi，你必須知道的點點滴滴。

強大的Store系統

先說說Store系統是幹什麼的！

當咱們組件之間，擁有共享的數據的時候，常常須要進行組件通信。在Omi框架裏，組件通信很是方便：

• 經過在組件上聲明 data-* 傳遞給子節點

• 經過在組件上聲明 data 傳遞給子節點 （支持複雜數據類型的映射）

• 聲明 group-data 把數組裏的data傳給一堆組件傳遞（支持複雜數據類型的映射）

• 徹底面向對象，能夠很是容易地拿到對象的實例，以後能夠設置實例屬性和調用實例的方法。好比(標記name、標記omi-id)

固然你也可使用event emitter / pubsub庫在組件之間通信，好比這個只有 200b 的超小庫mitt 。可是須要注意mitt兼容到IE9+，Omi兼容IE8。

雖然組件通信很是方便，可是各類數據傳遞、組件實例互操做或者循環依賴，讓代碼很是難看且難以維護。因此：

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

Redux 的做者 Dan Abramov 說過：Flux 架構就像眼鏡：您自會知道何時須要它。

可是，我不會告訴你

Omi Store 系統就像眼鏡：您自會知道何時須要它。

由於，Omi Store使用足夠簡便，對架構入侵性極極極小(3個極表明比極小還要小)，讓數據、數據邏輯和UI展示完全分離，因此個人觀點是：

若是使用Omi，請使用Omi.Store架構。

好比連這個Todo例子都能使用Omi.Store架構。若是連複雜度都達不到Todo，那麼Omi其實都沒有必要使用，你可能只須要一個模板引擎即可。

關於Store詳細的用法，後續再寫文章闡述。

簡易的插件體系

• omi-finger Omi的AlloyFinger插件，支持各類觸摸事件和手勢

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

• omi-touch Omi的AlloyTouch插件，Omi項目的觸摸運動解決方案（支持觸摸滾動、旋轉、翻頁、選擇等等）

• omi-jquery-date-picker Omi的時間選擇插件，支持各類時間或者時間區域選擇

omi插件主要是賦予dom能力，而且能和instance關聯。若是主要是結構行組件，就寫成Omi組件，和插件也沒有太大關係。因此omi的插件不會有太多。

完善的腳手架

你能夠安裝omi-cli，用來初始化項目腳手架。

$ npm install omi-cli -g       //安裝cli
$ omi init your_project_name   //初始化項目
$ cd your_project_name         //轉到項目目錄
$ npm run dev                  //開發
$ npm run dist                 //部署發佈

項目腳手架基於 Gulp + Webpack + Babel + BrowserSync ，而且支持sass生成組件局部CSS

支持HTML、JS、CSS/Sass文件分離的目錄方式，也支持HTML、JS、CSS 全都寫在JS裏的方式，兩種方式能夠同時出如今項目裏，按需選擇。

其餘

• 大量的示範例子(md2site、qq-nearby實戰、各類example)

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

其中omi.lite.js是不包含 mustache.js模板引擎的omi.js。Omi團隊認爲：

1.隨着ES的發展，模板字符串和ES語法強大到能夠不使用模板引擎（僅限於all in js的代碼目錄組織方式）
2.讓開發者重寫 Omi.template 去使用任意模板引擎

• 良好的兼容性，支持IE8（請自行引用es5-shim或es5-sham）

原本沒有支持IE8的打算，後來發現babel加兩個插件即可以支持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  `
      <div>
          <h1 onclick="handleClick">Hello ,{{name}}!</h1>
      </div>
          `
    }
}

你能夠傳遞任意參數:

class Hello extends Omi.Component {

    handleClick(str, num){
    
    }
  
    render() {
      return  `
      <div>
          <h1 onclick="handleClick('test', 1)">Hello ,{{name}}!</h1>
      </div>
          `
    }
}

強大的Omi團隊

• 來自AlloyTeam、Mars Holding、騰訊、TalkingCoder、阿里、微軟的優秀的工程師會協商規劃好Omi發展路線，跟進優秀的思想和模式

• 來自AlloyTeam的工程師會跟進Omi使用者的任何問題

相關

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

• 若是想體驗一下Omi框架，能夠訪問 Omi Playground

• 若是想使用Omi框架或者開發完善Omi框架，能夠訪問 Omi使用文檔

• 若是你想得到更佳的閱讀體驗，能夠訪問 Docs Website

• 若是你懶得搭建項目腳手架，能夠試試 omi-cli

• 若是你有Omi相關的問題能夠 New issue

• 若是想更加方便的交流關於Omi的一切能夠加入QQ的Omi交流羣(256426170)