前端node.js入门-前端工程化与模块化

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

Node.js 入门 

什么是 Node.js?

什么是前端工程化?  

Node.js 为何能执行 JS? 

fs 模块 - 读写文件 

path 模块 - 路径处理

URL 中的端口号 

常见的服务程序 

Node.js 模块化

什么是模块化? 

CommonJS 标准 

ECMAScript 标准 - 默认导出和导入  

包的概念  

npm - 软件包管理器 

npm - 全局软件包 nodemon

Node.js 总结  


Node.js 入门 

什么是 Node.js?

定义:

作用:使用 Node.js 编写服务器端程序
        编写数据接口,提供网页资源浏览功能等等
        前端工程化 :为后续学习 Vue 和 React 等框架做铺垫

什么是前端工程化?  

前端工程化:开发项目直到上线,过程中集成的所有 工具和技术
Node.js 是前端工程化的基础(因为 Node.js 可以主动读取前端代码内容)

Node.js 为何能执行 JS? 

首先:浏览器能执行 JS 代码,依靠的是内核中的 V8 引擎 (C++ 程序)
其次:Node.js 是基于 Chrome V8 引擎进行封装(运行环境)
区别:都支持 ECMAScript 标准语法,Node.js 有独立的 API
注意: Node.js 环境没有 DOM 和 BOM 等

fs 模块 - 读写文件 

fs 模块:封装了与本机文件系统进行交互的,方法/属性
语法:
1. 加载 fs 模块对象
2. 写入 文件内容
3. 读取 文件内容
//1.加载fs模块对象
const fs = require('fs')
//2.写入文件内容
fs.writeFile('./test.txt','hello world',(err)=>{
    if(err){
        console.log(err)
    }
    else{
        console.log('写入成功')
    }
})
//3.读取文件内容
fs.readFile('./test.txt',(err,data)=>{
    if(err){
        console.log(err)
    }
    else{
        console.log(data.toString())
    }
})

 终端显示为:                        

path 模块 - 路径处理

建议:在 Node.js 代码中,使用 绝对路径
补充: __dirname 内置变量(获取当前模块目录-绝对路径)
注意: path.join() 会使用特定于平台的分隔符,作为定界符,将所有给定的路径片段连接在一起
语法:
1. 加载 path 模块
2. 使用 path.join 方法,拼接路径

URL 中的端口号 

URL: 统一资源定位符,简称网址,用于访问服务器里的资源
端口号:标记服务器里不同功能的 服务程序
端口号范围:0-65535 之间的任意整数
注意:http 协议, 默认 访问 80 端口

常见的服务程序 

Web 服务程序 :用于提供网上信息浏览功能
注意:0-1023 和一些特定端口号被占用,我们自己编写服务程序请避开使用

Node.js 模块化

什么是模块化? 

定义:

概念:项目是由很多个模块文件组成的
好处:提高代码复用性,按需加载, 独立作用域
使用:需要标准语法 导出 导入 进行使用

CommonJS 标准 

使用:
1. 导出:module.exports = {}
2. 导入:require('模块名或路径')

ECMAScript 标准 - 默认导出和导入  

默认标准使用:
1. 导出: export default {}
2. 导入: import 变量名 from '模块名或路径'
注意: Node.js 默认支持 CommonJS 标准语法
如需使用 ECMAScript 标准语法,在运行模块所在文件夹新建 package.json 文件,并设置
{ "type" : "module" }

包的概念  

包:将模块,代码,其他资料聚合成一个文件夹

包分类:
         项目包:主要用于编写项目和业务逻辑
         软件包: 封装工具和方法 进行使用
要求:根目录中,必须有 package.json 文件(记录包的清单信息)
注意:导入软件包时,引入的默认是 index.js 模块文件 / main 属性指定的模块文件

npm - 软件包管理器 

定义:

使用:
1. 初始化清单文件 :npm init -y(得到 package.json 文件,有则略过此命令)
2. 下载软件包
npm i 软件包名称
3. 使用软件包

npm - 全局软件包 nodemon

软件包区别:
本地软件包: 当前项目 内使用,封装 属性和方法 ,存在于 node_modules
全局软件包: 本机 所有项目使用,封装 命令和工具 ,存在于系统设置的位置
nodemon 作用:替代 node 命令,检测代码更改,自动重启程序
使用:
1. 安装:npm i nodemon -g(-g 代表安装到全局环境中)
2. 运行:nodemon 待执行的目标 js 文件

Node.js 总结  

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

CommonJS 标准:一般应用在 Node.js 项目环境中
ECMAScript 标准:一般应用在前端工程化项目中
Node.js 包:
概念:把模块文件,代码文件,其他资料聚合成一个文件夹
项目包:编写项目需求和 业务逻辑 的文件夹
软件包: 封装工具和方法 进行使用的文件夹(一般使用 npm 管理)
本地软件包:作用在 当前 项目,一般封装的 属性/方法 ,供项目调用编写业务需求
全局软件包:作用在 所有 项目,一般封装的 命令/工具 ,支撑项目运行

常用命令:  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/79912.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

神经网络基础-神经网络补充概念-08-逻辑回归中的梯度下降算法

概念 逻辑回归是一种用于分类问题的机器学习算法,而梯度下降是优化算法,用于更新模型参数以最小化损失函数。在逻辑回归中,我们使用梯度下降算法来找到最优的模型参数,使得逻辑回归模型能够更好地拟合训练数据。 逻辑回归中的梯…

C语言——通讯录详解(动态版)

通讯录详解 前言:一、定义一个通讯录二、初始化三、增加联系人3.1 给通讯录扩容3.2增加联系人 四、释放内存五、完整代码 前言: 我们已经学过了通讯录的静态版,但是它的缺点很明显,通讯录满了就添加不了联系人了啦。我再让通讯录升…

山东布谷科技直播软件源码Nginx服务器横向扩展:搭建更稳定的平台服务

在直播软件源码平台中,服务器扮演着重要的角色,关系着视频传输、数据处理、用户管理等工作的顺利完成。随着互联网的迅猛发展,直播行业也随之崛起,全世界的人们都加入到了直播软件源码平台中,用户流量的增加让服务器的…

Mac鼠标增强工具Smooze Pro

Smooze Pro是一款Mac上的鼠标手势增强工具,可以让用户使用鼠标手势来控制应用程序和系统功能。 它支持多种手势操作,包括单指、双指、三指和四指手势,并且可以自定义每种手势的功能。例如,您可以使用单指向下滑动手势来启动Expos视…

web JS高德地图标点、点聚合、自定义图标、自定义窗体信息、换肤等功能实现和高复用性组件封装教程

文章目录 前言一、点聚合是什么?二、开发前准备三、API示例1.引入高德地图2.创建地图实例3.添加标点4.删除标点5.删除所有标点(覆盖物)6.聚合点7.自定义聚合点样式8.清除聚合9.打开窗体信息 四、实战开发需求要求效果图如下:封装思…

pdf怎么合并在一起?这几个合并方法了解一下

pdf怎么合并在一起?在日常工作、学习和生活中,我们常常会遇到需要将多个PDF文件合并成一个文件的情况。比如,在学术论文写作中,我们可能需要将多篇论文合并成一个文件进行打印和提交。在工作中,我们可能需要将多个报告…

记录每日LeetCode 617.合并二叉树 Java实现

题目描述: 给你两棵二叉树: root1 和 root2 。 想象一下,当你将其中一棵覆盖到另一棵之上时,两棵树上的一些节点将会重叠(而另一些不会)。你需要将这两棵树合并成一棵新二叉树。合并的规则是:…

如何从cpu改为gpu,pytorch,cuda

1.cmd输入nvcc -V 2.得到 cuda版本后,去pytorch官网 3.根据自己的cuda进行选择 4.复制上述链接,进入cmd 5.cmd中输入activate XXX,这里的"XXX"指代自己在工程中用到的环境 6.进入后,将刚才链接粘贴,回车等待下载结束 …

文心一言 VS 讯飞星火 VS chatgpt (76)-- 算法导论7.3 1题

