【vue学习】—前端模块化

最新推荐文章于 2024-04-22 03:29:53 发布

van blog

最新推荐文章于 2024-04-22 03:29:53 发布

阅读量429

点赞数 2

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

本文链接：https://blog.csdn.net/scj1014/article/details/103946362

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 为什么需要模块化

1.1 早期js开发的痛点

在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。那个时候的代码是怎么写的呢？直接将代码写在 script 标签中即可
随着ajax异步请求的出现，慢慢形成了前后端的分离。客户端需要完成的事情越来越多，代码量也是与日俱增。为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。但是这种维护方式，依然不能避免一些灾难性的问题。比如全局变量同名的问题。
后来可以使用匿名函数来解决变量的重名问题。但是如果我们希望在其他文件中引用这里的局部变量，该怎么办呢？
另外，这种代码的编写方式对js文件的依赖顺序几乎是强制性的。当js文件过多，比如有几十个的时候，弄清楚它们的顺序是一件比较同时的事情，而且即使你弄清楚顺序了，也不能避免上面出现的这种尴尬问题的发生。

1.2 使用模块作为出口

我们可以将需要暴露到外面的变量，使用一个模块作为出口，什么意思呢？

在匿名函数内部定义一个对象
给这个对象添加各种需要暴露到外面的属性和方法
最后将这个对象返回，在外面使用一个变量接收
最后我们只需要使用属于自己模块的属性和方法即可

下面举个例子：

我们在 aaa.js 和 bbb.js文件中分别定义一个对象，并且导出。

var moduleA = (function () {
    //1.定义一个对象
    var obj = {};

    //2.在对象内部添加变量和方法
    var flag = false;
    obj.flag = flag;
    obj.decrement= function (num1,num2) {
        console.log(num1 - num2);
    }

    //3.返回
    return obj;

})()


var moduleB = (function () {
    //1.定义一个对象
    var obj = {};

    //在对象内部添加变量和方法
    var flag = true;
    obj.flag = flag;
    obj.increment= function (num1,num2) {
        console.log(num1 + num2);
    }

    return obj;

})()

然后我们在main.js文件中使用之前那两个js文件中的变量。

if (moduleB.flag) {
    console.log('hello world');
}

moduleB.increment(11, 11);
moduleA.decrement(11, 11);
console.log(moduleA.flag);

最后在html文件中引用js文件（注意引用顺序！！）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div id="app">


 </div>
 <script src="bbb.js"></script>
 <script src="aaa.js"></script>
 <script src="main.js"></script>
</body>
</html>

上面的例子就是模块最基本的封装。

但是，前端模块化开发已经有了很多既有的规范，以及对应的实现方案。

常见的模块化规范有：CommonJS、AMD、CMD，也有ES6的Modules。

2. Common.js

模块化有两个核心：导出和导入

Common.js的导出：

Common.js的导入：

注意：Common.js的使用必须依赖Node环境！

3. ES6的export和import命令

3.1 export

export可以用来导出变量、函数、类

导出变量

let name = 'van.shu';
let age = 22;
let height = 1.77;

export {name, age, height};

导出函数

export function showInfo(info) {
    console.log(info);
}

导出类

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    play() {
        console.log(this.name + '在玩游戏');
    }
}

export {User};

3.2 import

我们使用export命令导出了模块对外提供的接口，下面就可以通过import命令来加载对应的模块了。

首先，我们需要在html文件中引入js文件，并将类型设置为module

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="info.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
</html>

import指令用于导入模块中的内容,比如main.js的代码

import {name,age,height} from "./info.js";
import {showInfo} from "./func.js";
import {User} from "./user.js";

console.log(name, age, height);
showInfo(111);
let user = new User();
user.name = 'van.shu';
user.play();

如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦，通过 *可以导入模块中所有的export变量，但是通常情况下我们需要给 * 起一个别名，方便后续的使用

import * as info from "./info.js"

console.log(info.name + info.age + info.height);

van blog

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【vue学习】—前端模块化

1. 为什么需要模块化1.1 早期js开发的痛点在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。那个时候的代码是怎么写的呢？直接将代码写在1.2 使用模块作为出口我们可以将需要暴露到外面的变量，使用一个模块作为出口，什么意思呢？在匿名函数内部定义一个对象给这个对象添加各种需要暴露到外面的属性和方法最后将这个对象返回，在...
复制链接

扫一扫