xinggevip

Es2015 模块化(一)
index.html<!DOCTYPE html> <html lang="en&qu...
扫描右侧二维码阅读全文
14
2019/06

Es2015 模块化(一)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>es6test</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but es6test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script type="module">
      // export出来的必须用花括号
      // export default出来的不需要花括号
      import abcd from './module/js1.js';
      import {aaa,b,c} from './module/js1.js';
      // 上边两句也可以写成 import abcd,{aaa,b,c}from './module/js1.js';
      console.log(abcd);
      // import * as modTwo from './module/js1.js';
      // let {aaa:a,b,c}  = modTwo
      // console.log(a,b,c);

      import mod,{show,sum,e,f} from './module/js2.js'

      show();
      sum();
      console.log('e是' + e + 'f是' + f);
      let p1 = new mod.person();
      p1.showname('星哥');
      

      


    
    </script>
    <!-- built files will be auto injected -->
  </body>
</html>

js1.js

console.log('模块1');
let a = 1
let b = 12;
let c = 13;
const abcd = 123456
export default abcd;
export {
    a as aaa,  //设置别名
    b,
    c
}

js2.js

const e = 12;
const f = 5;
let sum = ()=>{
    return e + f;
};
let show = ()=>{
    console.log("执行了show");
};
export{
    e,
    f,
    sum,
    show
}

class person{
    const(name,age){
        this,name = name;
        this,age = age
    };
    showname(name){
        console.log(`我的名字叫${name}`);
    }
}


export default{
    person
}
Last modification:June 15th, 2019 at 09:53 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment