框架前置知识

柿子患者
156 阅读7分钟

框架前置课

node.js入门（JavaScript运行时环境）

什么是node.js

定义： node.js是一个跨平台JavaScript运行环境，使开发者可以搭建服务器端的JavaScript应用程序

作用：使用 Node.js编写服务器端程序

  • 编写数据接口，提供网页资源浏览功能等等
  • 前端工程化：为后续学习Vue和React等框架做铺垫

什么是前端工程化？

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

Nodejs为何能执行js？

首先： 浏览器能执行js代码，依靠的是内核中的V8引擎（c++程序）

其次：Node.js是基于Chrome V8引擎进行封装（运行环境）

区别：都支持ECMAScript标准语法，Node。js有独立的api

image.png

使用 node.js

需求：新建js文件，并编写代码后，在node环境下执行

命令：在vscode集成终端中，输入node xxx.js，回车即可执行

fs模块-读写文件

模块：类似插件，封装了方法/属性

fs模块：封装了与本机文件系统进行交互的，方法/属性

语法：

  1. 加载 fs模块对象
  2. 写入文件内容
  3. 读取文件内容

image.png

path模块-路径处理

问题：node.js代码中，相对路径是根据终端所在的路径来查找的，可能无法找到你想要的文件

建议：在node.js中，使用绝对路径

补充：__dirname 内置变量（获取当前模块目录-绝对路径）

注意：path.join()会使用特定于平台的分隔符，作为定界符，将所有给定的路径片段连接在一起

语法：

  1. 加载path模块

const path =require('path')

  1. 使用path.join方法，拼接路径

path.join('路径1','路径2',...)

案例-压缩前端html

需求：把回车符(\r)和换行符(\n)去掉之后，写入到新的html文件中

步骤：

  1. 读取源html文件内容
  2. 正则替换字符串
  3. 写入到新的html文件中

url中的端口号

url：统一资源定位符，简称网址，用于访问服务器里的资源

端口号（作用）：标记服务器里不同功能的服务程序

端口号范围：0-65535之间的任意整数

注意：http协议默认访问80端口

image.png

常见的服务程序

web服务程序：用于提供网上信息浏览功能

注意： 0-1023和一些特定端口号被占用，我们自己编写服务程序请避开使用

http模块-创建web服务

需求： 创建web服务并响应内容给浏览器

步骤：

  1. 加载http模块，创建web服务对象
  2. 监听request请求事件，设置响应头和响应体
  3. 配置端口号并启动web服务
  4. 浏览器请求 http：//locahost：3000测试

node.js模块化

什么是模块化？

定义：commonjs模块是为node.js打包JavaScript代码的原始方式。弄得.js还支持浏览器和其他JavaScript运行时使用的ECMAScript模块标准。在node.js中，每个文件都被视为一个单独的模块。

概念：项目是有很多模块文件组成的

好处： 提高代码复用性，按需加载，独立作用域

使用：需要标准语法导出和导入进行使用

commonJS标准

需求：定义util.js模块，封装基地址和求数组综合的函数

使用：

  1. 导出：module.export={}
  2. 导入：require（‘模块名或路径’）

模块名或路径：

  • 内置模块：直接写名字（例如：fs,path,http）
  • 自定义模块：写模块文件路径（例如：./utils.js）

ECMAScript 标准-默认导出和导入

需求：封装并导出基地址共和求数组元素和的函数

默认标准使用：

  1. 导出：export default{}
  2. 导入：import 变量名from‘模块名或者路径’

注意：node.js默认支持commonjs标准语法，如需使用ECMAScript标准语法，在运行模块所在文件夹新建package.json文件，并设置{"type":"module"}

ECMAScript标准-命名导出和导入

需求：封装并导出基地址和求数组元素和的函数

命名标准使用：

  1. 导出：export修饰定义语句
  2. 导入：import{同名变量}from‘模块名或者路径’

如何选择：

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

image.png

包的概念

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

包分类：

  • 项目包：主要用于编写项目和业务逻辑
  • 软件包：封装工具和方法进行使用

要求：根目录中，必须有package.json文件（记录包的清单信息）

注意：导入软件包时，引入的默认是index.js模块文件/main属性指定的模块文件

npm-软件包管理器

定义：起初作为下载和管理node.js包依赖的方式，但其现在也已成为前端JavaScript中使用的工具

使用：

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

需求： 使用day.js软件包，来格式化日期时间

图解：

image.png

下载的包会存放在当前项目下的node_modules中，并记录在package.json中

npm-安装所有依赖

问题：项目中不包含node_modules,能否正常运行？

答案：不能，缺少依赖的本地软件包

原因：因为，自己用npm下载依赖比磁盘传递拷贝要快得多

解决：项目终端输入命令 ：npm i下载package.json中记录的所有软件包

npm-全局软件包 nodemon

软件包区别：

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

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

使用：

  1. 安装：npm i nodemon -g（-g代表安装到全局环境中）
  2. 运行：nodemon待执行的目标js文件

需求：启动准备好的项目，修改代码保存后，观察自动重启应用程序

node.js总结

node.js模块化：

概念： 每个文件当作一个模块，独立作用域，按需加载

使用：采用特定的标准语法导出和导入进行使用

image.png

CommonJs 标准：一般应用在Node.js项目环境中 ECMAScript 标准：一般应用在前端工程化项目中

Node.js包：

概念：把模块文件，代码文件，其他资料聚合成一个文件夹

项目包：编写项目需求和业务逻辑的文件夹

软件包：封装工具和方法进行使用的文件夹（一般使用npm管理）

  • 本地软件包：作用在当前项目，一般封装的属性/方法，供项目调用编写业务需求
  • 全局软件包：作用在所有项目中，一般封装的命令/工具，支撑项目运行

image.png

image.png

Webpack

什么是webpack？

定义：静态模块打包工具

静态模块：指的是编写代码过程中的，html,css,js,图片等固定内容的文件

打包：吧静态模块内容，压缩，整合，转译等（前端工程化）

  • 把less/sass转成css代码
  • 把Es6+降级成Es5
  • 支持多种模块标准语法

使用Webpack

需求：封装utils包，校验手机号长度和验证码长度，在src/index.js中使用并打包观察

步骤：

  1. 新建并初始化项目，编写业务源代码
  2. 下载webpack webpack-cli到项目中（版本独立），并配置局部自定义命令
  3. 运行打包命令，自动产生dist分发文件夹（压缩和优化后，用于最终运行的代码）

image.png

修改webpack打包入口和出口

webpack配置：影响webpack打包过程和结果

步骤：

  1. 项目根目录，新建webpack.config,js配置文件
  2. 导出配置对象，配置入口，出口文件的路径
  3. 重新打包观察

注意：只有和入口出口产生直接/间接的引入关系，才会被打包

image.png

用户登录-长度判断

需求：点击登录按钮，判断手机号和验证码长度

步骤：

  1. 准备用户登录界面
  2. 编写核心js逻辑代码
  3. 打包并手动复制网页到dist下，引入打包后的js，运行

核心：webpack打包后的代码，作用在前端网页中使用

image.png

自动生成html文件

插件 html-webpack-plugin:在webpack打包时生成HTML文件

步骤：

  1. 下载html-webpack-plugin本地软件包
  2. 配置webpack.config.js让webpack拥有插件功能
  3. 重新打包观察效果

未完待续...

avatar
文章
阅读
粉丝