MNCLI

文件传输文件只能通过两种方式传输，分别是：通过二进制Blob对象上传(如formData)、通过base64传输，将文件转为base64格式，后端收到后再解码为文件。 Blob与File通过<input>标签上传文件，接收到的文件默认为File对象，Blob为不可变的二进制内容，包含很多操作方法 通过<input>接受的文件默认为File对象且为数组，multiple表示可接收多个文件 File是Blob的子类，两者可以互相转换 File对象具有name(文件名字)、size(文件大小)、type(文件类型)等属性 Blob对象没有name属性，其余与File相同 1234567891011121314151617<template> <input type="file" name="file" @change="filechange" multiple /></template><script setup...

盒子模型​ 盒子模型由四部分组成：Margin、Border、Padding、Content。 ​ 分为**标准盒模型(content-box)与替代盒模型(border-box)**。 标准盒模型 默认模式，box-sizing: content-box; width/height仅表示Content尺寸 实际宽度为width(height) + 2*(Padding + Border + Margin) 替代盒模型 通过box-sizing: border-box来设置 width/height包含Content、Padding、Border的尺寸 实际宽度为width(height) + 2*Margin 外边距塌陷​ 塌陷指当两个或多个垂直相邻的块级元素的外边距相遇时会合并成单个外边距的现象。 规则 两个正外边距时，实际外边距取大的边距，例：20px，50px 50px 一正一负外边距时，实际取两者之和，例：40px，-20px 20px 两个负外边距时，实际外边距取小的边距，例：-20px，-30px -30px 防止塌陷 使用BFC，添加display:...

事件循环机制 同步任务：按顺序逐行执行的代码，需原地等待结果后才继续向下执行 异步任务：调用后耗时，不阻塞代码继续执行，在将来完成后触发一个回调函数 组成 调用栈：存放正在执行的函数调用，顺序为先进后出。 任务队列：存储异步函数，包括setTimeout、setInterval、I/O事件、UI渲染 微任务队列：存储微任务，如Promise的.then .catch .finally 流程 执行一次宏任务，将同步代码存入调用栈并执行； 处理微任务，直到队列清空； 渲染页面； 取一个宏任务执行，重复上述步骤 注意 微任务优先级高于宏任务 每个宏任务执行后会清空微任务队列 同类型任务按入队顺序执行 示例12345678910111213141516171819202122232425262728293031323334353637383940414243444546console.log('1');async function asyncFuncA() { console.log('2'); // await...

编写接口12345678910// app.jsconst express = require('express');const app = express();const router = require('./router.js');app.use(express.json());// '/api'表示访问该路由时需要加上'/api'前缀app.use('/api' , router);app.listen(8000, () => { console.log('server started');}); 1234567891011121314151617181920// router.jsconst express = require('express');const router = express.Router();// 创建get接口router.get('/get',...

CommonJS模块化规范​ 模块化指自上而下把系统划分成若干模块的过程。 ​ 优点：复用性，可维护性，按需加载。 模块的分类 内置模块，由Node.js官方提供； 自定义模块，用户创建的每一个js文件都是自定义模块； 第三方模块，使用前需先下载。 加载模块​ 使用require()方法加载模块，加载模块时会执行模块中的代码 123const fs = require('fs');// 加载自定义模块需要写出文件路径，".js"可以省略const index = require('./index.js'); 模块作用域​ 与函数作用域类似，在自定义模块中定义的变量、方法等只能在当前模块使用。 module对象​ 每个自定义模块中都有一个module对象，里面存储了和当前模块有关的信息，其中exports为暴露的对象，通过exports可以使模块内的成员被外界访问到，导入的结果永远以module.exports指向的对象为准。 12345678const a = 'a';function...

Node.js​ Node.js是一个基于Chrome V8引擎的JS运行环境。 注意 浏览器是js的前端执行环境，node.js是js的后端执行环境。 Node.js中无法调用DOM、BOM与AJAX等浏览器内置API。 fs 文件系统模块​ 引用fs模块 1const fs = require("fs"); fs.readFile()​ 使用readFile可以读取指定文件中的内容，格式如下(甚至可以我读我自己)： 123456789fs.readFile('test.txt', 'utf8', (err, data) => { if (err) { // 读取成功err为null console.error(err); } else { // 读取失败时data为undefined console.log(data); ...

面向对象​ 除了继承JS的所有特性外，TS还在编译阶段引入了类(class)、接口(interface)、泛型(generics)等语法糖，使我们更容易以面向对象的方式编写代码。 class(类)12345678910111213141516171819202122232425262728class Person{ name: string; // 默认为public private age: number; // 可用private关键字修饰属性，此时不可直接调用实例的该属性,需要用get方法来获取 readonly sex: string; // readonly表示只读属性，不可被修改 static eyeNum: number = 2; // 用static关键字定义类属性(静态属性)或类方法，可直接通过类访问 protected height: number; // protected修饰的属性只能在当前类与子类中使用 // 构造函数，用来初始化实例属性，在创建对象时会调用 ...

TS是什么 TypeScript是一门以JS为基础构建的语言。 TS是JS的超集，所有JS代码均可在TS中运行。 TS扩展了JS，并添加了类型。 注意：TS不能被JS解析器直接执行，需要先编译成JS代码。 类型声明基本类型用法​ 声明变量时对变量类型进行设置，但即使报错依然会编译成js代码： 123let a:number;a = 1;a = "666"; // error，string类型不能赋值给number类型 ​ 如果同时进行声明与赋值，TS可自动对变量进行类型检测： 12let a = 2;a = true; // error ​ 也可对函数的参数类型与返回值类型进行声明： 12345function sum(a: number, b: number): number { return a + b;}sum(1,2);sum(1,"2"); // error 其他类型：12345678910111213141516let a: any = 1; //...

Vite​ 与webpack相同，Vite也是前端的构建工具。 与webpack的不同 开发时使用ESM的方式来运行项目，而不对代码进行打包。 生产时使用Rollup打包方式 可自动处理常见静态资源，无需像webpack一样配置loader。 配置简单，开箱即用，无需手动配置。 Plugins(插件)​ Vite也可使用plugins，使用方法与webpack类似。 ​ 配置文件格式为： 1234567// vite.config.jsimport { defineConfig } from "vite"; // 可有可无，若不添加则写为 export default{}// 使用es6的模块化来暴露文件export default defineConfig({ // ... plugins: [],}) ​ 如要使传统浏览器支持可使用@vitejs/plugin-legacy： ​ 安装： 1npm add -D...

​ webpack是一个现代JS应用的一个模块打包器，作用为将所有资源（JS，css，图片等）打包为多个静态文件。 配置文件​ 写在webpack.config.js中，格式为: 1234// webpack.config.jsmodule.exports = { // …}; Entry(入口) Output(出口)​ 入口文件与出口文件 12345678910111213// webpack.config.jsconst path = require('path')module.exports = { // 入口文件 entry: './src/index.js', // 入口文件路径 // 出口文件 output: { filename: 'main.js', // 出口文件名 path: path.resolve(__dirname, 'dist'), // 出口文件路径,必须绝对路径 clean: true, //...