Node.js 模块化学习(详细语法代码示例《包含笔记》)

node.js模块化

什么是模块化?

  • 每个文件都被视为一个单独的模块。

  • 概念:项目是由很多个模块文件组成的。

    优点:提高代码复用性,按需加载,独立作用域。

    • 使用方法**:需要标准语法导出和导入进行使用。**

CommonJs标准(导入导出)

语法和示例
导出代码示例
导入代码示例
语法和示例
  • 语法: 导出==》》module.exports = {}

    • 导入 ==》》require(‘模块名或路径’)

      模块名或路径:分为两种:一种是内置模块 一种是自定义模块

      • 内置模块:直接写名字(例如:fs ,path ,http)

      • 自定义模块:写模块文件路径 (例如:./utils.js)

需求:定义utils.js模块,封装基地址和求数组总和的函数。

导出代码示例
/*
    *目标:基于CommonJs 标准语法 ,封装属性和方法并导出
*/ 
const basetURL = 'http://haajax.itheima.net'
const getArraySum = arr => arr.reduce((sum,item) => sum += item,0)

// 导出
module.exports = {
    // 暴露的值
    url: basetURL,
    arraySum: getArraySum
}
导入代码示例
/*
* 目标:基于 CommonJs 标准语法 ,导入工具属性和方法使用
 * 
*/

// 导入
const obj = require('./utils.js')
console.log(obj)
const result = obj.arraySum([5,1,2,3])
console.log(result)

ECMAScript标准-默认导入导出

  • 需求:定义utils.js模块,封装基地址和求数组总和的函数。

    语法示例
    • 默认标准使用:

      • 导出: export default{}
      • 导入:inport 变量名 from ‘模块名后路径’
      • 注意: node.js 默认支持CommonJs 标准语法

      所以我们需要在运型模块所在文件夹新建 package.json文件 ,并设置{“type”:“module”}

导出代码示例:
/*
* 目标:基于ECMAScript 标准语法,封装属性和方法,并 “默认导出”
*/

const baseURL = 'http://hmajax.itheima.net'
// 封装一个arr函数方法,使用reduce方法数组进行数组求和
const getArraySum = arr => arr.reduce((sum,item) => sum += item,0)

// 默认导出
export default {
    // 暴露的内容给需要该封装的功能模块
    url: baseURL,
    arraySum: getArraySum
}


导出代码解析

首先,`const baseURL = 'http://hmajax.itheima.net'` 定义了一个名为 `baseURL` 的常量,其值为 `'http://hmajax.itheima.net'`。这个常量用于存储一个基础的 URL 地址。

接下来,getArraySum 是一个函数,它接受一个数组作为参数,并使用 reduce 方法对数组进行求和操作。reduce 方法是 JavaScript 数组的一个高阶方法,用于对数组中的元素进行累积操作。在这个例子中,reduce 方法的初始值为 0,然后对数组中的每个元素执行回调函数 (sum, item) => sum += item,将每次计算的结果累加到 sum 中,最终得到数组的总和。

最后,通过 export default 导出一个对象,包含两个属性:urlarraySumurl 属性的值为前面定义的 baseURL 常量,而 arraySum 属性的值为前面定义的 getArraySum 函数。这样,在其他需要使用这些功能的模块中,可以直接导入这个对象并访问其中的属性和方法。

导入代码示例:
/*
* 目标:基于ECMAScript 标准语法,封装属性和方法,并 “默认导入”,对属性法方法进行使用
*/
import obj from './utils.js'  
//obj === { url: 'http://hmajax.itheima.net', arraySum: [Function: getArraySum] }
// 通过路径导入得到提供功能的文件夹做暴露出来的内容
console.log(obj)
// ,arraySum 和 getArraySum 是等价的引用,操作 arraySum 就相当于操作 getArraySum。
const result = obj.arraySum([10,20,30]) //这个数组实参传递给了形参arr
console.log(result)
	
导入代码解析

你的代码中导入了一个名为 `obj` 的对象,该对象是从 `./utils.js` 文件中导出的。 这意味着 obj 对象包含两个属性:url 和 arraySum。url 属性的值是 'http://hmajax.itheima.net',而 arraySum 属性的值是一个函数,即 [Function: getArraySum]。这个函数就是之前定义的 getArraySum 函数。

接下来,你调用了 obj.arraySum([10,20,30]),将数组 [10, 20, 30] 作为实参传递给了 arraySum 方法,这个数组被赋值给了形参 arr。

然后,你使用 console.log(result) 打印了 result 变量的值。这里假设 getArraySum 函数正确实现了对数组求和的功能,那么 result 的值将是数组 [10, 20, 30] 的总和,即 60。

