3.7k 字 3 分钟

# 本节课重点内容 安全问题很常见，会危害 用户 公司 程序员（祭天 QAQ） # 两个角度看 web 安全 # 假如你是一个 hacker—— 攻击 # 跨站脚本攻击 XSS (Cross Site Scripting) 注入恶意脚本，完成攻击，后果：泄露用户隐私等 XSS 主要利用了开发者对用户提交内容的盲目信任 特点 通常难以从 UI 上感知（一般都是暗地里执行脚本） 窃取用户信息（cookie/token） 绘制 UI（如弹窗等），诱骗用户点击 / 填写表单 举个栗子 public async submit(ctx) { const...
6.6k 字 6 分钟

# 本节课重点内容 # Node.js 的应用场景（why） 前端工程化 早期的 jQuery 等库都是直接在页面中引入，后来模块化逐渐成熟，Node.js 赋予了开发者在浏览器外运行代码的能力，前端逐渐模块化、 Bundle：webpack、Vite、esbuild、Parcel 等 Uglify：UglifyJS Transplie：babeljs、TypeScript 个人理解：Transplie 就是将 ES6 这样最新的语法转译成低版本的写法，实现浏览器兼容 其他语言加入前段工程化的竞争：esbuild、Parcel 、prisma 等 现状：Node.js...
5.5k 字 5 分钟

# 初识 HTTP 输入 url -> browser 进程处理输入信息 -> 浏览器内核向服务器发起请求 -> 浏览器内核读取响应 -> 浏览器内核进行渲染 -> browser 进程页面加载完成 Hyper Text Transfer Protocol （HTTP）超文本传输协议 他是应用层协议，基于传输层的 TCP 协议 请求、响应 简单可扩展（可以自定义请求头，只要客户端服务端之间可以理解） 无状态 # 协议分析 # 发展历程 # 报文结构 #...
17k 字 15 分钟

# 动画的基本原理 # 动画是什么 动画是通过快速连续排列彼此差异极小的连续图像来制造运动错觉和变化错觉的过程。 —— 维基百科 快速 连续排列 彼此差异极小 制造 “错觉” 的过程 # 动画发展史 如今的前端动画技术已经普及 常见的前端动画技术 Sprite 动画、CSS 动画、JS 动画、SVG 动画和 WebGL 动画 按应用分类 UI 动画、基于 Web 的游戏动画和动画数据可视化 GIF、Flash 的出现，一度成为主流，也是在 00 年的前后，苹果公司认为 Flash 会导致 CPU 的负载，耗电加快，宣布全面放弃...
4.6k 字 4 分钟

# React 的历史与应用 应用 前端应用开发，如 Facebook，Instagram，Netflix 网页版。 移动原生应用开发，如 Instagram，Discord，Oculus。 结合 Electron，进行桌面应用开发。 历史 2010 年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。 2011 年 Jordan Walke 创造了 FaxJS，也就是后来的 React 原型: 既可以在客户端渲染也可以在服务端渲染 响应式，当状态变更时，UI...
2.7k 字 2 分钟

# 前端 Debug 的特点 多平台 浏览器、Hybrid、NodeJs、小程序、桌面应用…… 多环境 本地开发环境、线上环境 多工具 Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole…… 多技巧 Console、BreakPoint、sourceMap、代理…… # Chorme devTools Chorme devTools 谷歌浏览器自带的调试工具，功能非常之强大，包括现在很多浏览器也采用了这个调试工具，它既可以动态的添加 / 删除样式并实时的显示出来 # 强制状态显示 可以将一些特定状态下显示的元素显示出来（比如...
2.6k 字 2 分钟

# 关于前端开发 # 起源、架构、变迁 "Suppose all the information stored on computers everywhere were linked. Suppose l could program my computer to create a space in which everything could be linked to everything." ——Tim Berners-Lee, inventor of the World Wide...
6.9k 字 6 分钟

这节课是由月影老师讲的，干货满满，包括了面向对象的设计、组件封装、高阶函数（节流、防抖、批处理、可迭代化） # 本堂课重点内容 # 写好 js 的原则 # 各司其责 举个栗子：写一段 JS，控制一个网页，让他支持浅色 / 深色两种模式。你会怎么做呢？ 我的第一反应：写一个深色类，在切换按钮事件进行切换。这也是课件里讲的第二版。 第一版 直接切换样式，不妥，但能用 const btn = document.getElementById('modeBtn');btn.addEventListener('click', (e) => {...
6.4k 字 6 分钟

# 布局（layout） 确定内容的大小和位置的算法 依据元素、容器、兄弟节点和内容等信息来计算 CSS 基础框盒模型介绍 - CSS（层叠样式表） | MDN (mozilla.org) 当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。 每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective...
8.4k 字 8 分钟

老师：就看看基本的设计模式 序列化 注册监听器 对象实例化方法 反射的作用 切面编程 套接字 同步 连接池 线程池 比较接口 再看看代理模式 策略模式有什么应用 然后复习一下多线程编程 就好了 肯定还有个重点叫数据库连接吧！（ 行叭 虽然并不想用 Java 找工作但还是要学一下因为是必修，必修！ # Java 对象实例化方法 参考： Java 实例化对象的几种方式 Java 中实例化对象有好几种方式 使用 new 语句进行实例化，是最常用的创建对象方法 通过工厂模式中的方法返回对象，在下面的设计模式有介绍，eg： String str = String.valueOf (23);...