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)