Home > Developer > Web Develop
es6Before, you typically use constructors to create objects
//Constructor UserfunctionUser (username, email) { This. Username =username; This. email =email;}//To have the instance share the method, add it to the prototypeUser.prototype.changeEmail =function(newemail) { This. email =Newemail;}//UseLet user =NewUser ("Zen", "[email protected]") User.changeemail ("[Email protected]"); Console.log (User.email); //= "[email protected]"
And es6 then you can write
class User {//when instantiated, call the constructor method, which returns this by defaultConstructor (username, email) { This. Username =username; This. email =email; } //all methods of the class are automatically bound to the prototype object, including the constructorChangeemail (newemail) { This. email =Newemail; }}//UseLet user =NewUser ("Zen", "[email protected]") User.changeemail ("[Email protected]"); Console.log (User.email); //= "[email protected]"
A static method can be defined in a class, or it can be used get with set access control:
class User {constructor (username, email) { This. Username =username; This. email =email; } changeemail (Newemail) { This. email =Newemail; } Static register (.... args) {return NewUser (... args); } //equivalence //Static register (username, email) { //return new User (username, email); // }Get Info () {return This. Username + "" + This. Email; } //Capitalize first characterset Name (name) { This. Username = Name.slice (0,1). toUpperCase (). Concat (Name.slice (1)); }}//UseLet user = User.register ("Zen", "[email protected]") Console.log (user.info)//Zen [email protected]User.Name = "Jack"Console.log (user.info)//Jack [email protected]
A class can be passed as a parameter:
function log (strategy) { strategy.handle ();} Class Consolelogger { handle () { console.log ("log Log");} } Log (new consolelogger); // = = Log log logModule
TaskCollection.jsdefine a class in
class Taskcollection { = []) { this. Tasks= tasks; } Dump () { Console.log (this. Tasks); }}main.jsUse this class in
New taskcollection ([ ' Shop ', ' eat ', ' sleep ']); Tc.dump ();
index.html-Displays the page. If this is to take effect, only two files can be introduced simultaneously without using a third-party library
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <Scriptsrc= "Taskcollection.js"></Script> <Scriptsrc= "Main.js"></Script></Body></HTML>
In doing so, we will not be able to see the Association (load) between each other, and main.js TaskCollection.js therefore es6 provide the solution, the module. Through export and import to achieve
TaskCollection.js-Use export the command to explicitly specify the code for the output
//Output ClassExport Class Taskcollection {constructor (Tasks= []) { This. Tasks =tasks; } dump () {Console.log ( This. Tasks); }}//output FunctionExportfunctionfoo () {Console.log ("Foo");}//Output VariablesExport Let bar = 123;//can be unified output to make it at a glance//Export {taskcollection, foo, bar};
main.js-Using the import load module
Import {taskcollection, Foo, bar as Bar1} from './taskcollection 'new taskcollection ([ ' Shop ', ' eat ', ' sleep 'index.html-only need to referencemain.js
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <Scriptsrc= "Main.js"></Script></Body></HTML>
Because the current browser does not yet support the ES6 syntax, we can use the packaging tool. Here's a simple two.
Rollup.jsGlobal Installation
$ CNPM Install--global Rollup
Use
$ rollup main.js--format iife--output bundle.js # Specifies the format for the client as Iife
Then you only need to reference the generatedbundle.js
index.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body> <Scriptsrc= "Bundle.js"></Script></Body></HTML>Webpack
Installation
$ CNPM install-g Webpack
Packaged
$ webpack main.js bundle.js
Or use it under the current project
$ cd webpack-demo-2--save-dev
Create a profile and set it up
/webpack-demo-2/webpack.config.jsvar webpack = require (' webpack '= { './ Main.js ', output: { './dist/main.js '} }Packaged
$ webpack
It is usually added to the package.json
webpack-demo-2/package.json
{ "devdependencies": { "webpack": "^2.5.1" }, "Scripts": { " Build ":" Webpack "} }
Now, you just need to run
Convert JS$ CNPM Run Build
It can be noted that rollup and webpack all are simply packaged and not converted to compatible js .
//Partially packaged Code//Dist/main.js"Use Strict";/*Harmony Export (immutable)*/__webpack_exports__["B"] =foo;/*Harmony Export (binding)*/__WEBPACK_REQUIRE__.D (__webpack_exports__, "C",function() {returnBar;});//The Export command explicitly specifies the code for the output//Output Classclass Taskcollection {constructor (Tasks= []) { This. Tasks =tasks; } dump () {Console.log ( This. Tasks); }}
Here take Webpack as an example, explain how to convert to a compatible JS, first install the relevant tools
$ cnpm Install--save-dev buble-loader buble
Add to
/webpack-demo-2/webpack.config.js
var webpack = require (' webpack '= { './main.js ', output: { './dist/ Main.js ' }, module: { loaders: [ { /.js$/, ' Buble-loader ' } ] }}
Perform
$ CNPM Run Build
Now, you can find the JS that has been converted to compatible
"Use Strict";/*Harmony Export (binding)*/__WEBPACK_REQUIRE__.D (__webpack_exports__, "a",function() {returntaskcollection;});/*Harmony Export (immutable)*/__webpack_exports__["B"] =foo;/*Harmony Export (binding)*/__WEBPACK_REQUIRE__.D (__webpack_exports__, "C",function() {returnBar;});//The Export command explicitly specifies the code for the output//Output ClassvarTaskcollection =functionTaskcollection (tasks) {if(Tasks = = =void0) Tasks = []; This. Tasks =tasks;}; TaskCollection.prototype.dump=functiondump () {Console.log ( This. tasks);};
Es6 to learn vue.js (2)
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
