Omi v1.0震撼发布 - 开放现代的Web组件化框架分分快

作者:分分快三计划

相关

  • Omi的Github地址
  • 如果想体验一下Omi框架,可以访问 Omi Playground
  • 如果想使用Omi框架或者开发完善Omi框架,可以访问 Omi使用文档
  • 如果你想获得更佳的阅读体验,可以访问 Docs Website
  • 如果你懒得搭建项目脚手架,可以试试 omi-cli
  • 如果你有Omi相关的问题可以 New issue
  • 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)

相关

  • Omi的Github地址
  • 如果想体验一下Omi框架,可以访问 Omi Playground
  • 如果想使用Omi框架或者开发完善Omi框架,可以访问 Omi使用文档
  • 如果你想获得更佳的阅读体验,可以访问 Docs Website
  • 如果你懒得搭建项目脚手架,可以试试 omi-cli
  • 如果你有Omi相关的问题可以 New issue
  • 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)

分分快三计划 1

更多插件

  • omi-finger Omi的AlloyFinger插件,支持各种触摸事件和手势
  • omi-transform Omi的transformjs插件,快速方便地设置DOM的CSS3 Transform属性
  • omi-touch Omi的AlloyTouch插件,Omi项目的触摸运动解决方案(支持触摸滚动、旋转、翻页、选择等等)
  • omi-jquery-date-picker 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里的方式,两种方式可以同时出现在项目里,按需选择。

omi-drag

且看这个例子:

点击这里→在线试试

import OmiDrag from './omi-drag.js';

OmiDrag.init();

class App extends Omi.Component {
    constructor(data) {
        super(data);
    }

    render() {
        return  `
        <div>
            <div omi-drag class="test">Drag Me</div>
        </div>
        `;

    }

    style(){
       return `
        <style>
        .test{
            width:100px;
            height:100px;
            color:white;
            line-height:90px;
            text-align:center;
            background-color:#00BFF3;
        }
        </style>
        `
    }
}

Omi.render(new App(),"#container");

如上面的代码所示,通过在div上标记omi-drag,这个div就能够被用户使用鼠标拖拽。我们称omi-drag.js为omi插件。
是不是非常方便?那么这个omi-drag是怎么实现的?

