Vue.USE Source Code Summary

Due to recent projects that are doing some front-end, and take over WeEX project, it is inevitable that VUE has been handed over, and JS is also from entry to learning. The project used Vue plug-in mechanism, so I looked at the source code of Vue.use, but also relatively simple, suitable for novice reading, so recorded to avoid forgetting.

The last chapter of this article [Combined with the actual scene] is the open source project of Eros, thank the EROS project group.

What is the VUE plugin

About what is the VUE plugin, you can see the explanation of the official website, always say that it is to provide a global registration / call .

How to use

We take WeEx as an example.

First there is a toast.js

const toast = {} TOAST.INSTALL = (Vue, Options) => {Vue.Prototype. $ TOAST = (msg, duration = 0.8) => {const modal = weex.requiremodule (‘modal’) MODAL.TOAST ({Message: msg, duration: 0.8})}} Vue.use (toast)

  It is very simple, that is, it defines a toast opposite, then create an install method to the Toast object, and creates a $ toast method to the Vue's prototype. This method is to call MODAL to play a Toast. Finally, use the Vue.use method to register this toast plugin.  
Then we have oneINDEX.VUE:

const modal = weex.requiremodule (‘modal ” Export Default {Methods: {onClick (Event) {this. $ TOAST (“AAA”, 0.8)}, ONLONGPRESS (Event) {Console.log (‘OnlongPress:’, Event) Modal.Toast ({Message: ‘OnlongPress ‘, duration: 0.8})}, onappear (event) {Console.log (‘ onappear: ‘, event) Modal.Toast ({Message:’ onappear ‘, duration: 0.8})}, ONDISAPPEAR (Event) {Console. LOG (‘OnDisappear:’, Event) Modal.Toast ({Message: ‘OnDisappear’, Duration: 0.8})}}}
  .box {border-width: 2px; border-style: solid; border -COLOR: #bbb; width: 250px; healthht: 250px; margin-top: 250px; margin-left: 250px; Background-color: #eee;}  
This is called this. $ Toast to use the plugin method. From this we can know that Vue's plug-in mechanism is registered through the Vue.use method.

vue.use = function (plugin) {if (plugin.installed) {return} Var Args = Toarray (Arguments, 1); args.unshift (this); if (TypeOf plugin.install === ‘function’) {plugin.install.Apply (plugin, args);} else if (Typeof plugin == = ‘function’) {plugin.apply (null, args);} plugin.installed = true; returnim}; function toarray (list, start) {start = start || 0; var i = list.length – start; Var rett = new array (i); while (i–) {RET [i] = list [i + start];} return Ret}

The USE method is very simple:
0x01: Determine if the plugin has been registered, if it has been registered directly, it directly returns.

0x02: Then convert the arguments class arrays into real data through the toaRray method and remove the first element. 0x03: THIS is added to the ARGS array generated by the Vue instance.
 0x04: Judging that the incoming parameters of the USE are install whether it is a method, if so, the method is called directly.  0x05: If the fourth step is False, it is determined that the plugun itself is a method. If it is a method, use itself instead of INSTALL.  0x06: Sets the Plugin's Installed marker bit to true. 
As so much from this simple 6 step, the USE method is analyzed, in fact, in order to perform the INSTALL method of the plugin, combine the above example we know that in install, the $ TOAST assigned to Vue’s Prototype, It can be used elsewhere elsewhere.

Combined with the actual scene

Learn the Vue plug-in mechanism, then what do this mechanism we can do? We are in conjunction with WeEx.

First, we know, weeX is to issue bundle to the client and rendered, so the load time of a page depends on two parts: bundle download time, bundle rendering time. In the case where the local cache is not considered, the Bundle’s size directly determines its download time, and the traffic consumed by the user, so we need to have a way to decrease this bundle’s volume. The plugin mechanism of Vue here can be used on the field.

First we share some of the shared, not too changed the basis of the basic code on the client, so that the content in the bundle should be a pure business related code,BUNDLE Download, manually put the client’s base JS on bundle so that it can effectively reduce the volume of bundle, and want to use this way, you must register the base JS through the Vue plugin mechanism, business JS globally Call, otherwise you can’t splicing (unless your base JS is not packaged by WebPack), all the code after WebPack packages is closed and cannot be adjusted to each other.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment