【Vue学习笔记_12】模块化开发

最新推荐文章于 2023-07-30 21:20:58 发布

BugFrog1024

最新推荐文章于 2023-07-30 21:20:58 发布

阅读量551

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 前端文章标签： vue javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44752429/article/details/121584541

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

Vue

22 篇文章

订阅专栏

本文探讨了在Vue.js开发中模块化的重要性，解决了多人开发时全局变量冲突和代码依赖顺序问题。通过介绍CommonJS和ES6的模块化规范，包括exports、require、export以及import的使用，阐述了模块化的核心——导出和导入。同时，提到了ES6的default导出特性，允许导入者自定义名称，但一个模块只能有一个default导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配套可执行代码示例 => GitHub

为什么要有模块化？

多人开发，维护多个js文件，一方面会产生全局变量命名冲突等问题，另一方面这种代码编写方式对js文件的依赖顺序几乎是强制性的。

将整个js文件作为匿名函数闭包可以解决变量命名冲突的问题，但是会导致两个js文件之间的东西无法相互使用，代码复用性降低。

解决方法：将需要暴露给外面的变量和方法，封装成一个模块作为出口。

常用的模块化规范：CommonJS、AMD、CMD、ES6的Modules

模块化的两个核心：导出、导入

CommonJS

导出：exports

module.exports = {
  flag: true,
  sum(a,b) {
    return a+b
  }
}

导入：require

let {flag, sum} = require('./export.js')

ES6的模块化

给<script>标签添加type="module"属性，可以让每个js文件成为独立的模块。

<script src="export.js" type="module"></script>
<script src="import.js" type="module"></script>

导出：export

可以导出变量、函数、类等

//第一种方式：先声明后导出
var flag = true
function sum(a,b) {
  return a+b
}
export {flag, sum}

//第二种方式：直接在声明时导出
export var flag = true;
export function sum(a,b) {
  return a+b
}

导入：import

//第一种方式：导入指定的变量
import {flag, sum} from './export.js'
console.log(sum(20, 30));

//第二种方式：导入整个模块
import * as ex_module from './export.js'
console.log(ex_module.flag)

default

某些情况下，一个模块包含某个功能，但并不希望给这个功能命名，而是让导入者可以自己命名，这个时候就可以使用export default。注：

在同一个模块中，不允许存在多个export default
export default导出的内容import时不需要加{}

//export default 变量
const address = '南京'
export default address
import addr from './export.js'

//export default 函数
export default function (args) {
  console.log(args)
}
import print_func from './export.js'
print_func('Hello')