前端学习笔记

羊村懒大王230
95 阅读10分钟

前端学习笔记：快速了解前端相关知识

一、HTML 基础与进阶

  1. HTML 基本结构与标签

    • HTML 文档的基本结构包括 <!DOCTYPE> 声明、<html>、<head> 和 <body> 等标签。其中，<!DOCTYPE> 声明位于文档的第一行，用于告知浏览器文档类型及使用的 HTML 版本；<html> 标签包裹整个 HTML 文档；<head> 标签内包含文档的元数据（如字符编码、标题、链接样式表等）；<body> 标签则包含了文档的主要内容。
    • 常用的 HTML 标签包括标题标签（<h1> ~ <h6>）、段落标签（<p>）、链接标签（<a>）、图片标签（<img>）、列表标签（<ul>、<ol>、<li>）等。这些标签通过嵌套和组合，构成了丰富多彩的网页内容。

  2. 表单元素与输入验证

    • HTML 提供了多种表单元素（如输入框 <input>、文本域 <textarea>、选择框 <select> 等）供用户输入数据。同时，HTML5 还引入了多种输入类型（如 email、url、number 等），以便对用户输入进行预验证。
    • 通过为表单元素添加 required、pattern 等属性，可以实现简单的客户端输入验证。当用户提交表单时，如果不符合验证规则，浏览器将自动提示用户。

  3. 语义化 HTML

    • 语义化 HTML 是指使用具有明确意义的 HTML 标签来描述文档内容，以提高文档的可读性和可维护性。例如，使用 <header>、<footer>、<article>、<section> 等标签来划分文档的不同区域；使用 <nav> 标签定义导航链接等。

  4. HTML5 新增功能

    • HTML5 新增了许多强大的功能和 API，如本地存储（LocalStorage 和 SessionStorage）、离线缓存（Application Cache）、音视频播放（<audio>、<video> 标签）、画布绘图（<canvas> 标签）等。这些功能极大地丰富了 Web 应用的交互能力和多媒体表现力。

二、JavaScript：前端逻辑的核心

  1. 基础知识与语法

    • JavaScript 是一种弱类型的编程语言，变量在使用前无需声明类型。它支持多种数据类型（如字符串、数字、布尔值、null、undefined、对象等）和复杂的数据结构（如数组、对象）。
    • JavaScript 的语法包括变量声明（var、let、const）、运算符（算术运算符、比较运算符、逻辑运算符等）、控制语句（if...else、for、while、switch 等）、函数定义和调用等。

  2. DOM 操作与事件处理

    • DOM（Document Object Model）是浏览器提供给开发者的一种编程接口，用于描述 HTML 或 XML 文档的结构。通过 JavaScript，可以访问和操作 DOM 树中的元素节点（如添加、删除、修改节点等）。
    • 事件处理是 JavaScript 与用户交互的重要机制。通过为元素绑定事件监听器（如 click、mouseover、keydown 等），可以响应用户的操作并执行相应的代码逻辑。

  3. Ajax 与异步编程

    • Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下与服务器进行数据交换的技术。通过 XMLHttpRequest 对象或现代的 Fetch API，可以实现异步请求和响应的处理。
    • 异步编程是 JavaScript 的一大特点，但也可能带来回调地狱等问题。为了解决这些问题，JavaScript 引入了 Promise、async/await 等现代异步编程特性，使得异步代码更加简洁易读。

  4. 面向对象与函数式编程

    • JavaScript 支持面向对象编程范式，通过构造函数、原型链和 ES6 引入的 class 关键字等方式来实现类的继承和多态等特性。
    • 同时，JavaScript 也具备函数式编程的能力，如高阶函数、闭包、纯函数等概念。函数式编程风格的代码通常更加简洁、易于测试和维护。

三、TypeScript：为大型项目而生

  1. TypeScript 基础与优势

    • TypeScript 是 Microsoft 开发的一种开源编程语言，它是 JavaScript 的超集，添加了静态类型和其他一些高级特性。TypeScript 可以在编译时检查类型错误，从而提高代码的可靠性和可维护性。
    • TypeScript 的优势在于它提供了强大的工具支持（如 TypeScript Server）、良好的编辑器体验和广泛的社区生态。同时，由于 TypeScript 最终会被编译成纯 JavaScript 代码，因此它可以无缝地与现有的 JavaScript 项目集成。

  2. 类型系统与接口

    • TypeScript 的类型系统非常强大且灵活，支持原始类型（如 string、number、boolean 等）、对象类型、联合类型、交叉类型、数组和元组类型等多种类型定义方式。
    • 接口是 TypeScript 中的一个重要概念，用于描述对象的结构和形状。接口可以被视为一种契约，确保实现它的类或对象具备特定的属性和方法。

  3. 高级特性与最佳实践

    • TypeScript 支持许多高级特性，如泛型、枚举、模块系统等。泛型允许你编写更加通用和可复用的代码；枚举提供了一种定义常量集合的方式；模块系统则帮助你组织和管理项目中的代码文件。
    • 在使用 TypeScript 时，建议遵循一些最佳实践，如始终使用严格的类型检查（启用 --strict 选项）、合理使用类型别名和接口、避免过度使用 any 类型等。这些做法可以提高代码的质量和可维护性。

