首页 > 其他分享 >模块化

模块化

时间:2023-03-14 13:46:54浏览次数:20  
标签:node 文件 exports 模块化 modules 模块

随着学习的深入,代码数量的增多我们所编写的程序复杂度越来越高。此时如果我们依然将所有的代码编写到同一个文件中,代码将变得非常难以维护。模块化是解决这种问题的关键。

什么是模块?

模块简单理解其实就是一个代码片段,本来写在一起的JS代码,我们按照不同的功能将它拆分为一个一个小的代码片段,这个代码片段就是一个模块。简单来说,就是化整为零。

模块化的好处

模块化后不再是所有代码写在一起,而是按功能做了不同的区分,当我们维护代码时可以比较快捷的找到那些要修改的代码。再者,模块化后,代码被拆分后更容易被复用,同样一个模块可以在不同的项目中使用,大大的降低了我们的开发成本。jQuery便可以理解为是一种模块。
但是jQuery这种模块化的方式存在有许多的不足。jQuery是通过script标签引入的形式来完成模块化的,引入后实际效果是向全局作用域中添加了一个变量$(或jQuery),这样很容易出现模块间互相覆盖的情况。并且当我们使用了较多的模块时,有一些模块是相互依赖的,必须先引入某个组件再引入某个组件,模块才能够正常工作。 比如jQuery和jQueryUI,就必须先引入jQuery,如果引入顺序出错将导致jQueryUI无法使用。这还仅仅是两个组件,而实际开发中的依赖关系往往更加复杂,像是a依赖b,b依赖c,c依赖d这种关系,必须按照d、c、b、a的顺序进行引入,有一个顺序错误就会导致其他的一起失效。所以通过script标签实现的模块化是非常的不靠谱的。

CommonJS

一直到2015年,JavaScript中一直都没有一个内置的模块化系统。但是随着JavaScript项目越来越复杂,模块化的需求早已迫在眉睫。于是大神门开始着手自定义一个模块化系统,CommonJS便是其中的佼佼者。同时它也是Node.js中默认使用的模块化标准。

模块就是一个js文件,在模块内部任何变量或其他对象都是私有的,不会暴露给外部模块。在CommonJS模块化规范中,在模块内部定义了一个module对象,module对象内部存储了当前模块的基本信息,这些信息默认是不能被外部看到的,不过module对象中有一个属性名为exports,exports用来指定需要向外部暴露的内容。只需要将需要暴露的内容设置为exports或exports的属性,其他模块即可通过require来获取这些暴露的内容。

let a = 10 //外部无法访问
let b = 20 //外部无法访问
console.log('我是m1');
/* 
当我们在其他模块中引入当前模块时,require函数的返回值就是exports
*/
console.log(exports === module.exports)//输出true
exports.a = 'cloud'//外部可以访问
exports.c = function() {
    console.log('ccc')
}//外部可以访问

这样一个一个导出比较麻烦,我们可以直接使用module.exports导出一个模块

module.exports = {
    a: '哈哈哈',
    b: [1, 2, 3, 4],
    c: () => {
        console.log('eee')
    }
}

默认情况下,Node.js会将以下内容视为CommonJS模块:

  1. 使用.cjs为扩展名的文件
  2. 当前的package.json的type属性为commonjs时,扩展名为.js的文件
  3. 当前的package.json不包含type属性时,扩展名为.js的文件
  4. 文件的扩展名是mjs、cjs、json、node、js以外的值时(type不是module时)

require()是同步加载模块的方法,所以无法用来加载ES6的模块。当我们需要在CommonJS中加载ES模块时,需要通过import()方法来加载。

import("./m2.mjs").then(m2 => {
    console.log(m2)
})

文件作为模块

当我们加载一个自定义的文件模块时,模块的路径必须以/./../开头。如果不以这些开头,node会认为你要加载的是核心模块或node_modules中的模块。

当我们要加载的模块是一个文件模块时,CommonJS规范会先去寻找该文件,比如:require("./m1")时,会首先寻找名为m1的文件。如果这个文件没有找到,它会自动为文件添加扩展名然后再查询。扩展名的顺序为:js、json和node。还是上边的例子,如果没有找到m1,则会按照顺序搜索m1.js、m1.json、m1.node哪个先找到则返回哪个,如果都没有找到则报错。