ECMAScript标准-命名导入导出

语法使用
  • 命名标准使用:1、导出 ===》 export修饰定义语句

    • ​ 2、导入 ===》 import{同名变量}from ‘模块或路径’

关于默认和命名导入和导出该如何选择呢?

  • 按需加载,使用命名导出和导入
  • 全部加载,使用默认导出和导入
命名导出模块

命名导出导入的代码演示如下:

使用export修饰符导出模块
  • /*
    * 目标:基于ECMAScript 标准语法,封装属性和方法,并 “命名导出”,对属性法方法进行使用
    */
    
    export const baseURL = 'http://hmajax.itheima.net'
    export const getArraySum = arr => arr.reduce((sum,item) => sum += item,0)
    
    // 语句前面添加了export关键字,来修饰。表示导出语句
    
命名导入模块
导入模块 import{} from’’
  • /*
    * 目标:基于ECMAScript 标准语法,封装属性和方法,并 “命名导入”,对属性法方法进行使用
    */
    
    // 大括号中的变量名字要和导出的一致,多个用逗号隔开
    import {baseURL,getArraySum} from './utils.js'
    console.log(baseURL)
    console.log(getArraySum)
    // 调用该函数出入实参
    const result = getArraySum([100,200,220])
    console.log(result)//返回结果: 520
    console.log(baseURL)//返回结果:http://hmajax.itheima.net
    

总结Node.js支持的两种模块化标准

第一种默认的:CommonjS标准语法(默认)

第二种推荐的:ECMAScript标准语法(官方推荐的)

需要注意的是ECMAScript有两种导入方式(一种是默认导出导入,一种是命名导出导入)

  • 默认导出:export default{}
  • 默认导入:import 变量名 from ‘模块名或路径’
  • 命名导出: export 修饰定义的语句
  • 命名导入:import {同名变量} from ‘模块名或路径’

=> 按需加载用命名方式 , 全部加载用默认方式。

包的概念

包的概念:将模块、代码、其他资料等 聚合成一个文件夹

包的分类:

  1. 项目包:主要用于编写项目和业务逻辑

  2. 软件包:封装工具和方法进行使用

    • 要求:根目录中必须要有package.json文件 (记录包的清单信息)
    • 注意:导入软件包时,引入的默认是index.js模块文件 / main属性制定的模块文件
        • 目标:导入 utils 软件包,使用里面封装的工具函数

代码示例

  • // 我们utils里面的软件包的内容被打包在index.js文件中
    
    // 导入软件包(默认会找到index.js文件)
    const obj = require('./utils')  //自定义的包都是默认路径
    console.log(obj)
    
    // 返回结果  
    // 相当于 ;obj  =  {
    //     getArraySum: [Function: getArraySum],
    //     checkUser: [Function: checkUserName],
    //     checkPwd: [Function: checkPassWord]
    //   }
    // 
    
    // 调用软件包里面的功能方法和属性
    const result = obj.getArraySum([10,4,1000,300])
    console.log(result)
    

    一定要注意:1、我们utils软件包里面的所有功能包的内容 事先 被打包在index.js文件中

    				   2、最后我们在导入软件包(默认会找到index.js文件)或者main属性指定的文件
    

npm-软件包管理器

拓展问题

使用npm第三方包下载软件包的时候;在步骤没有问题的前提下发生了一堆错误

解决的办法为:最有可能是没有执行权限,我们要以管理员什么打开vscode,然后在执行步骤就可以了。

npm的作用和使用
  • npm软件包管理器的作用:下载软件包以及管理版本

  • 下载后的包会放在 node_modules中,并记录在package.json中

    • 目标:使用 npm 下载 dayjs 软件包来格式化日期时间
      1. (可选)初始化项目清单文件,命令:npm init -y
      1. 下载软件包到当前项目,命令:npm i 软件包名称
      1. 使用软件包
  • 如果在执行步骤2 的时候出现了报错问题,请看上面的拓展问题。

代码演示:
//3、 使用软件包(前提是通过第 1  2  点步骤后执行)
const dayjs = require('dayjs')   //导入后为一个函数
// dayjs包导出来的是一个函数,所以我们先调用该函数,然后再调用对象中格式化方法
const nowDateStr = dayjs().format('YYYY-MM-DD')
console.log(nowDateStr)
代码详细解析:

上述代码是使用dayjs库进行日期处理的示例。下面是对代码的详细解释:

第一行导入了名为dayjs的库,它是一个用于处理日期和时间的JavaScript库。通过require(‘dayjs’)引入该库,并将其赋值给变量dayjs。

