01-前端与 HTML&CSS
2024-03-03 137 字 1 分钟

01-前端与 HTML&CSS

这篇笔记记录了HTML与CSS部分的课程内容 一、本堂课重点内容 HTML标签 HTML语义化 CSS属性 CSS选择器 CSS页面布局 二、详细知识点介绍 1、HTML标签 标题：h1~h6 列表 有序列表：ol 无序列表：ul 自定义列表：dl、dt、dd 链接：a 图片：img 多媒体：video、audio 输入 input select、option textarea datalist 2、CSS属性 字体属性（font） 文本属性 背景属性（background） 边框属性（border） … 3、CSS选择器 通配符选择器 * { margin: 0; …
02-如何写好JavaScript
2024-03-03 305 字 2 分钟

02-如何写好JavaScript

这一篇笔记记录了如何遵循工业化、规范化的编程原则写出更好的JS代码。 一、本堂课重点内容 JavaScript 编码原则之各司其责 JavaScript 编码原则之组件封装 JavaScript 编码原则之过程抽象 二、详细知识点介绍 1、JavaScript 编码原则之各司其责 在编写项目的时候，HTML、CSS、JavaScript尽量各做各该做的事情，HTML就负责页面结构，CSS就负责样式渲染，JavaScript就负责交互行为。 在课程中，月影老师从一个切换日间与夜间风格的需求入手，逐步讲解如何一步一步地优化代码，直到达到“各司其责”的目的。 借用YK菌的一句话：“最好的JS就是不 …
03-如何优化JavaScript代码
2024-03-03 410 字 2 分钟

03-如何优化JavaScript代码

这篇笔记记录了如何通过利用JavaScript编码原则和算法优化来改进JavaScript代码。 一、本堂课重点内容 判断一段JavaScript代码是否是好代码不能仅从代码本身的书写风格来看 利用JavaScript的编码原则（各司其责、组件封装、过程抽象） 在算法层面优化代码 二、详细知识点介绍 1、代码“不可貌相” 有这样一段代码： function isUnitMatrix2d(m){ return m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] …
04-HTTP协议
2024-03-03 163 字 1 分钟

04-HTTP协议

这篇笔记记录了前端开发中常用的一些HTTP协议知识。 一、本堂课重点内容 HTTP的发展 HTTP协议分析 二、详细知识点介绍 1、HTTP的发展 HTTP/0.9 单行协议 请求GET /mypage.html 响应只有HTML文档 HTTP/1.0 构建可扩展性 增加了Header 有了状态码 支持多种文档类型 … HTTP/1.1 标准化协议 链接复用 缓存 内容协商 … HTTP/2 更优异的表现 二进制协议 压缩header 服务器推送 … HTTP/3草案 2、状态码 200 OK - 客户端请求成功 301 - 资源（网页等）被永久转移到 …
05-Web安全
2024-03-03 170 字 1 分钟

05-Web安全

这篇笔记记录了Web前端开发中必须了解的一些Web安全知识。 一、本堂课重点内容 XSS攻击&防御 CSRF攻击&防御 二、详细知识点介绍 1、XSS攻击 在DOM中插入恶意代码 特点 通常难以从 UI 上感知 窃取用户信息(cookie/token) 绘制 UI（例如弹窗），诱骗用户点击/填写表单 分类 存储型XSS（Stored XSS） 恶意脚本被存在数据库中 访问页面→读数据 === 被攻击 危害最大，对全部用户可见 反射型XSS（Reflect XSS） 不涉及数据库 从 URL 上攻击 DOM型XSS（DOM-based XSS） 不需要服务器的参与 恶意攻击的发 …
06-TypeScript入门
2024-03-03 727 字 4 分钟

06-TypeScript入门

这篇笔记记录一些TypeScript的基本语法和知识点。 一、本堂课重点内容 TypeScript 基本语法 TypeScript 高级数据类型 二、详细知识点介绍 1、TypeScript特性 TypeScript是一门弱类型、静态的语言 弱类型语言：允许隐式类型转换 静态：编译时就确定变量的数据类型。动态语言是运行时确定 静态语言特性 可读性强 可维护性强：编译时发现错误 TS是JS的超集 2、基本语法 基础数据类型：string、number、boolean、null、undefined 对象类型 readonly：只读属性 ?.：可选属性 [key: string]: any：表示这一 …
07-Node.js与前端开发
2024-03-03 252 字 2 分钟

07-Node.js与前端开发

这篇笔记记录了Node.js与前端开发相关的一些知识 一、本堂课重点内容 Node.js的应用场景 Node.js运行时结构 编写Http Server 二、详细知识点介绍 1、Node.js应用场景 前端工程化 Bundle: webpack, vite, esbuild, parcel Uglify: uglifyjs Transpile: babeljs, typescript 现状：难以替代 Web服务端应用 学习曲线平缓，开发效率较高 运行效率接近常见的编译语言 社区生态丰富及工具链成熟(npm, V8 inspector) 与前端结合的场景会有优势（SSR） 现状：竞争激 …
08-前端开发调试
2024-03-03 171 字 1 分钟

08-前端开发调试

这篇笔记记录了Web前端开发中必须了解的一些调试知识。 一、本堂课重点内容 PC端调试 移动端调试 Node.js调试 常用开发调试技巧 二、详细知识点介绍 1、PC端调试 Chrome DevTools Elements: 元素和样式 点击.cls开启动态修改元素的class，输入字符串可以给元素添加类名 调试伪类元素可以在Elements的DOM树中右键单击该元素，选择【强制状态】，也可以在右边栏的【样式】（Styles） -> 【:hov】处选择 如果某个元素具有的样式太多太复杂，可以在右边栏的【已计算】（Computed） -> 【筛选器】（Filter）搜索对应的样式，可 …
09-Webpack入门
2024-03-03 320 字 2 分钟

09-Webpack入门

这篇笔记记录了Webpack基础定义与使用的知识 一、本堂课重点内容 什么是Webpack Webpack打包核心流程 示例 Entry => Dependencies => Transform => Bundle => Output 关键配置项介绍 Loader组件 Plugin组件 如何学习Webpack 入门级：学会灵活应用 进阶：学会扩展Webpack 大师：源码级理解Webpack打包编译原理 二、详细知识点介绍 1、什么是Webpack 前端项目由许多资源组成，旧时代（2009年之前）使用手工管理是存在许多问题的 依赖手工，比如css使用link标签引 …
10-Vite知识体系
2024-03-03 100 字 1 分钟

10-Vite知识体系

这篇笔记记录了Vite的概要、实战、进阶等知识体系 一、本堂课重点内容 浅谈构建工具 Vite概要介绍 Vite上手实战 Vite整体架构 Vite进阶路线 二、详细知识点介绍 1、构建工具存在的意义 前端工程的痛点 模块化：ESM、CommonJS、UMD 资源编译：高级语法的编译 产物质量：代码体积、代码性能 开发效率：热更新 前端构建工具的意义 模块化方案 提供模块加载方案 兼容不同模块规范 语法转译 高级语法转译 资源加载 产物质量 产物压缩 无用代码删除 语法降级 开发效率 热更新 2、Vite的概要介绍 定位：新一代前端构建工具 两大组成部分 No-bundle 开发服务，源文件无 …