js模块化开发

最新推荐文章于 2024-03-28 17:16:13 发布

大番薯的大额头

最新推荐文章于 2024-03-28 17:16:13 发布

阅读量161

点赞数

分类专栏： js html 文章标签： js 模块化开发

本文链接：https://blog.csdn.net/zh1106/article/details/101707053

版权

js 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

什么是模块化开发

模块化顾名思义就是将原本没有规律，散乱的东西整合到一起

为什么要提出模块化开发

在前端开发中经常会在html中引入很多的js文件，这些文件若其中有相互的依赖关系，那么书写的顺序就显得很重要，可是这种依赖又不是那么的明显，若文件很多堆放起来又显得页面很臃肿，重要的是代码会变得难以维护

js模块化开发的发展

js的模块化开发大概分为四个阶段
commonJS—》AMD（requireJS）—》CMD（seaJS）—》ES6模块化规范

commonJS

开始作为node的模块化规范，后来也可以在浏览器上运行
暴露变量 module.js

const getName1 = () => {
    console.log("zh1");
}
//暴露，方法1，require接到的返回值为一个对象，
//使用该对象 .getName1 可调用这个函数，大括号中可以传入多个变量
module.exports = {
    getName1
}

/**
 * 方法二和方法三不常使用
 */

//暴露，方法2，返回值为一个方法可直接调用
// module.exports = getName1;


//暴露，方法3，返回值为一个对象，使用对象.方法名可调用该函数
// exports.getName1 = getName1;

引入其他模块 index.js，入口文件

/**
 * require 中的path书写规范
 * 1、当前目录需要在前面写./
 * 2、后缀名为.json,.js,.node可以省略
 * 3、核心模块和npm下载的模块，path可以直接写名称
 * 
 * 模块分为3种
 * 1、自定义模块
 * 2、node.js的核心模块（node自带）
 * 3、npm下载的模块
 */
let m1 = require('./module1');

console.log(m1.getName1());//zh1 undefined

AMD

定义与暴露，AMD中定义模块使用define方法，参数为一个函数，该函数的返回值就是暴露的模块，module1.js

//定义模块
define(function () {
    function show1() {
        console.log("module1 show1");
    }
    //返回show1可直接暴露模块
    return show1;
})

配置，配置模块需要使用require.config方法，文件：main.js

// 配置模块
require.config({
    baseurl: "./src/", //baseurl为moudule文件之前的目录
    paths: { //目标文件名
        'm1': 'module1',
        'm2': 'module2'
    }
});
//主模块，这里数组中的m1就是配置中的m1
require(['m1', 'm2'], function (m1, m2) {
    m1();
    m2();
})

使用，使用前需要引入require.min.js文件，使用cdn或者直接下载到本地https://requirejs.org/docs/download.html，之后再将其引入，并在后面加上data-main属性值为main文件的路径

<script type="text/javascript" src="./src/require.min.js" data-main="./src/main.js"></script>

CMD

CMD吸收了commonJS和AMD的语法，操作比较简便
在CMD中无论是定义模块，还是暴露，还是引入都是在define方法里进行的
module1.js

//定义模块
define(function (require, exports, module) {
    function add(x, y) {
        return x + y;
    }
    //暴露，调用形参module下面的exports并将add赋值
    module.exports = add;
})

main.js

define(function (require, exports, module) {
    //引入module1
    const result = require('./module1');

    console.log(result());
})

使用CMD前需要引入sea.js

//index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <script type="text/javascript" src="./src/sea.js"></script>
    <script type="text/javascript">
    	//使用sea.js下的seajs对象的use方法调用main.js文件
        seajs.use('./src/main.js');
    </script>
</body>

</html>

ES6模块化规范

ES6的模块化操作有些复杂，按照规定的语法写好后，需要使用babel（一种js编辑器）将代码转化为commonJS的代码，然后再使用commonJS的操作方法，将建立构建文件
相关配置
1、下载babel，使用npm下载，在项目目录下的cmd中打如下命令
npm install --save-dev @babel/core @babel/cli @babel/preset-env
2、配置babel，配置babel有三种方法，有兴趣的可以在babel官网研究一下，下面简单介绍一下最常用的方法，babel官网

首先在src文件夹外创建一个名字为空的.babelrc文件
文件内容为，

{
    "presets": [
      "@babel/preset-env"
    ]
  }

3、使用，在项目目录下的cmd中打如下命令
npx babel src -d build
这个操作就是把当前文件代码转化为commonJS的代码
4、再按照commonJS的操作构建一个built.js的文件即可
5、ES6规范模块化的语法
暴露
1）分别暴露
export后接变量或方法的完整定义
2）统一暴露使用export对象

export{
	.......(变量或方法名)
	.......
}

引入
1、import {（方法名或变量名，可书写多个）} from ‘path’，适用于分别暴露和统一暴露
2、import 方法名或变量名 from ‘path’ ，适用于默认暴露

大番薯的大额头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js模块化开发

什么是模块化开发模块化顾名思义就是将原本没有规律，散乱的东西整合到一起为什么要提出模块化开发在前端开发中经常会在html中引入很多的js文件，这些文件若其中有相互的依赖关系，那么书写的顺序就显得很重要，可是这种依赖又不是那么的明显，若文件很多堆放起来又显得页面很臃肿，重要的是代码会变得难以维护js模块化开发的发展js的模块化开发大概分为四个阶段commonJS—》AMD（re...
复制链接

扫一扫