摘要:經過周末的連續通宵加班加點,版本終于問世。雖然組件通訊非常方便,但是各種數據傳遞組件實例互操作或者循環依賴,讓代碼非常難看且難以維護。所以是為了讓組件通訊幾乎絕跡。所以的插件不會有太多。完善的腳手架你可以安裝,用來初始化項目腳手架。
原文鏈接--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 `` } }Hello ,{{name}}!
你可以傳遞任意參數:
class Hello extends Omi.Component { handleClick(str, num){ } render() { return `強大的Omi團隊` } }Hello ,{{name}}!
來自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)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88190.html
摘要:用過的同學都知道,性能優化的關鍵就是,最被詬病的也是這個,很多開發者也吐槽這個鉤子函數,也可以配合不可變數據類型,直接進行引用地址比較,來決定組件是否需要更新。 大家好,這次給大家講下 Omi 框架 以及即將發布的 Omim 大家有沒有數左邊的圖片里有多少個 Omi?Omi 團隊很在意這里,特意數了下,有三個。Omi 團隊希望 Omi 以后在各大會議里能夠印刷得更加大一些。今天給大家帶來的主...
摘要:不用擔心組件的會污染組件外的會幫你處理好一切更自由的更新,每個組件都有方法,自由選擇時機進行更新。通過安裝點擊這里在線試試你可以使用來生成組件標簽用于嵌套。點擊這里試試寫程序加入吧 Omi Open and modern framework for building user interfaces. Omi的Github地址https://github.com/AlloyTeam/o...
閱讀 2265·2023-04-25 23:15
閱讀 1917·2021-11-22 09:34
閱讀 1546·2021-11-15 11:39
閱讀 955·2021-11-15 11:37
閱讀 2152·2021-10-14 09:43
閱讀 3493·2021-09-27 13:59
閱讀 1506·2019-08-30 15:43
閱讀 3454·2019-08-30 15:43