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

用模块封装代码

在模块顶部创建的变量不会自动被添加到全局共享作用域(模块顶部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语句为变量、函数和类创建的是只读绑定,而不是像正常变量一样简单地引用原始绑定!

  • import语句中默认值必须放到非默认值前面
import sum, {color} from './example.js'

上述,sum为默认值,color为非默认值

  • 无绑定导入,只执行代码,常用于创建polyfill和shim
import './example.js'

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券