模块,代码规划大师【趣学前端】

举报
叶一一 发表于 2023/02/20 22:39:59 2023/02/20
【摘要】 背景最近睡前习惯翻会书,重温了《JavaScript权威指南》这本书。这本书,文字小,内容多。两年了,我才翻到第十章。因为书太厚,平时都充当电脑支架。模块日常工作中,我习惯模块化编程,将复杂或者相似的功能进行封装,物理隔离不同功能的同时,还能减少项目的代码量。模块化编程的目标是能够用不同作者和来源的代码模块组装成大型程序,即使不同模块的作者无法预知如何使用,代码仍然可以正确运行。实践中,模块...

背景

最近睡前习惯翻会书,重温了《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畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。
如果看完文章有所收获,欢迎点赞👍 | 收藏⭐️ | 留言📝。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。