Vue - 模块化开发

最新推荐文章于 2024-07-21 19:21:16 发布

学习中的小菜鸟.

最新推荐文章于 2024-07-21 19:21:16 发布

阅读量209

点赞数

分类专栏： Vue ES6 文章标签： Vue

本文链接：https://blog.csdn.net/qq_33962481/article/details/119423881

版权

48 篇文章 2 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

一、常见的模块化规范

CommonJS, AMD, CMD, 还有 ES6 的 Modules

var flag = true;
function sum(num1, num2) {
	return num1 + num2
}

module.exprots = {
	flag: flag,
	sum: sum
}

var {flag, sum} = require('./aaa.js')

ES6 新增了两个关键字 export(导出) 和 inport(导入)

<body>
  <script src="./module1.js"></script>
  <script src="./module2.js"></script>
</body>

类似上面正常导入会有命名冲突的问题
加上 type=“modul” 就意味着每个js都是一个单独的模块, 就不会有命名冲突的问题了.

<body>
  <script src="./module1.js" type="module"></script>
  <script src="./module2.js" type="module"></script>
</body>

而这时会产生一个问题, 每个js都一个模块, 意味着当前模块也不能使用其他模块里面的变量和方法.

此时就需要导出

var flag = true;
function sum(num1, num2) {
  return num1 + num2
}

export {
  flag, name, sum
}

import { flag, name } from "./module1.js";
if (flag) {
  console.log("导出成功"+name);
}

import * as module1 from "./module1.js";

关注

专栏目录