Omi教程-插件體系
插件體系
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");</code></pre>
如上面的代碼所示，通過在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;
}
})();</code></pre>
方法: 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>;
}
...</code></pre>
主要被拖動過程中，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>;
}
...</code></pre>
怎么辦？怎么實現？有辦法！通過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>;
}
...</code></pre>
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();
instancehandlerName;
}
},false);
...</code></pre>
- 通過 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)
來自：http://www.cnblogs.com/iamzhanglei/p/6482688.html