Home > Developer > JavaScript
Decorators, literally, is what the decorator means. Decoration means, I think we all understand, is to beautify an object, let it become more beautiful. The real example is the house decoration. You bought a house, but the blank room, you certainly do not want to live, it is decorated, bed, desk, TV, refrigerator and so on a buy, the house becomes beautiful, live also comfortable, at the same time the function is also strong, because we can watch TV, the internet.
Js , the role of decorators is the same, to a class or its property method to decorate, make it more powerful function. The syntax is very simple, which is to precede a class or its property method with @decorator,decorator refers to the name of the adorner. The adorner itself is a function, because inside the function, we can do anything to enhance it.
A little bit sorry, now the browser has not supported it, but we have a strong Babel, can use Babel to convert, is the configuration a bit troublesome, before learning, we first use Webpack to configure a simple learning environment.
The conversion of adorners relies on a core plugin babel-plugin-transform-decorators-legacy. Create a new decorator folder, NPM Init-y initialize the project, install various dependent NPM install Webpack webpack-dev-server babel-core Babel-loader Ransform-decorators-legacy--save-dev, and then create a new index.js as a portal file, index.html for presentation, webpack.config.js configuration file,
Webpack.config.js configuration file with Transform-decorators-legacy plugin configured in Babel-loader options
Const PATH = require (' path '= { ' index.js '), output: { path:path.join (__dirname), ' bundle.js ' }, module: { rules: [ { /\.js$/, ' Babel-loader ', ' node_modules '), options: { plugins: [' Transform-decorators-legacy ']}}} }Because the file is bundle.js after Webpack is packaged, Bundle.js is introduced in index.html, index.html as follows
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <Scriptsrc= "Bundle.js"></Script></Body></HTML>
Write something in index.js and verify that a configuration is correct
Document.body.innerHTML = ' Blue ';
In the Package.json file, write "Dev" in the Scripts field: "Webpack-dev-server"
Start the Command window in the Decorator folder and enter NPM run Dev to see that the project started successfully, enter locolhost:8080 in the browser, and you can see that blue indicates a successful configuration
Environment has been set up, we can now learn decorator and its use. First, the decorator is on the class, so declare a class, like car,
Class Car { }Second, decorators is a function, then we write a function that is directly named decorators, and this function must have a parameter to specify the object it is to decorate, the parameter name is usually the target
function Decorators (target) { = ' black ';}We have defined a property color for target, so we can infer that the class to be decorated has a color property. To decorate a class, we just write the adorner on top of the class @decorators, we can print, our guess is not correct, the whole index.js file is as follows:
// Adorner Functions function Decorators (target) { = ' black ';} // @decoratorsclass Car { }console.log (car.color); // Enter Black
The understanding and use of JavaScript decorators
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
