码迷,mamicode.com
首页 > Web开发 > 详细

js模块化 ES6规范 使用总结

时间:2020-10-09 20:40:09      阅读:35      评论:0      收藏:0      [点我收藏+]

标签:color   cti   export   default   div   输入   设置   ons   pre   

1.模块化语法

  export  用于规定模块的对外接口

    1 分别暴露 m1.js   

      export let name = ‘zhangning‘;
      export function like(){
        console.log(‘打篮球‘);
      }

    2 统一暴露 m2.js 

      let name = ‘zhangning1‘;
      function job(){
        console.log(‘努力工作‘);
      }
      export {name, job};

    3 默认暴露 m3.js

      export default {
        name: ‘zhangning2‘,
        change: function(){
          console.log(‘改变自己努力学习‘);
        }
      }

  import  用于输入其他模块提供的功能

    1 通用引入 

      import * as m1 from‘/m1.js‘;
      import * as m2 from ‘/m2.js‘;
      import * as m3 from ‘/m3.js‘;

    2 解构赋值形式

      import {name, like} from ‘/m1.js‘;
      import {name as name1, job) from ‘/m2.js‘;// 同一个js中引入不能重名,所以name要用别名
      import {default as m3) from ‘/m3.js‘;

    3 简便形式  只针对默认暴露

      imprt m3 from ‘/m3.js‘;

     浏览器引入方式,可以使用上面三种,

      还可以使用 script 标签中直接引用,设置 type 为 module,在m.js中通过import引入模块

      <script src=‘./m.js‘ type=‘module‘></script>

   

 

js模块化 ES6规范 使用总结

标签:color   cti   export   default   div   输入   设置   ons   pre   

原文地址:https://www.cnblogs.com/zhangning187/p/mkhzj.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!