當耐特

插件體系

Omi是Web組件化框架，怎么又來了個插件的概念？

可以這么理解: Omi插件體系可以賦予dom元素一些能力，并且可以和組件的實例產生關聯。

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是怎么實現的？

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產生關聯，我們接下來試試:

關聯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傳遞數據給插件。

傳遞數據

先來看最后實現的效果:

...
...
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 去執行對應的方法

點擊這里→在線試試

更多插件

• omi-finger Omi的AlloyFinger插件，支持各種觸摸事件和手勢
• omi-transform Omi的transformjs插件，快速方便地設置DOM的CSS3 Transform屬性
• omi-touch Omi的AlloyTouch插件，Omi項目的觸摸運動解決方案（支持觸摸滾動、旋轉、翻頁、選擇等等）
• omi-jquery-date-picker 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)