前端语言串讲 | 青训营

怒码少年
120 阅读6分钟

1.1. 三件套的基本能力

1.1.1 三者区别

  • HTML(Hyper Text Markup Language,超文本标记语言，不是编程语言): 构建网页结构，控制网页布局——“人体骨骼”
  • CSS(Cascading Style Sheet，层叠样式表): 添加样式美化页面，适应不同屏幕尺寸，是设计网站外观最佳的工具——“人体皮囊”
  • JavaScript: 灵活的一个脚本语言，拥有灵活的函数和复杂的特性，主要用于网页之间的交互——“人体肌肉”

1.1.2 HTML

HTML不具备数据处理的能力，也就是不是图灵完备的，只是一种标记语言。

基本语法

标签、文本、注释、DTD(Document Type Defination)、处理信息

标签分类

  1. 根据文档：<!DOCTYPE>、<head>、<body>
  2. 根据是否闭合：闭合标签<p></p>和空标签<input>
  3. 根据是否换行：块级标签，行内标签
  4. H5新元素：语义化标签、媒体标签、表单标签、功能标签

HTML head标签

  1. title： 全局唯一，就是浏览器打开时显示的标题
  2. base：向页面内所有相对URL提供前缀，全局唯一(不建议使用)
  3. meta:常是约定好的键值对，例如charset、http-equiv
  4. link：常用于引入css文件，rel决定类型，href决定引入地址
  5. script：常用于引入js文件，可内嵌代码，可外链文件，type指定MIME类型

HTML as body

只需要大致了解，大致分为：根元素，文本语义，表单元素，嵌入元素等

HTML ARIA

ARIA全称Accessible Rich Internet Applications 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。

简单来说就是设置属性让HTML更容易被理解

HTML5

  1. 不再是单纯地纯文本标记语言

  2. 添加了Canvas、svg、音视频、位置信息等内容

  3. 加入了许多的语义化标签，使得网页层次更加清晰，但是要注意一定要用对，不然容易有误解。用对比不用好，不用比用错好。

  4. 表单增强，扩展了表单组件，支持radio 下拉框分组 颜色时间选择器等等

  5. HTML存储，加入了Cookies,LocalStorage SessionStorage存储机制。这个机制可以一定程度上减少请求次数，减轻服务器的负担。

  6. HTML5 indexedDB

    • 用于将数据存储在用户的浏览器中。indexeddb比本地存储更强大，对需要存储大量数据的应用程序很有用。 这些应用程序可以更快地运行效率和加载。
    • 相当于一个适合web开发人员的数据库。

  7. PWA AWP

    • PWA基于Service Worker
    • AMP便于搜索引擎爬取

  8. Web Worker

    • Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面,也就是多线程

  9. Web Socket

    • WebSocket 是一种通信协议，它通过TCP连接在客户端和服务器之间提供双向通信，WebSocket连接始终保持打开状态，因此它们允许实时数据传输。(全双工)，可以简单模拟TCP的服务方式.

  10. Shadow DOM可以避免内部的元素被外部元素访问到

  11. Web Component:可以用于自定义标签

  12. WebGL和WebGPU：可以将gpu的能力赋予到前端中

1.1.3 CSS

CSS语法很简单，基本格式如下，但是能完全掌握也不轻松。

基本格式

//这是一段伪代码
选择器 {
  key: value;
}

选择器的种类

  1. 基础选择器：通配符选择器，元素选择器，类选择器，id 选择器
  2. 复合选择器：后代选择器，子代选择器，相邻选择符，兄弟选择符，群组选择器
  3. 伪类选择器和伪元素选择器

补充：使用MDN文档学习

1.1.4 JavaScript

借鉴了C语言的基本语法，借鉴了Java语言的数据类型和内存管理，将函数升为第一等公民，使用基于原型的继承机制。

基本语法

  1. 六个基本类型：String，Number，Boolean，Null,Underfined，Symbol
  2. 对象类型Object: Array,Function

1.1.5 浏览器中如何渲染

页面中有渲染引擎和JavaScript引擎

  • 渲染引擎根据html内容，构建DOM树->构建CSS树，根据样式特性和结构特性->排版->合成图层渲染->绘制页面
  • JavaScript引擎将源代码解析为AST语法树->通过Ignition转化为ByteCode->Turbofan收集信息，将热代码优化为Machine Code，提高性能->若输入的数据类型不对会导致Turbofan转为feedback，从而让Ignition重新优化。因此我们不建议修改变量的类型。

1.2. 前端语言的协作配合

1.2.1 CSS in HTML

  1. inline class--行内样式
 <h1 style="color:red;">111111</h1>
  1. internal class--内部样式
 <style type="text/css">
    div{ background: green;
    }
  </style>
  1. external class--外部样式
 <link type="text/css" rel="stylesheet" href="css/style.css" />

1.2.2 JavaScript in HTML

  1. 可以通过script标签引用直接在里面写js，但现在很少用。

注意：这里默认定义定义的是全局函数。

  1. 事件机制
    • 事件捕获：点击按钮时，click事件从document一直定位到对应的标签
    • 事件冒泡：定位到对应的标签后，click事件会被激发，并层层向外传递，方便程序员做一些代理。
  2. 事件循环 JavaScript是单线程语言。一个事件循环的流程如下所示：
    • 完成所有宏任务队列(例如script代码块，setTimeout等)
    • 完成微任务队列(例如Promise)

1.2.3 HTML in JavaScript

主要是动态生成HTML页面。

  1. 通过传统的DOM API
  2. {{}}模板语法
  3. 通过JSX

1.2.4 CSS in JavaScript

  1. 通过DOM API

例如： div.setAtribute("class","div2")

  1. 通过CSS Module
  2. 通过jss

1.3. 杂谈分享

1.3.1 Web风靡的原因：

  1. 对用户友好 无需安装、无需强大硬件、升级方便、容错率搞、容易传播
  2. 对开发者友好 丰富的api、心智模型成熟、开发调试简单、跨平台、领域成熟度高(各种应用种类、商业化和组件化)

1.3.2 交互范式

  1. MVC

    • View:处理界面
    • Model:维护数据层
    • Controller:处理用户逻辑

  2. MVP： 是对MVC的优化，把所有的操作内置到Presenter中

  3. MVVM：由vue发扬光大

1.4 总结思考

通过这节课，我们了解到了前端开发中常见的方法和语言，对前端开发的未来有了一定的了解。在前端的未来，我们将看到更加交互式、响应式和智能化的用户界面。前端技术将不断演进，以适应不断变化的用户需求和新兴技术的出现。这就要求我们不断学习和更新技术，时代的洪流滚滚而来，不进则退。

加油！与诸君共勉。

avatar
文章
阅读
粉丝