四、React：构建高效用户界面的利器

  1. React 基础与组件化思维

    • React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它采用组件化的思维来构建界面，即将界面拆分成一个个小的、独立的、可复用的组件。每个组件负责渲染界面的一个部分，并通过组合来构建复杂的界面。
    • React 的核心思想是组件状态管理和单向数据流。通过 state 和 props 来管理组件的内部状态和外部属性；通过父子组件之间的通信来实现数据的传递和更新。这种单向数据流的设计使得应用的状态管理更加清晰和可控。

  2. JSX 与虚拟 DOM

    • JSX 是一种类似于模板语言的语法扩展，用于描述 UI 界面的结构。它允许你在 JavaScript 代码中直接编写 HTML 标签和属性，从而提高了代码的可读性和可维护性。JSX 最终会被编译成 React.createElement() 函数调用。
    • React 使用虚拟 DOM 来提高性能。虚拟 DOM 是对真实 DOM 的一层抽象表示，它记录了应用的状态变化并计算出需要更新的部分。当组件的状态或属性发生变化时，React 会创建一个新的虚拟 DOM 树并与旧的树进行比较（即差异算法），最后只更新需要变化的部分到真实的 DOM 中。这种优化策略大大提高了界面渲染的性能。

  3. Hooks 与函数式组件

    • Hooks 是 React v16.8 引入的新特性之一，它允许你在函数式组件中使用 state、lifecycle methods 以及其他以 “use” 开头的钩子函数来管理组件的状态和副作用等行为。Hooks 的引入使得函数式组件更加灵活和强大，同时也减少了类组件的复杂度和冗余代码量。
    • 函数式组件是无状态的组件（即不能拥有自己的 state），它们接受 props 作为参数并返回一个 React 元素。函数式组件通常用于展示静态内容或简单逻辑的组件；而类组件则用于需要管理复杂状态和生命周期的组件。在现代 React 开发中，推荐使用函数式组件结合 Hooks 来进行开发以提高代码的可读性和可维护性。

  4. React 生态与最佳实践

    • React 拥有庞大的生态系统和社区支持，包括 Redux、React Router、Styled Components 等流行的第三方库和工具可以帮助你构建更加高效和可维护的 React 应用。
    • 在使用 React 时，建议遵循一些最佳实践来保持应用的健康和可维护性，如避免过度使用 state 和 forceUpdate()、合理使用 shouldComponentUpdate() 优化渲染性能、遵循命名约定提高代码可读性等。此外，定期审查和重构代码也是保持应用健康的重要手段之一。

五、网络请求与浏览器原理

  1. HTTP/HTTPS 基础与网络请求

    • HTTP（HyperText Transfer Protocol）是一种无状态的协议，用于在客户端和服务器之间传输数据。HTTPS（HyperText Transfer Protocol over SSL/TLS）则是在 HTTP 的基础上增加了加密层，用于保护数据传输的安全性。
    • 在前端开发中，我们经常使用浏览器提供的 fetch API（或其他第三方库如 axios）来发送网络请求并与后端进行数据交换。常见的请求方法包括 GET（用于获取资源）、POST（用于提交数据）、PUT（用于更新资源）、DELETE（用于删除资源）等。这些请求方法对应于 CRUD（Create, Read, Update, Delete）操作模型来对资源进行操作和管理。

  2. 浏览器缓存与离线应用

    • 浏览器缓存是为了提高网页加载速度而设计的一种机制，它将用户最近访问过的网页内容存储在本地计算机上以便下次快速访问。常见的缓存技术包括强缓存（Cache-Control）、协商缓存（Last-Modified / If-Modified-Since、Etag / If-None-Match）等。
    • Service Workers 是一种新的 Web API，用于创建离线应用和推送通知等功能。Service Workers 可以拦截和处理网络请求、缓存资源文件并在网络不可用时提供离线访问能力。通过 Service Workers，我们可以构建更加快速和可靠的 Web 应用体验。

  3. 跨域问题与解决方案

    • 跨域问题是前端开发中常见的一个问题之一，它指的是浏览器出于安全考虑限制了不同源之间的资源共享和通信的问题。当一个网页试图访问另一个域下的资源时，浏览器会阻止该请求并抛出一个跨域错误（Cross-Origin Resource Sharing Policy Violation）。
    • 为了解决这个问题，我们可以使用 JSONP（只支持 get 请求）、CORS（Cross-Origin Resource Sharing，支持各种类型的请求）或代理服务器等方式来实现跨域资源的访问和通信。JSONP 是通过动态插入 script 标签并利用 script 标签的不受同源策略限制的特性来实现跨域请求的；而 CORS 则是通过设置服务器端的响应头信息来允许特定域下的请求访问资源；代理服务器则是一种中间件模式的解决方案，客户端将所有请求发送给代理服务器并由其转发给目标服务器从而绕过跨域限制。

  4. 浏览器渲染原理与性能优化

    • 浏览器的渲染流程大致可以分为解析 HTML 文件、构建 DOM 树、样式计算、布局与绘制等步骤。在这个流程中，浏览器会根据 CSSOM 树和渲染树来计算每个节点的位置和外观样式并最终将其绘制到屏幕上展示给用户看。
    • 为了提高 Web 应用的性能和用户体验我们需要关注以下几个方面的优化：减少 HTTP 请求次数（如合并文件、使用雪碧图等）、压缩和优化资源文件大小（如 gzip 压缩、图片无损压缩等）、利用浏览器缓存减少重复加载时间、避免阻塞渲染的 CSS 和 JavaScript（如将关键 CSS 内联到 head 中或放在底部加载 JavaScript）等。此外还可以使用 Webpack 等构建工具来自动化处理这些优化任务并提高开发效率。
avatar
文章
阅读
粉丝