第三行调用了dayjs()函数,这是dayjs库的主要函数。它返回当前的日期和时间对象。

接着使用.format(‘YYYY-MM-DD’)方法来对日期对象进行格式化。format()方法可以将日期对象以指定的格式转换成字符串。在这里,传递的参数’YYYY-MM-DD’表示希望得到的日期格式为年份-月份-日期。

将格式化后的日期字符串赋值给nowDateStr变量。

最后一行使用console.log()函数打印输出nowDateStr变量的值,即当前日期的字符串表示。

总结:以上代码导入了dayjs库并使用它来获取当前日期,并以指定的格式YYYY-MM-DD进行格式化,并将格式化后的日期字符串打印输出。

npm-安装所有依赖

目标:安装所有依赖软件包

* 场景:一般拿到别人的项目后,只有 package.json 缺少 node_modules 时需要做

* 语法:在当前项目终端下,输入命令:npm i

* 效果:会根据 package.json 记录的所有包和版本开始下载

代码演示
  • 注意在没有安装依赖node_modules文件夹时,无法使用软件包,解决办法需要在终端输入 npm i来查找并下载
// 格式化日期
const dayjs = require('dayjs')
const nowDateStr = dayjs().format('YYYY-MM-DD')
console.log(nowDateStr)

// 求数组里最大值
const _ = require('lodash')
console.log(_.max([1, 2, 8, 3, 4, 5]))

npm-全局软件包 nodemon

软件包的区别
  • 本地软件包:当前项目内使用,封装属性和方法,存在于 node_modules
  • 全局软件包:本机所有项目使用,封装命令工具,存在于系统设置的位置
nodemon作用

nodemon作用: 代替node命令,检测代码更改,自动重启程序

modemon使用
  1. modemon使用: 安装:npm i nodemon -g (-g代表安装到全局环境中)

  2. nodemon运行:nodemon待执行的目标文件

目标
  • 目标:使用 nodemon 全局软件包,检测文件变化,自动重启程序
语法:

* 1. 安装 nodemon 全局软件包,命令:npm i nodemon -g

* 2. 使用 nodemon 来执行目标 js 文件

* 体验:启动后,修改代码,保存后观察终端效果

代码示例
// 格式化日期
const dayjs = require('dayjs')
const nowDateStr = dayjs().format('YYYY-MM-DD')
console.log(nowDateStr)

// 求数组里最大值
const _ = require('lodash')
console.log(_.max([1, 10, 2, 3, 4, 50]))   //nodemon 全局软件包  只要文件内容一修改,他会实时运行文件(实时检测代码变化)

nodemon全局软件包:实时检测文件代码的更改,自动重启程序帮我们执行运行

node.js常用命令总结

Node.js 模块化

  • 概念:每个文件当做一个模块,独立作用域,按需加载
  • 使用:采用特定的标准语法导出和导入进行使用
两个标准

1、CommonJs标准

    1. 导出语法:module.exports = {}
    2. 导入语法:require(‘模块名或路径’)

2、ECMAScript标准

  • 细分为两种:一种是默认导出导入 一种是命名导出导入。
    1. 默认导出:export default{}

    2. 默认导入:import 变量名 from ‘模块名或路径’

    1. 命名导出:export 修饰定义语法
    2. 命名导入import{同名变量} from ‘模块名或路径名’
两个标准使用场景的选择

CommonJs标准 :一般应用在Node.js项目环境中

ECMAScript标准: 一般应用在前端工程化项目中

CommonJs标准 导出语法:module.exports = {} 导入语法:require(‘模块名或路径’)
ECMAScript标准默认 默认导出语法:export default{} 默认导入语法:import 变量名 from ‘模块名或路径’
ECMAScript标准(命名) 命名导出语法:export 修饰定义语法 命名导入语法:import{同名变量} from ‘模块名或路径名’

Node.js包

node.js 包:把模块文件、代码文件,其他资料聚合城一个文件夹。由此可知:文件就相当于是模块。

包的两大类
  • 一个是项目包:编写项目需求和业务逻辑的文件夹

  • 一个是软件包:封装工具和方法进行使用的文件夹(一般使用 npm 管理)

    软件包有本地软件包全局软件包

    本地软件包:例如:dayjs lodash …

    全局软件包:nodemon

常用命令总结

功能 命令
执行js文件 node xxx (xxx为文件名)
初始化 package.json npm init -y
下载本地软件包 npm i 软件包名
下载全局软件包 npm i 软件包名 -g
删除软件包 npm uni 软件包名 (删除全局和下载一样 加一个 -g)

你可能感兴趣的:(node.js,node.js,学习,笔记,前端)