一、如果用go语言,为什么我们分析随机化算法的期望运行时间,而不是其最坏运行时间呢? 文心一言: 在分析算法的性能时,期望运行时间是一个重要的指标,它描述了算法在平均情况下的表现。期望运行时间考虑了所有可能的…

spring(15) SpringBoot启动过程

目录 一、过程简介二、过程流程图三、源码分析1、运行 SpringApplication.run() 方法2、确定应用程序类型3、加载所有的初始化器4、加载所有的监听器5、设置程序运行的主类6、开启计时器7、将 java.awt.headless 设置为 true8、获取并启用监听器9、设置应用程序参数10、准备环境…

韦东山-电子量产工具项目:UI系统

代码结构 所有代码都已通过测试跑通,其中代码结构如下: 一、include文件夹 1.1 common.h #ifndef _COMMON_H #define _COMMON_Htypedef struct Region {int iLeftUpX; //区域左上方的坐标int iLeftUpY; //区域左下方的坐标int iWidth; //区域宽度…

安防监控视频云存储EasyCVR平台H.265转码功能更新:新增分辨率配置

安防视频集中存储EasyCVR视频监控综合管理平台可以根据不同的场景需求,让平台在内网、专网、VPN、广域网、互联网等各种环境下进行音视频的采集、接入与多端分发。在视频能力上,视频云存储平台EasyCVR可实现视频实时直播、云端录像、视频云存储、视频存储…

从零做软件开发项目系列之一综论软件项目开发

1 引言 有一个三个泥瓦匠的故事。 三个泥瓦匠在砌墙,一个人走过来,问他们在干什么。   第一个泥瓦匠没好气地说,你没看见吗?我在辛苦地砌墙呢。   第二个回答,我们正在建一座高楼。   第三个则洋溢着喜悦说&…

CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果)

文章目录 filter 滤镜blur() 模糊度例子 渐变光晕 brightness() 元素亮度contrast() 对比度grayscale() 元素灰度hue-rorate() 色相opacity() 透明度invert() 反转颜色saturate() 饱和度 backdrop-filter 蒙版,滤镜例子 卷轴展开 filter 滤镜 动图为效果添加前后对…

开源了一套基于springboot+vue+uniapp的商城,包含分类、sku、商户管理、分销、会员、适合企业或个人二次开发

RuoYi-Mall-JAVA商城-电商系统简介 开源了一套基于若依框架,SringBoot2MybatisPlusSpringSecurityjwtredisVueUniapp的前后端分离的商城系统, 包含分类、sku、商户管理、分销、会员、适合企业或个人二次开发。 前端采用Vue、Element UI(ant…

视频汇聚/视频云存储/视频监控管理平台EasyCVR添加萤石云设备详细操作来啦!

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

贝锐蒲公英助力电子公交站牌联网远程运维,打造智慧出行新趋势

在现代城市公共交通系统中,我们随处可见电子公交站牌的身影。作为公共交通服务的核心之一,电子公交站牌的稳定运行至关重要,公交站台的实时公交状况、公共广告信息,是市民候车时关注的焦点。 某交通科技公司在承接某市智能电子站牌…

MR300C工业无线WiFi图传模块 内窥镜机器人图像传输有线无线的两种方式

MR300C无线WiFi图传模使用方法工业机器人图像高清传输 ⚫ MR300C图传模块基于MIPS处理器实现,电脑/手机连接模块的WIFI热点或网口即可查看视频流 ⚫ 模块的USB 2.0 Host接口,可接入USB uvc摄像头/内窥镜默认输出的视频格式必须是MJPG ⚫ 模块支持接入摄…

Python绘图系统6:自定义坐标列表控件

文章目录 自定义坐标列表控件显示和隐藏加载按钮坐标设置控件的显示和隐藏源代码 Python绘图系统: 基础:将matplotlib嵌入到tkinter 📈简单的绘图系统 📈数据导入📈三维绘图系统自定义控件:坐标设置控件&a…

【解决】Kafka Exception thrown when sending a message with key=‘null‘ 异常

问题原因: 如下图,kafka 中配置的是监听域名的方式,但程序里使用的是 ip:port 的连接方式。 解决办法: kafka 中配置的是域名的方式,程序里也相应配置成 域名:port 的方式(注意:本地h…