深入理解ES6--用模块封装代码

奋飛

发布于 2019-08-14 18:04:20

1.2K0

发布于 2019-08-14 18:04:20

文章被收录于专栏：Super 前端Super 前端

用模块封装代码

在模块顶部创建的变量不会自动被添加到全局共享作用域（模块顶部this的值为undefined），必须导出后，外部代码才可访问。

浏览器中使用模块

<script>的type属性缺失或者包含一个javascript内容类型（如，text/javascript）时作为脚本加载；type属性值为“module”时支持模块加载（如果浏览器不支持，会自动向后兼容）。

<script type="text/javascript">
  var a = 'a';
</script>
<script type="module">
  var b = 'b';
</script>

<script>
    console.log(window.a);  // a
    console.log(window.b);  // undefined
</script>

注意：type="module"会自动应用defer属性。也可将模块作为Worker加载，let worker = new Worker("module.js", {type: "module"})。Worker脚本只能从引用的网页相同的源加载；Worker模块不会完全受限（可以加载并访问具有适当的跨域资源共享头的文件）

导出

导出的函数和类声明需要有一个名称，除非用default关键词，否则不能导出匿名函数或类。同时需要注意导出变量名或者函数名称需要增加{}

const foo = 'bar';
export foo;   // Error Unexpected token, expected { 
export {foo}; // Correct

导入、导出时可以进行重命名

export { sum as add }
import { add as sum }

一个模块只能设置一个默认导出值

导入

import必须包含导入的标识符和从哪个模块导入。注意，导入绑定的列表看起来与解构对象很相似，但其作用不一样，其更像是使用const定义一样。

import { identifier1, identifier2} from './example.js'
identifier1 = 1; // Error

为了兼容更多浏览器和Node环境，导入模块路径之前要包含/、./、../来表示导入的文件

导入整个模块，然后所有导出都可以作为对象（命名空间）的属性使用

import * as example from './example.js'
example.identifier1;

不管在import语句中把一个模块写了多少次，该模块只执行一次。导入模块的代码执行后，实例化过的模块被保存在内存中，其他import语句可以重复使用它。如果一个应用程序中的其他模块也对同一模块导入，那么这些模块使用相同的导入实例，这就是util.js中new Vue()全局通用的原因（在Vue项目中文名经常会借助此实现兄弟组件传值）！

import { identifier1 } from './example.js'
import { identifier2 } from './example.js'

上述example只被加载一次！

/*person.js*/
var name = 'ligang'
function setName(newName) {
  name = newName;
}
export {setName, name};

<!--person1.vue-->
<template>
  <div>
    <p>{{name}}</p>
    <button @click="setName">设置名称</button>
  </div>
</template>
<script>
  import {name, setName} from './person.js'
  export default {
    data() {
      return {
        name: name
      }
    },
    methods: {
      setName() {
        // name = 'lg';
        setName('lg')
      }
    }
  }
</script>

<!--person2.vue-->
<template>
  <div>
    <p>{{name}}</p>
  </div>
</template>
<script>
  import {name} from './person.js'
  export default {
    data() {
      return {
        name: name
      }
    }
  }
</script>

在person1.vue中点击“设置名称”按钮，切换到person2.vue，name名称会变为‘lg’！注意，不能在person1.vue中直接修改name，因为import语句为变量、函数和类创建的是只读绑定，而不是像正常变量一样简单地引用原始绑定！