前端要解决的基本问题｜青训营

Wants
231 阅读5分钟

抽一点时间整理下青训营笔记、相信课程笔记对于刚入门的伙伴会受益匪浅

我的小破站：gavinking.top

笔记代码Code

本次笔记围绕“前端要解决的基本问题”及“什么是 HTML ”两个基本问题展开。

笔记重点

  1. 前端工作的定义
  2. 前端技术栈拆解与分析
  3. HTML 作用解析、语义化

1. 前端工作的定义

负责构建用户在浏览器中直接与之交互的部分，即用户界面的开发。前端工作涵盖了网页的外观、布局、交互和性能优化等方面，旨在为用户提供良好的使用体验。

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈

image.png

2. 前端技术栈拆解与分析

前端技术栈是指在前端开发中使用的一组技术、工具和框架的集合，用于构建用户界面、实现交互效果和优化性能。下面将结合前端技术栈简写拆解为几个关键部分，并进行分析：

  1. 基本技术：
  • HTML（超文本标记语言）： 用于定义网页的结构和内容，包括标题、段落、图像、链接等。
  • CSS（层叠样式表）： 用于定义网页的样式和布局，控制元素的颜色、字体、间距等外观属性。
  1. JavaScript：
  • JavaScript（JS）： 用于实现网页的交互效果和动态功能。可以操作DOM元素、处理用户输入、发送网络请求等。
  1. 前端框架和库：
  • React： 由Facebook开发的JavaScript库，用于构建用户界面。使用组件化开发思想，实现虚拟DOM和单向数据流。
  • Vue.js： 一套用于构建用户界面的渐进式框架，易于学习和集成，支持响应式数据绑定和组件化开发。
  • Angular： 由Google开发的前端框架，提供强大的工具和特性，支持双向数据绑定和依赖注入。
  1. 状态管理：
  • Redux（React中常用）： 用于管理应用的状态，通过创建一个中央存储来存储和管理应用的数据。
  • Vuex（Vue中常用）： 用于管理应用的状态，集中管理和共享数据，实现组件间通信。
  1. 构建工具：
  • Webpack： 用于构建和打包前端资源，包括JavaScript、CSS、图片等。支持模块化开发、代码分割、代码压缩等功能。
  • Parcel： 轻量级的打包工具，可以自动处理资源的依赖关系，无需手动配置。
  1. 模块化：
  • ES Modules： 原生的JavaScript模块化系统，允许将代码拆分为多个文件，并通过import和export语句进行模块导入和导出。
  • CommonJS（Node.js中常用）： 用于服务器端的模块化系统，通过require和module.exports语句进行模块导入和导出。
  1. 样式预处理器：
  • Sass/SCSS： 一种CSS预处理器，提供了变量、嵌套、混合等功能，增强了CSS的可维护性。
  • Less： 另一种CSS预处理器，类似于Sass，可以简化CSS编写过程。
  1. 自动化测试和工具：
  • Jest（React中常用）： 由Facebook开发的JavaScript测试框架，用于编写单元测试和集成测试。
  • Vue Test Utils（Vue中常用）： 用于编写Vue组件的单元测试。
  • Cypress： 用于进行端到端的用户行为测试，模拟用户在浏览器中的交互行为。
  1. 包管理工具：
  • npm（Node.js中常用）： Node.js包管理工具，用于安装、管理和共享前端和后端的依赖包。
  • Yarn： 另一种包管理工具，与npm类似，但具有更快的速度和一些额外的特性。
  1. 性能优化：
  • 性能优化： 使用技术如懒加载、代码分割、压缩、图片优化等来提高应用性能和加载速度。
  • PWA（Progressive Web App）： 利用Web技术，使网页应用在移动设备上具有更接近原生应用的体验，包括离线访问、推送通知等功能。

这些技术和工具在前端开发中扮演了重要的角色，帮助开发者构建现代化、高性能的Web应用。前端技术栈的选择会根据项目需求、开发团队的偏好以及行业趋势来确定。

前端应该关注的方面？

  • 功能->美观->无障碍->安全->性能->兼容->体验

前端的边界与开发环境？

node、ELECTRON、React Native、WebRTC 、WebGL、WEbASSEMBLY

image.png

3. HTML 作用解析、语义化？

HTML 语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如required、readonly

image.png

语义化是什么？

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言

谁在使用我们写的HTML

  • 开发者-修改、维护页面
  • 浏览器-展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人读页面内容

语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提上无障碍性

传达内容而不是样式！！！

如何做到语义化？

  • 了解每个标签和属性的含义
  • 思考什么标签最合适描述这个内容
  • 不使用可视化工具生成代码
avatar
文章
阅读
粉丝