其他

  • 大量的示范例子(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>
        `
    }
}

传递数据

先来看最后实现的效果:

...
...
moveHandlerA(){
    console.log('moving');
}

moveHandlerB(){
    console.log('moving');
}

render() {
    return  `
    <div>
        <div omi-drag class="test" dragMove="moveHandlerA" >Drag Me A</div>
        <div omi-drag class="test" dragMove="moveHandlerB" >Drag Me B</div>
    </div>
    `;
}
...

omi-drag修改的地方:

...
var handlerName = dom.getAttribute('dragMove');

window.addEventListener('mousemove',function(evt){
    if(isMouseDown){
        currentX = evt.pageX;
        currentY = evt.pageY;
        if(preX != null){
            translateX  = currentX - preX;
            translateY  = currentY - preY;
            dom.style.transform = 'translateX(' translateX 'px) translateY(' translateY 'px)';
        }
        preX = currentX;
        preY = currentY;
        evt.preventDefault();
        instance[handlerName](evt);
    }
},false);
...
  • 通过 var handlerName = dom.getAttribute('dragMove') 拿到dom上声明的dragMove
  • 通过 instancehandlerName 去执行对应的方法

点击这里→在线试试

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

插件体系

Omi是Web组件化框架,怎么又来了个插件的概念?

可以这么理解: Omi插件体系可以赋予dom元素一些能力,并且可以和组件的实例产生关联。

强大的Omi团队

分分快三计划 2

  • 来自AlloyTeam、Mars Holding、腾讯、TalkingCoder、阿里、微软的优秀的工程师会协商规划好Omi发展路线,跟进优秀的思想和模式
  • 来自AlloyTeam的工程师会跟进Omi使用者的任何问题

Omi.extendPlugin

核心方法: Omi.extendPlugin( pluginName, handler )

下面的代码就是展示了如何通过 Omi.extendPlugin 赋予dom拖拽的能力:

;(function () {

    var OmiDrag = {};
    var Omi = typeof require === 'function'
        ? require('omi')
        : window.Omi;

    OmiDrag.init = function(){
        Omi.extendPlugin('omi-drag',function(dom, instance){
            dom.style.cursor='move';
            var isMouseDown = false,
                preX = null,
                preY = null,
                currentX = null,
                currentY = null,
                translateX = 0,
                translateY = 0;

            dom.addEventListener('mousedown',function(evt){
                isMouseDown = true;
                preX = evt.pageX;
                preY = evt.pageY;
                evt.stopPropagation();
            },false);

            window.addEventListener('mousemove',function(evt){
                if(isMouseDown){
                    currentX = evt.pageX;
                    currentY = evt.pageY;
                    if(preX != null){
                        translateX  = currentX - preX;
                        translateY  = currentY - preY;
                        dom.style.transform = 'translateX(' translateX 'px) translateY(' translateY 'px)';
                    }
                    preX = currentX;
                    preY = currentY;
                    evt.preventDefault();
                }
            },false);

            window.addEventListener('mouseup',function(){
                isMouseDown = false;
                preX = preY = currentX = currentY = null;
            },false);
        });
    }

    OmiDrag.destroy = function(){
        delete Omi.plugins['omi-drag'];
    };

    if (typeof exports == "object") {
        module.exports = OmiDrag;
    } else if (typeof define == "function" && define.amd) {
        define([], function(){ return OmiDrag });
    } else {
        window.OmiDrag = OmiDrag;
    }

})();

方法: Omi.extendPlugin( pluginName, handler )

其中pluginName为插件的名称
其中handler为处理器。handler可以拿到标记了pluginName的dom以及dom所在的组件的实例,即 dom 和 instance。

通过 Omi.extendPlugin,可以赋予dom元素一些能力,也可以和组件的实例(instance)产生关联。
但是上面的例子没有和instance产生关联,我们接下来试试:

简易的插件体系

  • 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的插件不会有太多。

关联instance

我们想在组件里面能够监听到move并且执行回调。如下:

...
...
moveHandler(){
    console.log('moving');
}

render() {
    return  `
    <div>
        <div omi-drag class="test">Drag Me</div>
    </div>
    `;
}
...

主要被拖动过程中,moveHandler就不断地被执行。插件代码需要修改:

...
window.addEventListener('mousemove',function(evt){
    if(isMouseDown){
        currentX = evt.pageX;
        currentY = evt.pageY;
        if(preX != null){
            translateX  = currentX - preX;
            translateY  = currentY - preY;
            dom.style.transform = 'translateX(' translateX 'px) translateY(' translateY 'px)';
        }
        preX = currentX;
        preY = currentY;
        evt.preventDefault();
        instance.moveHandler(evt);
    }
},false);

我们在里面增加了instance.moveHandler(evt);方法,用来执行组件实例上的moveHandler方法。
这样的话:就是组件的实例(instance)产生关联。但是还是有问题?如果标记了多个omi-drag 就会有问题!如:

...
render() {
    return  `
    <div>
        <div omi-drag class="test">Drag Me</div>
        <div omi-drag class="test">Drag Me</div>
    </div>
    `;
}
...

通常我们系统每个omi-drag都能对应一个回调函数,如:

...
...
moveHandlerA(){
    console.log('moving');
}

moveHandlerB(){
    console.log('moving');
}

render() {
    return  `
    <div>
        <div omi-drag class="test">Drag Me A</div>
        <div omi-drag class="test">Drag Me B</div>
    </div>
    `;
}
...

怎么办?怎么实现?有办法!通过dom传递数据给插件。

写在前面

Omi框架经过几十个版本的迭代,越来越简便易用和强大。
经过周末的连续通宵加班加点,Omi v1.0版本终于问世。虽然版本遵循小步快跑、频繁迭代,但是Omi团队成员都有着克制之心,处女座占了半壁江山,所以Omi的API除了增量的API,其他的历史API没有任何变化。

  • Github:

废话不多说,这就为大家介绍到目前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详细的用法,后续再写文章阐述。

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划