前端代码模块化

最新推荐文章于 2024-04-15 19:59:02 发布

龙龙老表

最新推荐文章于 2024-04-15 19:59:02 发布

阅读量196

点赞数

分类专栏： Javascript 高级论述 typescript

本文链接：https://blog.csdn.net/qq_32466937/article/details/106754541

版权

Javascript 高级论述同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

typescript

3 篇文章 0 订阅

订阅专栏

CommonJS 规范

基于文件系统，不适用于浏览器

node 端

模块文件

// m1.js

const mod = {
  a: 1,
  b: 3,
  fn() {
    console.log("hello");
  },
};
module.exports = {
  mod,
};

引入模块

// m2.js

const { mod } = require("./m1.js");
mod.fn(); // hello

AMD 规范

requireJS 是 AMD 规范的一种实现，可用于浏览器

// 模块文件 a.js
define(function () {
  let a = 1;
  let b = 2;
  return { a, b };
});

/*
// 或者这样写

define(function (require, exports, module) {
  let a = 1;
  let b = 2;

  module.exports = {
    a,
    b,
  };
});

*/

// 主文件 b.js
// 这里的第一个参数中，可以在数组里面引入多个模块，逗号分隔，第二个函数参数中每一个形参都跟引入的模块一一对应
define(["./a.js"], function (a) {
  console.log(a);
});

/*
// 或者这样写

define(function (require, exports, module) {
  let a = require("./a");
  console.log(a);
});


*/

<!-- 浏览器中引入主模块 -->

<html>
  <body>
    <!-- 这里的 require.js 是 AMD 规范的实现 -->
    <script src="./require.js" data-main="./b.js"></script>
  </body>
</html>

ESM

ES6 的模块化方式

// a.js

let a = 1;
let b = 2;
function fn() {
  console.log("a  module :", a + b);
}

// 需要导出的数据列表
export { a, b, fn };

// b.js
import * as A from "./a.js";
console.log(A.a);
A.fn();

/*
// 当然也可以通过解构引入

import { a, b, fn } from "./a.js";
console.log(a);
fn();

*/

<html>
  <body>
    <!-- 浏览器中，type ='module' 是关键 -->
    <script type="module" src="./b.js"></script>
  </body>
</html>

动态导入模块

// a.js 模块

let a = 1;
let b = 2;
function fn() {
  console.log("a  module :", a + b);
}

export { a, b, fn };

// b.js 模块

document.onclick = function () {
  // 这里 import 会返回一个 promise
  import("./a.js").then((data) => {
    data.fn();
  });

  // 当然也支持 async + await
  // let m1 = await import("./a.js")
};

<!-- 当点击页面的时候才会加载 b.js  -->
<html>
  <body>
    <script type="module" src="./b.js"></script>
  </body>
</html>

龙龙老表

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端代码模块化

CommonJS 规范基于文件系统，不适用于浏览器node 端模块文件// m1.jsconst mod = { a: 1, b: 3, fn() { console.log("hello"); },};module.exports = { mod,};引入模块// m2.jsconst { mod } = require("./m1.js");mod.fn(); // helloAMD 规范requireJS 是 AMD 规范的
复制链接

扫一扫