经过几十个版本的迭代,越来越简便易用和强大。
经过周末的连续通宵加班加点,Omi v1.0 版本终于问世。虽然版本遵循小步快跑、频繁迭代,但是 Omi 团队成员都有着克制之心,处女座占了半壁江山,所以 Omi 的 API 除了增量的 API,其他的历史 API 没有任何变化。
废话不多说,这就为大家介绍到目前 1.0 版本为止,关于 Omi,你必须知道的点点滴滴。
先说说 Store 系统是干什么的!
当我们组件之间,拥有共享的数据的时候,经常需要进行组件通讯。在 Omi 框架里,组件通讯非常方便:
当然你也可以使用 event emitter / pubsub 库在组件之间通讯,比如这个只有 200b 的超小库 。但是需要注意 mitt 兼容到 IE9+,Omi 兼容 IE8。
虽然组件通讯非常方便,但是各种数据传递、组件实例互操作或者循环依赖,让代码非常难看且难以维护。所以:
Omi.Store 是为了让 组件通讯几乎绝迹 。虽然:
- Redux 的作者 Dan Abramov 说过:Flux 架构就像眼镜:您自会知道什么时候需要它。
但是,我不会告诉你
- Omi Store 系统就像眼镜:您自会知道什么时候需要它。
因为,Omi Store 使用足够简便,对架构入侵性极极极小 (3 个极代表比极小还要小),让数据、数据逻辑和 UI 展现彻底分离,所以我的观点是:
- 如果使用Omi,请使用Omi.Store架构。
比如连这个都能使用 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 ,并且
支持 html、JS、CSS/Sass 文件分离的目录方式,也支持 HTML、JS、CSS 全都写在 JS 里的方式,两种方式可以同时出现在项目里,按需选择。
其中 omi.lite.js 是不包含 mustache.js 模板引擎的 omi.js。Omi 团队认为:
1. 随着 ES 的发展,模板字符串和 ES 语法强大到可以不使用模板引擎(仅限于 all in js 的代码目录组织方式)
2. 让开发者重写 Omi.template 去使用任意模板引擎
本来没有支持 IE8 的打算,后来发现 babel 加两个插件便可以支持 IE8:
- query: {
- presets: 'es2015',
- plugins : [
- "transform-es3-property-literals",
- "transform-es3-member-expression-literals"
- ]
- }
- 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 > `
- }
- }
来源: http://www.cnblogs.com/iamzhanglei/p/6586129.html