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

更新日期: 2019-07-23阅读: 3.7k标签: 模块化

关于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 module = require('./module.js');

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

上面代码说明,module.js模块加载以后,它的内部变化就影响不到输出的module.count了。这是因为module.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操作的时候,或许可以采用以上做法。

来自:https://segmentfault.com/a/1190000019852580


链接: https://fly63.com/article/detial/4340

一览js模块化:从CommonJS到ES6

模块化是指把一个复杂的系统分解到一个一个的模块。模块化开发的优点:代码复用,让我们更方便地进行代码管理、同时也便于后面代码的修改和维护。一个单独的文件就是一个模块,是一个单独的作用域,只向外暴露特定的变量和函数。

JS模块化

CommonJS 是服务器端的模块化方案,nodeJs 就采用了这种方案。在 CommonJS 规范中,一个文件即一个模块,用module.exports和exports定义模块输出的接口,用require加载模块。在 requireJS 中用define定义模块,require载入模块,require.config用来配置路径。ES6 Module 主要使用export输出,import加载。

js模块化总结

在很长的一段前端历史里,是不存在打包这个说法的。那个时候页面基本是纯静态的或者服务端输出的, 没有 AJAX,也没有 jQuery。Google 推出 Gmail 的时候(2004 年),XMLHttpRequest, 也就是我们俗称的 AJAX被拾起的时候

AMD 模块化最佳实践

AMD 是 RequireJS 给出的模块加载方案。 支持递归依赖解析、模块异步加载,夜兼容 CommonJS 可以在 Node.js 里用。 虽然目前已经不再流行,很多站点更倾向于编写 ES Modules 并直接 Webpack 打包, 但 AMD 是完整的

Js模块化方案总结

本文包含两部分,第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法,第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何指定打包配置中的模块化参数。

css模块化方案

这篇文章主要介绍了css模块化方案,css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案,非常具有实用价值,需要的小伙伴可以参考下。css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案

理解JS 模块化

在模块化规范形成之前,JS开发者使用Module设计模式来解决JS全局作用域的污染问题。Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。在JavaScript中,Module模式使用匿名函数自调用 (闭包)来封装

前端模块化

众所周知,早期 JavaScript 原生并不支持模块化,直到 2015 年,TC39 发布 ES6,其中有一个规范就是 ES modules(为了方便表述,后面统一简称 ESM)。但是在 ES6 规范提出前,就已经存在了一些模块化方案

ES6与 CommonJS 模块化的区别

CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。ES6 Modules 的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。

前端模块化:CommonJS,AMD,CMD,ES6

模块化的开发方式可以提高代码复用率,方便进行代码的管理。通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!