前端语言串讲 | 豆包MarsCode AI刷题

用户616266001833
143 阅读4分钟

目录

  1. 前端语言的基本能力
  2. 前端语言的协作配合
  3. 你不知道的HTML5
  4. 拓展分享

前端语言的基本能力

即：HTML、CSS、JS三剑客

  • HTML：构建网页的框架和结构，优化搜索引擎排名（SEO）的关键。

  • CSS（层叠样式表）：为网页添加样式，使其更加美观。

  • JS：前端开发的灵魂，赋予网页动态交互的能力。

image.png

CSS选择器

  1. 类选择器
  2. id选择器
  3. 通配符选择器
  4. 伪元素选择器(::)//元素内容
p::after {
    content:'';
    clear:both;
}
//选择p的第一个字母
p::first-letter {
    color:#666;
}
//选择p的第一行
p::first-line {
    color:'#555'
}
  1. 标签选择器
  2. 伪类选择器(:)//元素自身状态
//点击时（悬浮在a标签上）
a:hover {
    color:pink;
}
//链接的原始状态
a:link {
    color:red;
}
//按钮被禁言时，里面字的颜色是蓝色
button:disabled {
    color:bule;
}
div:nth-child(2) {
    width:300px;
}

  1. 后代选择器

  2. 兄弟选择器(到指定的元素后面的所有满足条件的兄弟元素)

    h1 ~ p {
        color: skyblue;
      }
      
      
    <h1>你好</h1>
    <p>1</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>

image.png 9. 属性选择器

    div[] {
        
    }
  1. 相邻选择器(选择紧接在某个元素后的元素，并且二者具有相同的父级元素)
//h1相邻的div的内容都变成了红色
h1+div {
    color:red;
}

<h1>你好</h1>
<div>111111111</div>

image.png

还有更多:

image.png

JavaScript基本数据类型

  • 基本数据类型包括：String、Number、Boolean、Undefined、Null、Symbol 和 BigInt。

JavaScript复杂数据类型

  • 复杂数据类型主要是 Object，包括数组和函数等。

image.png

image.png

Symbol和bigInt解析：

Symbol

  • 定义：Symbol 是一种新的原始数据类型，表示独一无二的值，主要用于对象属性的唯一标识符。

  • 创建：通过 Symbol() 函数创建，每个 Symbol 值都是唯一的，即使它们具有相同的描述。

    const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false

  • 用途：

    • 防止属性名冲突：使用 Symbol 作为对象的属性名，可以避免与其他属性名冲突。
    • 私有属性：Symbol 创建的属性不会被常规的 for...in 循环或 Object.keys() 方法列出，提供了一种实现私有属性的方法。

BigInt

  • 定义：BigInt 是一种新的原始数据类型，表示任意大小的整数，超出了 Number 类型的安全整数范围（-2^53 + 1 到 2^53 - 1）。

  • 创建：可以通过在整数后面添加 n 来创建 BigInt，也可以使用 BigInt() 函数。

    const bigInt1 = 123456789012345678901234567890n;
const bigInt2 = BigInt("123456789012345678901234567890");
console.log(bigInt1 + bigInt2); // 246913578024691357802469135780n

  • 用途：

    • 处理大整数：在需要进行大数计算时，如金融计算、加密等场景，BigInt 提供了高精度的整数表示。
    • 大数数组：可以用于处理大数据量的数组计算，避免 Number 类型精度丢失的问题。

注意事项

  • 类型转换：Symbol 和 BigInt 不能隐式转换为其他数据类型，使用时需要显式转换。
  • 与 Number 不兼容：BigInt 不能与 Number 类型直接进行运算，需先进行类型转换。

示例代码

// Symbol 示例
const uniqueKey = Symbol('key');
const obj = {
    [uniqueKey]: 'value'
};
console.log(obj[uniqueKey]); // 'value'

// BigInt 示例
const bigIntValue = 9007199254740991n; // 大于 Number.MAX_SAFE_INTEGER
const sum = bigIntValue + 1n;
console.log(sum); // 9007199254740992n

如何在浏览器上运行？？
浏览器一般分为两种引擎：渲染引擎（加载页面）和js引擎

image.png （渲染引擎）

image.png （v8引擎）
继承树：

image.png

DOM的事件机制：

image.png
事件机制：

image.png 宏任务：整体代码script、setTimeout、setInterval、setImmediate（Node.js）、i/o操作（输入输出，比如读取文件操作、网络请求）、ui render（dom渲染，即更改代码重新渲染dom的过程）、异步ajax等

微任务：Promise（then、catch、finally）、async/await、process.nextTick（Node.js）、Object.observe(⽤来实时监测js中对象的变化，已废弃)、 MutationObserver(监听DOM树的变化) 你不知道的HTML5

image.png

image.png HTML5技术全览：

image.png 语义化标签：

image.png
HTML5表单控件：

image.png

image.png （拓展：IndexDB）

image.png

image.png

image.png

image.png

拓展分享

前端开发的领域广泛，HTML5 的新特性仅仅是一个开始。随着技术的发展，还有很多值得探索的领域。

  1. WebSocket 和 Web Worker：WebSocket 提供了实时双向通信的能力，适用于实时应用。Web Worker 允许在后台线程中执行脚本，提高页面性能。
  2. MVC、MVVM、MVP：这些设计模式为前端开发提供了架构指导，有助于分离关注点，提高代码的可维护性和可重用性。
  3. 可视化技术：WebGL 和 WebGPU 为前端开发者提供了强大的图形处理能力，能够实现高性能的图形渲染和复杂的可视化效果。

（你不知道的HTML5有很多需要拓展学习的地方）

avatar
文章
阅读
粉丝