ES6 模块化和 .vue组件的应用举例

关于ES6 Module 的语法,详情可以查看阮一峰老师的《ECMAScript 6 入门》里面关于Module的章节
Module 的语法

本文主要讲下ES6 模块化与 .vue 组件的一个应用。

ES6 模块与 CommonJS 模块的差异

以下部分内容引用阮一峰老师的《ECMAScript 6 入门》这一章节ES6 模块与 CommonJS 模块的差异
开始之前,必须了解到,ES6 模块与 CommonJS 模块完全不同。
主要有两个差异。

  • CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
  • CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

第二个差异是因为 CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。而 ES6 模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。

下面主要看下第一个差异
CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。看下这个模块文件module.js的例子。

// module.js
let count = 9;
function addCount() {
  count++;
}
module.exports = {
  count: count,
  addCount: addCount,
};

上面代码输出内部变量count和改写这个变量的内部方法addCount。然后,在main.js里面加载这个模块。

// main.js
let mod = require('./module.js');

console.log(mod.count);  // 9
mod.addCount();
console.log(mod.count); // 9

上面代码说明,module.js模块加载以后,它的内部变化就影响不到输出的mod.count了。这是因为mod.count是一个原始类型的值,会被缓存。除非写成一个函数,才能得到内部变动后的值。

// module.js
let count = 9;
function addCount() {
  count++;
}
module.exports = {
  get count() {
    return count;
  },
  addCount: addCount,
};

上面代码中,输出的count属性实际上是一个取值器函数。现在再执行main.js,就可以正确读取内部变量count的变动了。

$ node main.js
9
10

ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。换句话说,ES6 的import有点像 Unix 系统的“符号连接”,原始值变了,import加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。

上面的例子使用ES6 模块化写法:

// module.js
export let count = 9;
export function addCount() {
  count++;
}

// main.js
import { count, addCount } from './module.js';
console.log(count); // 9
addCount();
console.log(count); // 10

上面代码说明,ES6 模块输入的变量count是活的,完全反应其所在模块module.js内部的变化。

export通过接口,输出的是同一个值。不同的脚本加载这个接口,得到的都是同样的实例。(一个模块就是一个实例,或者说就是一个对象)

// module.js
let count = 100;
export default {
    add: function () {
        count += 1;
    },
    show: function () {
        console.log(count);
    }
}

上面的脚本module.js,输出的是一个对象,包含了两个方法。不同的脚本加载这个模块,得到的都是同一个对象。

// a.js
import m from './module.js';
m.add();

// b.js
import m from './module.js';
m.show();

// main.js
import './a.js';
import './b.js';

现在执行main.js,输出的是101。

$ babel-node main.js
101

这就证明了a.js和b.js加载的都是同一个对象。

.vue组件应用举例

<template>
    <div :id="chartId"></div>
</template>
<script>
let chartIdSeed = 1;
export default {
    name: 'my-chart',
    props: ['data'],
    data() {
        return {
            chartId: '',
        }
    },
    created() {
        this.chartId = 'my-chart_' + chartIdSeed++;
    },
    mounted() {
        this.$nextTick(() => {
            let dom = document.getElementById(this.chartId);
            // Do some dom manipulation...
        });
    }
}
</script>

以上代码,当你引入my-chart组件,并多次使用时,每次使用会生成不同的id。
当你的.vue组件需要有不同的id,要做一些dom操作的时候,或许可以采用以上做法。

    原文作者:ican
    原文地址: https://segmentfault.com/a/1190000019852580
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注