余弦の博客

# 什么是设计模式 设计模式是软件设计中常见问题的解决方案模型，是历史经验的总结，与特定语言无关 设计模式大致分为 23 种设计模式 创建型 —— 如何高效灵活的创建一个对象 结构型 —— 如何灵活的将对象组装成较大的结构 行为型 —— 负责对象间的高效通信和职责划分 # 浏览器中的设计模式 # 单例模式 单例模式 —— 存在一个全局访问对象，在任意地方访问和修改都会反映在这个对象上 最常用的其实就是浏览器中的 window 对象，提供了对浏览器的操作的封装，常用于缓存与全局状态管理等 # 单例模式实现请求缓存 用单例模式实现请求缓存：相同的 url...

# 事件处理 事件处理 – React (docschina.org) 需要传入一个函数作为事件处理函数，而不是一个字符串。 <button onClick={activateLasers}> Activate Lasers </button> 不能通过返回 false 的方式阻止默认行为。必须显式的使用 preventDefault 。 function ActionLink() { function handleClick(e)...

终于到了我超期待的一门课～～ 课程目标： 认识和了解小程序的业务产品价值 学习和掌握小程序相关技术原理 # 小程序的发展历程 # 发展历程 # 核心数据 # 小程序生态 # 业务价值 # 与 WEB 的区别 有着固定的语法以及统一的版本管理， 平台可以更方便的进行审核 平台能够控制各个入口，如二维码，文章内嵌，端内分享。入口上也能带来更好的用户体验 小程序基于特殊的架构，在流畅度上比 WEB 更好，有更优秀的跳转体验 # 三大价值 # 渠道价值 便捷导流 由于小程序的便捷性，依托于超级平台，小程序能够充分为很多场景导流，如美团和美团优选微信小程序带来的流量占比分别是 40%...

# Web 多媒体历史 PC 时代：Flash 等播放插件，富客户端。 移动互联网时代：Flash 等逐渐被淘汰，HTML5 出现了，但其支持视频格式等有限 Media Source Extensions ，支持多种视频格式等 # 基础知识 # 编码格式 # 图像基本概念 图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。 图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。 例如，彩色图像每个像素用 R,G,B 三个分量表示，每个分量用 8 位，像素深度为 24 位，可以表示的颜色数目为...

# 前端场景下的游戏开发 # 开发角色和链路 游戏开发的团队分工 组建一个最小但最完整的游戏开发团队只需要 3 个人：策划、程序、美术。 当然，能力足够强的话可以作为独立开发者。 基本链路 立项阶段 -> 原型阶段 -> Alpha 版本 -> Beta 阶段 -> 运营阶段 #...

这节课老师讲了 TypeScript 的用处与基本语法、高级类型的应用、类型保护与类型守卫 # 什么是 TypeScript # 发展历史 2012-10：微软发布了 TypeScript 第一个版本 (0.8) 2014-10：Angular 发布了基于 TypeScript 的 2.0 版本 2015-04：微软发布了 Visual Studio Code 2016-05：@ ty pes/react 发布，TypeScript 可开发 React 2020-09：Vue 发布了 3.0 版本，官方支持 TypeScript 2021-11：v4.5 版本发布 # 为什么是...

# 本节课重点内容 # Why WebGL / Why GPU? WebGL 是什么？ GPU ≠ WebGL ≠ 3D WebGL 为什么不像其他前端技术那么简单？ # 现代的图像系统 光栅 (Raster)：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。 像素 (Pixel)：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。 帧缓存 (Frame Buffer)：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。 CPU (Central Processing Unit)：中央处理单元，负责逻辑计算。 GPU...

# 本节课重点内容 理解前端 "工程化" 概念、工具、目标 一个团队总要有那么几个人熟悉 Webpack, 某种程度上可以成为个人的核心竞争力 高阶前端必经之路 课程目标： 理解 Webpack 的基本用法 通过介绍 Webpack 功能、Loader 与 Plugin 组件设计，建立一个知识体系 不会事无巨细，介绍 Webpack 所有 也不是深入源码，讲解底层实现原理 # 什么是 Webpack 前端项目由什么构成？—— 资源 旧时代手动管理这些资源，但有以下几个对开发效率影响非常大的缺点： 依赖手工，比如有 50 个 JS 文件……...

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

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