Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is the use of javascript modifiers". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the use of javascript modifiers"?

What is a modifier?

Decorator is a proposal of ES7, and its emergence can solve two problems:

Sharing method between different classes

Change the behavior of classes and methods at compile time

The usage is also very simple, which is to add an @ character to the class or method, which is often used in vue in typescript

The above two uses may not be quite clear, it doesn't matter, let's start with the first example.

Example 1: decorating class

@ setPropclass User {} function setProp (target) {target.age = 30} console.log (User.age)

The purpose of this example is to modify the User class using the setProp method to add the property of age in the User class. The setProp method takes three parameters. We will now touch the first one. Target represents the User class itself.

Example 2: modifier class (custom parameter values)

@ setProp (20) class User {} function setProp (value) {return function (target) {target.age = value}} console.log (User.age)

This example is basically the same as the above function, except that the value is passed by the reference modifier function.

Example 2: modification method

Class User {@ readonly getName () {return 'Hello World'}} / / readonly modifies the function and performs a read-only operation on the method function readonly (target, name, descriptor) {descriptor.writable = false return descriptor} let u = new User () / / attempts to modify the function, and an error will be reported on the console u.getName = () = > {return' I will override'}

In the above example, we modify the getName method in the User class with the readonly modifier so that the method cannot be modified. We already know the first parameter. The parameter name is the method name, that is, readonly. What is the parameter descriptor? when we see this line descriptor.writable = false, we have almost guessed. These three parameters correspond to the three parameters of Object.defineProperty. Let's take a look:

We set descriptor.writable = false so that the function cannot be modified, if we write as

Descriptor.value = 'function () {console.log (' Hello decorator')}'

So, the output is Hello World, but Hello decorator, are you aware of the benefits of the modifier? Now let's take a look at an example of how we use modifiers in practice.

Practical application 1: log management

When packaging with webpack, we often need many steps, such as the first step to read the package.json file, the second step to process the file, the third step to load the webpack.base.js file, and the fourth step to package. In order to be intuitive, we often print some log files at each step, such as what has been done in this step. It is obvious that the operation of printing the log has nothing to do with the business code at all. We should not mix the log with the business. In this way, the modifier is used to avoid this problem. Here is the code:

Class Pack {@ log ('read package.json file') step1 () {/ / do something... / / before there is no modifier, we usually put console.log here to write / / write in the function will have two disadvantages / / 1.console has nothing to do with business, and will break the principle of function oneness / / 2. If we want to delete all console, we can only drill down to each method} @ log ('merge webpack configuration file') step2 () {/ / do something... }} function log (value) {return function (target, name, descriptor) {/ / here, we can also get the parameters of the function and print more detailed information console.log (value)}} let pack = new Pack () pack.step1 () pack.step2 ()

Practical application 2: check login

This example is commonly used in actual development. Before we do some operations, we have to judge whether the user is logged in, compare likes, settle accounts, and send on-screen comments. According to the previous way of writing, we have to judge the login status of the user in each method, and then carry on the business operation. Obviously, the precondition and the business are mixed together again. With the modifier, we can solve this problem perfectly. The code is as follows:

Before class User {/ / get the user information of logged-in users @ checkLogin getUserInfo () {/ *, we would write: * if (checkLogin ()) {* / / business code *} * whether this code will be executed in every method that requires login * or the above problem The premise of execution and business are mixed again * / console.log ('get user information of logged-in user')} / / send a message @ checkLogin sendMsg () {console.log ('send message')}} / / check whether the user is logged in, if not Jump to the login page function checkLogin (target, name, descriptor) {let method = descriptor.value / / simulate judgment conditions let isLogin = true descriptor.value = function (... args) {if (isLogin) {method.apply (this, args)} else {console.log ('not logged in, about to jump to the login page.')}} let u = new User () u.getUserInfo () u.sendMsg () Thank you for your reading The above is the content of "what is the use of the javascript modifier". After the study of this article, I believe you have a deeper understanding of the use of the javascript modifier, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.