Omi教程-插件体系

   <h2>插件体系</h2>    <p>Omi 是Web组件化框架，怎么又来了个插件的概念？</p>    <p>可以这么理解: Omi插件体系可以赋予dom元素一些能力，并且可以和组件的实例产生关联。</p>    <h2>omi-drag</h2>    <p>且看这个例子:</p>    <p> </p>    <pre>  <code class="language-javascript">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>    <p>如上面的代码所示，通过在div上标记omi-drag，这个div就能够被用户使用鼠标拖拽。我们称omi-drag.js为omi插件。</p>    <p>是不是非常方便？那么这个omi-drag是怎么实现的？</p>    <h2>Omi.extendPlugin</h2>    <p>核心方法: Omi.extendPlugin( pluginName, handler )</p>    <p>下面的代码就是展示了如何通过 Omi.extendPlugin 赋予dom拖拽的能力:</p>    <pre>  <code class="language-javascript">;(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>    <p>方法: Omi.extendPlugin( pluginName, handler )</p>    <p>其中pluginName为插件的名称</p>    <p>其中handler为处理器。handler可以拿到标记了pluginName的dom以及dom所在的组件的实例，即 dom 和 instance。</p>    <p>通过 Omi.extendPlugin，可以赋予dom元素一些能力，也可以和组件的实例(instance)产生关联。</p>    <p>但是上面的例子没有和instance产生关联，我们接下来试试:</p>    <h2>关联instance</h2>    <p>我们想在组件里面能够监听到move并且执行回调。如下:</p>    <pre>  <code class="language-javascript">...  ...  moveHandler(){      console.log('moving');  }    render() {      return  `      <div>          <div omi-drag class="test">Drag Me</div>      </div>      `;  }  ...</code></pre>    <p>主要被拖动过程中，moveHandler就不断地被执行。插件代码需要修改:</p>    <pre>  <code class="language-javascript">...  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);</code></pre>    <p>我们在里面增加了instance.moveHandler(evt);方法，用来执行组件实例上的moveHandler方法。</p>    <p>这样的话:就是组件的实例(instance)产生关联。但是还是有问题？如果标记了多个omi-drag 就会有问题！如:</p>    <pre>  <code class="language-javascript">...  render() {      return  `      <div>          <div omi-drag class="test">Drag Me</div>          <div omi-drag class="test">Drag Me</div>      </div>      `;  }  ...</code></pre>    <p>通常我们系统每个omi-drag都能对应一个回调函数，如：</p>    <pre>  <code class="language-javascript">...  ...  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>    <p>怎么办？怎么实现？有办法！通过dom传递数据给插件。</p>    <h2>传递数据</h2>    <p>先来看最后实现的效果:</p>    <pre>  <code class="language-javascript">...  ...  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>    <p>omi-drag修改的地方:</p>    <pre>  <code class="language-javascript">...  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);  ...</code></pre>    <ul>     <li>通过 var handlerName = dom.getAttribute('dragMove') 拿到dom上声明的dragMove</li>     <li>通过 instancehandlerName 去执行对应的方法</li>    </ul>    <h2>更多插件</h2>    <ul>     <li><a href="/misc/goto?guid=4959739471036926655" rel="nofollow,noindex">omi-finger</a> Omi的 <a href="/misc/goto?guid=4959673799007818031" rel="nofollow,noindex">AlloyFinger</a> 插件，支持各种触摸事件和手势</li>     <li><a href="/misc/goto?guid=4959739471153072083" rel="nofollow,noindex">omi-transform</a> Omi的 <a href="/misc/goto?guid=4959739471264178076" rel="nofollow,noindex">transformjs</a> 插件，快速方便地设置DOM的CSS3 Transform属性</li>     <li><a href="/misc/goto?guid=4959739471345905258" rel="nofollow,noindex">omi-touch</a> Omi的 <a href="/misc/goto?guid=4959728755439180524" rel="nofollow,noindex">AlloyTouch</a> 插件，Omi项目的触摸运动解决方案（支持触摸滚动、旋转、翻页、选择等等）</li>     <li><a href="/misc/goto?guid=4959739471465043136" rel="nofollow,noindex">omi-jquery-date-picker</a> Omi的时间选择插件，支持各种时间或者时间区域选择</li>    </ul>    <h2>相关</h2>    <ul>     <li>Omi的Github地址 <a href="/misc/goto?guid=4959739471547175854" rel="nofollow,noindex">https://github.com/AlloyTeam/omi</a></li>     <li>如果想体验一下Omi框架，可以访问 <a href="/misc/goto?guid=4959739471635992727" rel="nofollow,noindex">Omi Playground</a></li>     <li>如果想使用Omi框架或者开发完善Omi框架，可以访问 <a href="/misc/goto?guid=4959739471718516653" rel="nofollow,noindex">Omi使用文档</a></li>     <li>如果你想获得更佳的阅读体验，可以访问 <a href="/misc/goto?guid=4959739471798222858" rel="nofollow,noindex">Docs Website</a></li>     <li>如果你懒得搭建项目脚手架，可以试试 <a href="/misc/goto?guid=4959739471889638560" rel="nofollow,noindex">omi-cli</a></li>     <li>如果你有Omi相关的问题可以 <a href="/misc/goto?guid=4959739471979547908" rel="nofollow,noindex">New issue</a></li>     <li>如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)</li>    </ul>    <p> </p>    <p>来自：http://www.cnblogs.com/iamzhanglei/p/6482688.html</p>    <p> </p>