Omi v1.0震撼釋出 - 令人窒息的Web元件化框架

當耐特發表於2017-03-20
Web元件化框架

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

寫在前面

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

廢話不多說，這就為大家介紹到目前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外掛主要是賦予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團隊

Omi v1.0震撼釋出 - 令人窒息的Web元件化框架

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

相關

  • Omi的Github地址github.com/AlloyTeam/o…
  • 如果想體驗一下Omi框架，可以訪問 Omi Playground
  • 如果想使用Omi框架或者開發完善Omi框架，可以訪問 Omi使用文件
  • 如果你想獲得更佳的閱讀體驗，可以訪問 Docs Website
  • 如果你懶得搭建專案腳手架，可以試試 omi-cli
  • 如果你有Omi相關的問題可以 New issue
  • 如果想更加方便的交流關於Omi的一切可以加入QQ的Omi交流群(256426170)

Omi v1.0震撼釋出 - 令人窒息的Web元件化框架

相關文章