文件夹作为模块

当我们使用一个文件夹作为模块时,文件夹中必须有一个模块的主文件,一般是index.js。如果文件夹中含有package.json文件且文件中设置main属性,则main属性指定的文件会成为主文件,导入模块时就是导入该文件。如果没有package.json,则node会按照index.js、index.node的顺序寻找主文件。

node_modules

如果我们加载的模块没有以/./../开头,且要加载的模块不是核心模块,node会自动去node_modules目录下去加载模块。node会先去当前目录下的node_modules下去寻找模块,找到则使用,没找到则继续去上一层目录中寻找,以此类推,知道找到根目录下的node_modules为止。

比如,当前项目的目录为:'C:\Users\lilichao\Desktop\Node-Course\myProject\node_modules',则模块查找顺序依次为:

C:\Users\lilichao\Desktop\Node-Course\node_modules
C:\Users\lilichao\Desktop\node_modules
C:\Users\lilichao\node_modules
C:\Users\node_modules
C:\node_modules

模块的包装

每一个CommandJS模块在执行时,外层都会被套上一个函数

(function(exports, require, module, __filename, __dirname){
    //模块代码会被放在这里
})

所以我们之所以能在CommonJS模块中使用exports、require并不是因为它们是全局变量。它们实际上以参数的形式传递进模块的。

  • exports,用来设置模块向外部暴露的内容

  • require,用来引入模块的方法

  • module,当前模块的引用

  • __filename,模块的路径

  • __dirname,模块所在目录的路径

标签:node,文件,exports,模块化,modules,模块
From: https://www.cnblogs.com/cloud0-0/p/17214649.html

相关文章

  • 第129篇:JS模块化开发
    好家伙,本篇为《JS高级程序设计》第二十六章“模块”学习笔记 JS开发会遇到代码量大和广泛使用第三方库的问题。解决这个问题的方案通常需要把代码拆分成很多部分,然后......
  • ES6的模块化
    一、模块化的概念:在进行项目分析或者编码时,先把项目进行拆分,拆分成很多的类,对象,很多的函数等等。能够提高代码的复用性。这些被拆分出来的类型,对象,函数就是模块。就像......
  • vue&element项目实战 之api模块化与公共字典
    4.api模块化配置步骤一:编写字典api即dic.jsimportrequestfrom'@/utils/request'//查询字典列表exportconstgetDicList=(param)=>request({url:'/sys-dic......
  • ES6-ES11 bable对ES6模块化代码的转换(已过时,仅了解)
    原视频让ES新特性以ES5形式展现home.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-w......
  • 8.理解模块化解决的实际问题,可列举几个模块化方案并理解其中原理
    1.什么是模块将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起块的内部数据与实现是私有的,只是向外部暴露一些接口(方法)与外部其它模块通......
  • JavaScript模块化理解-CommonJS、AMD、CMD、UMD、ES6
    参考:JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS 在JS早期,使用script标签引入JS,会造成以下问题:加载的时候阻塞......
  • 【Avalonia】【跨平台】关于Prism项目模块化在Linux下路径问题
    背景当我们在用Avalonia开发项目的时候会涉及到路径的问题,在Linux下面路径的写法和Window路径的写法有区别问题描述用Avalonia开发项目发现我们之前的路径写法在Linux下......
  • webpack模块化的原理
    commonjs在webpack中既可以书写commonjs模块也可以书写es模块,而且不用考虑浏览器的兼容性问题,我们来分析一下原理。首先搞清楚commonjs模块化的处理方式,简单配置一下webp......
  • 模块化规范
    一、参考资料:1、介绍模块化发展的历程(opensnewwindow)2、各模块化规范思维导图相关问题1、模块化的作用抽取公共代码、隔离作用域、依赖管理2、模块化历史无模块......
  • babel对ES6的模块化代码转换
    1安装工具babel-clibabel-preset-envbrowserify(webpack).babelrc配置{presets":["babel-preset-env"]2npxbabelsrc/js-ddist/js3打包npxbrowserifydist/js/app......