之前对代码中直接调用DragMove的过程进行了封装，把它转移到v-dragmove指令中。一切都很美好，数据到dom在模板里，数据的处理在组件里。
传送门: https://www.jianshu.com/p/5b20207be9de
之后，宁哥又提了一个需求，现在项目中有很多需要记录位置的功能，这些与业务无关的功能侵蚀了业务代码，使得业务代码臃肿而每次都要做一些重复的开发，这些逻辑能封装到里面么？
我说可以啊，不过这样指令就不只是调用一下目标方法，参数坐下适配的适配器的工作了，多加了一个 保存位置的代理的功能。这样这个指令就相当于 适配器 + 代理了。
具体需求是这样的：路由切换，组件会销毁，在切换回来，组件会重新创建。要求可以在切换回来的时候恢复之前的拖动位置。
分析：恢复之前的位置需要一个全局的地方来保存这个位置，并且需要用唯一的id来关联组件，位置可以保存在vuex、localStorage、自己维护的一个内存中的数据结构等。 这里的数据是与业务无关的，而且指令不应该依赖vuex，所以，我自己维护了一个position的Map，而id的话，用元素的id就可以了，刚好满足唯一和关联组件两个需求。剩下的就是在 dragEndHandler加上保存位置、在指令所作用的元素刚插入父元素（inserted方法）时恢复位置。
可视化表达一下：
代码如下：
import DragMove from 'drag-move';
const install = (Vue) => {
//所有的拖动位置信息
const positionMap = new Map();
//重置位置
const resetPosition = (element, positionId) => {
if (positionMap.has(positionId)) {
const position = positionMap.get(positionId);
element.style += `;left:${position.left}px;top:${position.top}px;`;
}
}
//保存位置
const savePosition = (positionId, position) => {
positionMap.set(positionId, position);
}
//代理拖动结束handler
const proxyDragEndHandler = (dragEndHandler, positionId) => {
return (position) => {
savePosition(positionId, position);
dragEndHandler.apply(null, position);
}
}
/**
* dragmove指令
* 用法：
*/
Vue.directive('dragmove', {
inserted(el, binding) {
const options = {...binding.value, id: binding.arg};
const positionId = options.id;
resetPosition(el, positionId);
if (binding.modifiers.save) {
let dragEndHandler = options.dragend || function() {};
options.dragend = proxyDragEndHandler(dragEndHandler, positionId);
}
new DragMove(options);
}
});
}
module.exports = install;
这里的positionMap就是全局位置数据存储的地方，savePosition和resetPosition就是组件和positionMap之间交流position数据的方法。
经过测试，是可以满足需求的，用法如下：
v-dragmove:id.save="{}"
v-dragmove:id="{}"
带.save修饰符的会保存位置，否则不会。
不过这里有两个需要注意的地方，一是因为id直接用的元素id，需要保证元素id全局唯一，二是this的问题，如果handler里面用到了this，需要手动bind一下
v-dragmove:id.save="{dragend:dragEndHanlder.bind(this)}"
封装的价值
对比下重构前后的原理图
没封装成指令之前：
封装成指令之后：
你会发现其实只是把逻辑移动了个位置，都封装到指令里，这样，会使得整体可复用。而不是分散的写多份。封装的意义就是复用。
可以删掉的一些代码：
组件中业务无关的逻辑少了很多
收获
总结一下开发这个指令的收获：
参数放到 value和arg里， 其余的一些控制放到modifer里
如：v-example:arg.a.b.c="value"， 这里通过a、b、c来控制功能，value和arg来传参指令不应该依赖vuex，也不要依赖localStorage，需要全局数据的时候应该自己维护一个内存中的数据结构，比如这里的positionMap。这样的指令才是通用的。
指令的职责应该单一，比如dragmove这个指令就只是封装了拖动相关的逻辑，包括拖动位置的保存。
4.vue的指令有一个坑，当两个指令同时修改了一个属性的时候，没法保证顺序，所以dragmove的初始位置是用css设置的，之后通过指令修改style