Node与ES6模块

模块化的作用主要体现在封装和隐藏私有实现细节,以及保证全局命名空间清洁上,因而模块之间不会意外修改各自定义的变量、函数和类。

1 模块

1.1 代码打包工具基本工作原理

在函数中声明的局部变量和嵌套函数都是函数私有的。这意味着我们可以使用立即调用的函数表达式来实现某种模块化,把实现细节和辅助函数隐藏在包装函数中,只将模块的公共API作为函数的值返回。

const moduleExport = (function () {
function sayHello() {
console.log("hello moduleExport")
}

function sum(a,b) {
console.log(a + "+" + b + "=" + (a + b))
}

return { sayHello, sum }
}());

moduleExport.sayHello(); // hello moduleExport
moduleExport.sum(5,8); // 5+8=13

打包工具把每个文件的内容包装在一个立即调用的函数表达式中,还可以跟踪每个函数的返回值,并将所有内容拼接为一个大文件:

const modules = {};

function requireCustom(moduleName) { return modules[moduleName] }

modules["student.js"] = (function () {
const exports = {};
// student.js 内容
function study() {
console.log("好好学习天天向上");
}
// student.js 内容截止
exports.study = study;
return exports;
}());

modules["teacher.js"] = (function () {
const exports = {};
function teach() {
console.log("教授英语");
}
function test() {
console.log("今天考试");
}
exports.teach = teach;
exports.test = test;
return exports;
}());

const student = requireCustom("student.js");
student.study(); // 好好学习天天向上
const teacher = requireCustom("teacher.js");
teacher.teach(); // 教授英语
teacher.test(); // 今天考试

以上代码展示了浏览器代码打包工具(webpack)的基本原理,也是对Node程序中使用的require()函数的一个简单介绍。

1.2 Node中的模块

在Node模块中,每个文件都是一个拥有私有命名空间的独立模块。在一个文件中定义的常量、变量、函数和类对该文件而言都是私有的,除非该文件会导出它们。而模块导出值只有被另一个模块显式导入后才会在该模块中可见。

Node使用require()函数导入其他模块,通过设置Exports对象属性或完全替换module.exports对象来导出公共API。

function product() {
console.log("生产商品");
}

function design() {
console.log("设计商品");
}

module.exports = { product, design };

factory.js

module.exports = function () {
console.log("消费商品")
};

customer.js

const factory = require("./factory");
const customer = require("./customer");

factory.design(); // 设计商品
factory.product(); // 生产商品
customer(); // 消费商品

shop.js

1.3 ES6中的模块

ES6模块化与Node的模块化在概念上是相同的。与Node模块的区别在于导入和导出所用的语法,以及浏览器中定义模块的方式。

要从ES6模块导出,只要在声明前加上export关键字即可。导入其他模块要使用import关键字。

function work() {
console.log("努力工作");
}

function fished() {
console.log("偶尔摸鱼");
}

export { work, fished }

employee.js

export default function () {
console.log("发薪水");
}

boss.js

export { work, fished } from "./employee.js";
export { default as payByBoss } from "./boss.js";
console.log(import.meta.url); // http://localhost:63342/js-study/day2/company.js

company.js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>公司</title>
</head>
<body>
<script type="module">
import { work, fished, payByBoss } from "./company.js";
work(); // 努力工作
fished(); // 偶尔摸鱼
payByBoss(); // 发薪水
</script>
</body>
</html>

company.html

相关推荐
beelan几秒前
v-on的思考
前端
山河木马3 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502193 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平8 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手10 分钟前
大保剑:Promise的有趣体验
javascript
李大玄10 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵10 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾16 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove22 分钟前
常见 npm 报错问题
前端·npm
sunbyte23 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss