Vue custom instructions to implement V-TAP plug-in _javascript skills

Give up jquery, Embrace MVVM, embrace components!

Vue-touch based on Hammer, for ordinary simple gestures of the page is too large!
So I want to realize one of the most commonly used gestures tap. Along with the custom instructions and plugin documentation, a V-TAP directive was implemented last night, and the dry goods were thrown out.

Introduction to instructions and Plug-ins
Custom directives and plug-ins the official document also describes the more simple and detailed, not too much introduction.
Let me first say that this plugin used three APIs, if you do not understand the best to first look at the document to avoid the following code to see the confused.

Instruction section
1.update (nval,oval)
2.acceptStatement

Plug-in section
Vue.use ()

Then we need to learn the format of writing Vue plug-ins like the jquery plugin.

Continue the Official document

Myplugin.install = function (Vue, options) {
 //1. Add Global method or property
 Vue.myglobalmethod = ...
 2. Add Global resource
 vue.directive (' My-directive ', {})
 //3. Add instance method
 vue.prototype. $myMethod = ...
}

Do you not know what you're looking at? Then we can look directly at the author's plug-in code.

;(function () {

 var vuetouch = {}

 vuetouch.install = function (Vue) {

 vue.directive (' Touch ', {

  isfn:true ,
  acceptstatement:true,

  bind:function () {

  },

  update:function (FN) {

  },

  unbind:function () {

  }
 })
 }

 if (typeof exports = = "Object") {
 module.exports = Vuetouch
 } else if (typeof Defi NE = = "function" && define.amd) {
 define ([], function () {return vuetouch})
 } else if (window. Vue) {
 window. Vuetouch = Vuetouch
 vue.use (vuetouch)
 }

) ()

I have unnecessary extraneous code are deleted, you can find that the format is so, the rest is to use our own JS foundation of the direct writing can.
PS: About isfn:true This attribute, I did not find the relevant information in the document, personally think that may be a note, representing this directive is the need for FN expression (this is the instruction of the expression, see the instruction instance properties).

Just Do it

First, write the outer layer in the plug-in format.

;(function () {
 var vuetap = {};
 Vuetap.install = function (Vue) {

 };

 if (typeof exports = = "Object") {
  module.exports = Vuetap;
 } else if (typeof define = "function" && defin E.AMD) {
  define ([], function () {return vuetap})
 } else if (window. Vue) {
  Window.vuetap = Vuetap;
  Vue.use (VUETAP);
 }

) ();

And then write our own custom instructions in our vuetap.install .

Vue.directive (' tap ', {
  isfn:true,
  bind:function () {

  },
  update:function (FN) {

  }
  , Unbind:function () {},
  istap:function () {
   //judgment is tap
  },
  touchstart:function (e,self) {

  },< C27/>touchend:function (e,self) {

  }}
 );

Since only update has parameters to pass, we can receive expression, so I have the event binding process written in the update.

PS: Of course, there are small partners like to give the FN in this (here is the directve instance), and finally bind the event in bind place. I did not find the specification, I do not know what to write better.

Update:function (FN) {
 var self = this;//save this to facilitate future use
  //directive binding properties and methods
  //All through SELF.XXX Self.touchstart () gets
  self.tapobj = {};//Initializes our Tap object

 if (typeof fn!== ' function ') {
 //You Don't mess with me! return
  console.error (' The param of Directive "V-TAP" must to be a function! ');
 }

 Self.handler = function (e) {///directive save a handler convenient after the current to call
  e.tapobj = self.tapobj; 
  We assign the tap object to the original event object to facilitate the retrieval of the parameter
  Fn.call (self,e) in the callback;

 Peel our start and end out, write on directive
 //As there is only tap event, so we don't need to deal with the move process
 this.el.addEventListener (' Touchstart ', function (e) {
  self.touchstart (e,self);
 },false);

 This.el.addEventListener (' Touchend ', function (e) {
  self.touchend (E,SELF,FN);
 },false);

}

In the update is very simple, is some initialization, event binding and the process of assigning values to the instance.
Finally, it is the istap,touchstart,touchend logic processing.

Istap:function () {
 var tapobj = this.tapobj;
 Return This.time < && math.abs (Tapobj.distancex) < 2 && Math.Abs (Tapobj.distancey) < 2;
},
touchstart:function (e,self) {
 var touches = e.touches[0];
 var tapobj = self.tapobj;
 Tapobj.pagex = Touches.pagex;
 Tapobj.pagey = Touches.pagey;
 Tapobj.clientx = Touches.clientx;
 Tapobj.clienty = Touches.clienty;
 Self.time = +new Date ();
},
touchend:function (e,self) {
 var touches = e.changedtouches[0];
 var tapobj = self.tapobj;
 Self.time = +new Date ()-self.time;
 Tapobj.distancex = Tapobj.pagex-touches.pagex;
 Tapobj.distancey = Tapobj.pagey-touches.pagey;

 if (Self.istap (tapobj))
  Self.handler (e);
}

Finally, there is a big question, how can we make our expression acceptable?

<ul>
 <li v-for= "El in List"
  v-tap= "args ($index, El, $event)"
   >
  {{el.name}}}---{{ El.age}}
 </li>
</ul>

That's going to add a property to our directive Acceptstatement:true (see document Acceptstatement)

Summarize
wrote this V-tap plugin a few tips to share with you.
1. In update, this point is directive instance, not VM, nor DOM
2. You can customize properties and methods in the directive (' name ', {}) object. Call is Self.xxx
3. Open the custom command to accept the inline statement acceptstatement:true
4. Final interface Don't forget Vue.use (obj)
I do not have to v-tap.stop, v-tap.prevent,v-tap.stop.prevent do processing, we can achieve their own! Also ash is often simple.
(I'll add to V-tap later)

Finally threw out GitHub address: Https://github.com/MeCKodo/vue-tap

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.