模块,代码规划大师【趣学前端】
背景
最近睡前习惯翻会书,重温了《JavaScript权威指南》这本书。这本书,文字小,内容多。两年了,我才翻到第十章。因为书太厚,平时都充当电脑支架。
模块
日常工作中,我习惯模块化编程,将复杂或者相似的功能进行封装,物理隔离不同功能的同时,还能减少项目的代码量。
模块化编程的目标是能够用不同作者和来源的代码模块组装成大型程序,即使不同模块的作者无法预知如何使用,代码仍然可以正确运行。实践中,模块化的作用主要体现在封装和隐藏私有实现细节,以及保证全局命名空间清洁上,因而模块之间不会意外修改各自定义的变量、函数、类。
可能是秋季的清爽,又或者藕粉的甜蜜,我感觉自己开「神行千里」的buff,快速读完整章,比绸缎还丝滑。
隐藏实现细节
对象和类是模块,所以可以使用对象和类实现模块化。但是对象和类没有提供隐藏模块实现细节的方式。
但是模块内部有些实现细节,比如辅助方法。其实不应该暴露给模块的用户,所以最好能够实现隐藏功能。
在函数可以声明私有属性,比如局部变量,在比如嵌套函数。没错,可以使用立即调用的函数表达式来实现模块化,把实现细节隐藏在包装函数中,只将模块的公共API作为函数的值返回。妙啊。
看下面这个数组计算的模块,只暴露了sumAll()和factorialAll()这两个函数,隐藏了其他实现细节。
// 定义 mathFunc 模块
const mathFunc = (function () {
// 私有方法
const sum = (x, y) => x + y;
const factorial = (x, y) => x * y;
// 公有方法-求数组总和
function sumAll(data) {
return data.reduce(sum);
}
// 公有方法-数组阶乘
function factorialAll(data) {
return data.reduce(factorial);
}
return { sumAll, factorialAll };
})();
let count1 = mathFunc.sumAll([1, 2, 3, 4]);
let count2 = mathFunc.factorialAll([1, 2, 3, 4]);
let count3 = mathFunc.sum(1, 2);
console.log(count1); // => 10
console.log(count2); // => 24
console.log(count3); // => TypeError: mathFunc.sum is not a function
Node中的模块
Node官网文档详细又丰富,这里不做详细的介绍。简单总结一下模块相关的知识点
- 编写Node程序,可以随意讲程序拆分到任意多个文件中;
- 每个文件都是一个拥有私有命名空间的独立模块;
- Node模块通过设置Exports对象的属性来导出公共API;
- Node模块使用require()函数导入其他模块。
ES6中的模块
功能 |
方法 |
实现 |
导出 |
要从ES6模块导出常量、变量、函数、类等,只要在声明前加上export关键字即可。 |
export const name = '张三'; |
导入 |
导入其他模块导出的值要使用import关键字。 |
import math form './mathFunc.js'; |
重命名 |
如果两个模块使用相同的名字导出了两个不同的值,在同一个文件中同时导入这两个值,必须在导入时对其中一个或这两个进行重命名。 |
import { math as mathMethod} form './mathMethod.js'; import { math as mathFunc} form './mathFunc.js'; |
动态导入 |
可以通过import()实现动态导入。 |
async getDataSum(data){ let mathFunc = await import('./mathFunc.js'); return { sumAll: mathFunc.sumAll([1, 2, 3, 4]), } } |
总结
模块化编程中,实现隐藏细节的功能基础又实用,今天也特别有收获的一天。
我发现我总是在不同的时间段反复爱上JavaScript,偶尔翻出来珍藏的技术书,都能或多或少的有点收获。
这次的宝藏图书《JavaScript权威指南》,也是一样,原来觉得枯燥的章节,最近读起来也很丝滑,比绸缎还丝滑。
作者:非职业「传道授业解惑」的开发者叶一一
简介:「趣学前端」、「CSS畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。
如果看完文章有所收获,欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论(0)