In vUE components, methods can only define functions. Sometimes, in the development process, one component may have too many functions, resulting in a lot of functions being defined. In this case, methods are stacked with multiple functions, not to mention occupying space, and it is not easy to find a function during debugging. Here’s a tip for organizing functions in Methods to keep your code clean and tidy.
Catalogued,
The idea is to group the multiple functions listed in the stack, and gather the business-related functions together for unified output. A function is actually an object, and in JS everything is an object. Then I can define an object that returns this set of business-specific functions.
The example of this article is a picture playback function, which plays a bunch of pictures in a certain order, including play, pause, previous, next, first and last. Each function corresponds to a method, which is normally written like this:
methods: {
first(){
//dosomthing
},
pre(){
//dosomthing
},
play(){
//dosomthing
},
next(){
//dosomthing
},
end(){
//dosomthing
},
stop(){
//dosomthing}}Copy the codeNow, with a slight modification, the todo function takes in all of these business-specific methods and returns them as attributes of an object. After doing this, put the todo away and save a lot of space. Isn’t it cool?
methods: {
todo() {
return {
first(){
//dosomthing
},
pre(){
//dosomthing
},
play(){
//dosomthing
},
next(){
//dosomthing
},
end(){
//dosomthing
},
stop(){
//dosomthing}}}}Copy the codeCommand mode
From a design pattern point of view, it’s a bit like a strategy pattern, but it’s not. It’s more like a command pattern, because each method does something different. But these functions are going to be related to each other. For example, when I click the play function, WHEN I click the next one or the last one, I need to stop first, and then go to the required step according to the current picture index. If you are interested in specific logic, you can write a picture playback function to experience.
Call way
This is how it is used at the UI level
<span class="btn">
<img id="first" src="@/assets/img/1.png" @click="todo().first()" />
<img id="pre" src="@/assets/img/2.png" @click="todo().pre()" />
<img id="play" src="@/assets/img/3.png" @click="todo().play()" />
<img id="next" src="@/assets/img/2-2.png" @click="todo().next()" />
<img id="end" src="@/assets/img/1-2.png" @click="todo().end()" />
</span>
Copy the codeOne thing to note when calling at the UI level: Todo is exposed to the methods interface, so todo() must be called to call the function set object returned by the toDO method, and the corresponding function can be called only after the function set object is obtained.
Scope and this problem
Look out, there’s a problem! If you want to call the stop method in the next method, how do you do that? There are several important points to note here.
Look at the code. In the next method, calling stop() like this with “that.stop()” doesn’t work. Because that is the this in the todo function defined earlier, and this refers to the component object. That can only call todo, but stop cannot be called directly.
methods: {
todo() {
var that = this
return {
first(){
//dosomthing
},
pre(){
//dosomthing
},
play(){
//dosomthing
},
next(){
//dosomthing
// How to call stop
that.stop();//undefined
},
end(){
//dosomthing
},
stop(){
//dosomthing
console.log('stop')}}}}Copy the codeIf you don’t see what’s going on, let me explain a few concepts to help you understand.
1. Function scope
Js (ES6) scope has function scope, global scope and block level scope, here only function scope. A variable defined inside a function whose scope is inside the function. If a variable used inside a function is not defined in the current function, it looks up the scope chain until it reaches the global scope, and executes normally if it is found in the upper scope. In this example, variables defined in toDO can be called by their internal objects, but other functions outside the toDO function cannot be called, which is familiar. If you remember, we use this a lot in vUE components. Most of the time, this refers to the component itself, but sometimes it doesn’t.
2. The function’s this pointer
This is very useful in JS, it is used a lot, but you may not understand who this refers to, to really understand how to use it may take some time, here are a few examples to illustrate.
By default this points to
In functions, this by default refers to the global object Window, but the reference to this can change frequently, depending on how you use it. Todo () {this.todo () {this.todo () {this.todo () {this.todo () {this.todo ();
methods: {
todo() {
var that = this
return {
first(){
//dosomthing
},
pre(){
//dosomthing
},
play(){
//dosomthing
},
next(){
//dosomthing
// How to call stop
that.todo().stop();//stop
},
end(){
//dosomthing
},
stop(){
//dosomthing
console.log('stop')
}
}
}
}
todo().netxt();
Copy the codeObject pointing to this after calling its internal method
In another case, in this example, the todo function executes and gets an object, and the todo().next() line means that an object calls a method inside it, and this inside the next function refers to the todo() object itself. This is the object returned from the todo method, so calling other todo() methods from next as mentioned earlier can be done directly with this, as shown in the code. You can debug the code to get a closer look.
methods: {
todo() {
var that = this
return {
first(){
//dosomthing
},
pre(){
//dosomthing
},
play(){
//dosomthing
},
next(){
//dosomthing
// How to call stop
that.todo().stop();//stop
this.stop();//stop
},
end(){
//dosomthing
},
stop(){
//dosomthing
console.log('stop')
}
}
}
}
todo().netxt();
Copy the code3. Arrow function
The special thing about the arrow function is that the this inside of it looks up to its outer function, and it points to whatever the this of the outer function points to. But the arrow function doesn’t work here, because there are no nested functions in this example: the inside of todo is an object, and the inside of an object is a set of parallel functions. We can use this example to make this point clear.
var test = {
name: 'jw'.todo() {
console.log(this.name);//jw
function dowhat(){
console.log(this);//Window
}
dowhat();
var dothis = () = >{
console.log(this)/ / {name: "jw," todo: ƒ}
}
dothis();
}
}
test.todo();
Copy the codeWhen you execute this code, you’ll notice that this in the ordinary function dowhat refers to the window, which we mentioned earlier. This in the ordinary function defaults to the current global object, which is a famous pit in JS, just remember; The “this” in dothis refers to the test object in the arrow function, just as the “this” in todo refers to the “this” in its parent function, which refers to the test object. This is because the Test object calls its internal TOdo method. This is a money-hungry master, and it is inherently rebellious. Whoever can direct its leader (function), it will consider its leader as its own father. This summary is very pithy! Taste.
Ok, today’s vUE development skills to share here, this is obviously a sheep to sell dog meat, dog meat is the scope, this direction, hope for you useful, welcome to like to share, thank you encourage!