前端基础学习笔记：从JavaScript到Redux工作流

资源摘要信息:"前端基础打卡学习笔记整理" 知识点梳理: 一、JavaScript 基础知识 1. Redux 工作流 - 理论基础：理解 Redux 是一种用于管理应用程序状态的库，它遵循单向数据流的设计模式。 - 实际应用：熟悉 Redux 的三大原则：单一数据源、状态是只读的以及使用纯函数来执行修改。 - Redux 独自运行流程：掌握通过 Action 创建、Reducer 函数处理和 Store 更新来完成状态变化的过程。 2. JavaScript 中同步与异步 - 同步代码：代码按顺序执行，后面的代码需要等待前面的代码执行完毕。 - 异步代码：代码不会阻塞主线程，允许其他代码在它等待异步任务（如 AJAX 请求）时继续运行。 - 事件循环：理解 JavaScript 引擎如何通过事件循环机制处理同步和异步任务，以及任务队列的概念。 3. HTTP 报文 - HTTP 方法：了解 HTTP 请求中常用的动词，如 GET、POST、PUT 和 DELETE。 - 状态码：熟悉 HTTP 响应状态码的意义，比如 200 表示成功，404 表示未找到，500 表示服务器错误等。 二、前端开发技巧 1. 数组拍平 - 理解拍平数组的含义，即将多层嵌套的数组变成一层扁平的数组结构。 - 掌握使用 JavaScript 的数组方法实现数组拍平，例如使用 `Array.prototype.flat()` 或递归。 2. link 和 @import 的区别 - link 是 HTML 标签，可以用来加载样式表以及其他资源。 - @import 是 CSS 规则，用于在 CSS 文件中导入其他 CSS 文件。 - 了解 link 和 @import 在加载顺序和性能方面的差异。 3. 原型和原型链 - 了解每个对象都有一个内部链接到另一个对象（原型对象）的概念。 - 掌握原型链的工作原理，即如何通过原型链访问对象的属性和方法。 三、前端工程化知识 1. 浏览器缓存机制 - 学习浏览器缓存的概念，包括强缓存和协商缓存。 - 掌握 Cache-Control、Expires、Last-Modified 和 ETag 等 HTTP 头部字段的作用。 2. cookie、session 和 localStorage 的区别 - cookie：存储在客户端的小文本文件，通常用于身份验证和会话管理。 - session：一种服务器端存储机制，用于跟踪用户的会话状态。 - localStorage：一种客户端存储方式，提供给网页存储更大量的数据而无需过期时间。 四、响应式设计与图形处理 1. 媒体查询 @media - 掌握 CSS 的@media 规则，用于根据不同的屏幕或设备特性应用不同的样式规则。 - 学习响应式设计的原则和技巧，使网页能够适应不同尺寸的屏幕。 2. box-sizing - 了解 box-sizing 属性的作用，它用于改变元素的盒模型。 - 掌握不同值的含义，例如 content-box 和 border-box，以及它们如何影响元素的尺寸计算。 3. SVG 和 Canvas 的区别 - 了解 SVG 是一种使用 XML 描述 2D 图形的语言，适合于需要交互的矢量图形。 - 掌握 Canvas 是一种通过 JavaScript 绘制 2D 图形的方法，适合于复杂的图形渲染。 - 学习两者在性能和适用场景上的区别，以及如何在项目中选择合适的图形处理方案。 以上内容是根据【标题】、【描述】和【标签】中提取的前端基础知识点，涵盖了 JavaScript 编程、前端工程化、响应式设计、浏览器缓存机制以及图形处理等多个前端开发领域。这些知识点是前端工程师日常工作中不可或缺的基础，对于深入理解前端技术以及提升开发效率具有重要作用。