Since I have been working on some front-end projects recently and have taken over Weex projects, I can't help but deal with Vue, and js is also from the beginning to the learning process. The project uses Vue's plug-in mechanism, so the source code I read is relatively simple and suitable for novices to read, so I recorded it to avoid forgetting.
grateful
The last chapter of this article [combined with actual scenarios] is a referenceeros Thanks to the development of this open source project.
What is a Vue plugin
You can check out what is a Vue pluginThe official website explanation, in general, it is to provide a global registration/call capability.
How to use it
Let's take Weex as an example.
First there is one
const Toast = {}
= (Vue, options) => {
.$toast = (msg, duration = 0.8) => {
const modal = ('modal')
({
message: msg,
duration: 0.8
})
}
}
(Toast)
It's very simple, it defines a toast opposite, and then creates an install method for the Toast object. The method creates a $toast method for the Vue prototype. The method is to call modal to pop up a toast, and finally use the method to register the Toast plugin.
Then we have one more:
<template>
<div>
<div class="box" @click="onclick" @longpress="onlongpress" @appear="onappear" @disappear="ondisappear"></div>
</div>
</template>
<script>
const modal = ('modal')
export default {
methods: {
onclick (event) {
this.$toast("aaa", 0.8)
},
onlongpress (event) {
('onlongpress:', event)
({
message: 'onlongpress',
duration: 0.8
})
},
onappear (event) {
('onappear:', event)
({
message: 'onappear',
duration: 0.8
})
},
ondisappear (event) {
('ondisappear:', event)
({
message: 'ondisappear',
duration: 0.8
})
}
}
}
</script>
<style scoped>
.box {
border-width: 2px;
border-style: solid;
border-color: #BBB;
width: 250px;
height: 250px;
margin-top: 250px;
margin-left: 250px;
background-color: #EEE;
}
</style>
This.$toast is called in it to use the plugin method.
From this we can know that the plug-in mechanism of Vue is registered through methods.
Source code analysis
= function (plugin) {
if () {
return
}
var args = toArray(arguments, 1);
(this);
if (typeof === 'function') {
(plugin, args);
} else if (typeof plugin === 'function') {
(null, args);
}
= true;
return this
};
function toArray (list, start) {
start = start || 0;
var i = - start;
var ret = new Array(i);
while (i--) {
ret[i] = list[i + start];
}
return ret
}
The use method is very simple:
0x01: Determine whether the plug-in has been registered. If it has been registered, return it directly to prevent repeated registration.
0x02: Then use the toArray method to convert the Arguments class array into real data and remove the first element.
0x03: Add this, that is, Vue instance to the args array generated by toArray.
0x04: Determine whether the parameter plugin of use is install or not. If so, call the method directly.
0x05: If the fourth step is false, it is determined whether plugun itself is a method. If it is a method, it is used instead of install to execute.
0x06: Set the installed flag of the plugin to true.
In just 6 steps, the use method is analyzed. In fact, it is to execute the plug-in install method. Based on the above example, we know that install is assigned $toast to Vue's prototype, which can be used elsewhere.
Combined with actual scenarios
After learning the plug-in mechanism of Vue, what can we use this mechanism to do? Let's look at it in combination with Weex.
First of all, we know that Weex sends bundles to the client and renders them, so the loading time of a page depends on two parts: bundle download time and bundle rendering time. Without considering the local cache, the size of the bundle directly determines its download time and the traffic consumed by the user, so we need to have a way to reduce the size of the bundle as much as possible. Here, the Vue plug-in mechanism can be useful.
First of all, we put some basic code that is shared and not very changed. In this way, the content in the bundle should be pure business-related code. After downloading the bundle, manually splicing the client's basic js onto the bundle, so that the size of the bundle can be effectively reduced. If you want to use this method, you must register the basic js through the Vue plug-in mechanism and call it globally in the business js, otherwise it cannot be spliced (unless your basic js is not packaged through webpack). After all, all the code after webpack is packaged is closed and cannot be called with each other.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.