Day1-前端语言串讲 | 青训营

Kimhi
111 阅读9分钟

一、前端三剑客

  众所周知，前端三剑客是HTML、CSS和JavaScript。HTML 提供了网页的结构，CSS 为网页添加了样式和装饰，JavaScript 为网页增加了交互性和动态功能,想象一下我们要烤一份披萨。HTML 就像是披萨的饼底，它提供了整个披萨的基础。CSS 就像是披萨上的调料和装饰，它决定了披萨的外观和呈现方式。JavaScript则是披萨的烤箱，它赋予了披萨烹饪的能力，并使其具有交互性。

HTML

  HTML（HyperText Markup Language）超文本标记语言，用于创建网页的结构和内容。它由一系列的标签构成，这些标签定义了网页中的各种元素，例如标题、段落、图像、链接等。

  HTML 的基本工作原理是使用标签将文本包裹起来，从而告诉浏览器如何显示这些内容。每个标签由一对尖括号（<>）包围，通常有一个开标签和一个闭标签，标签之间包含内容。例如，<p> 是一个段落标签，表示一个段落的开始，</p> 是相应的结束标签，表示段落的结束。

  通过使用不同的标签和属性，HTML 可以定义页面的结构、排版、文本样式、图像、链接以及其他媒体元素。开发者可以使用 HTML 创建页面的标题、段落、表格、列表、按钮等各种元素，从而组成一个完整的网页。

  当浏览器加载 HTML 文件时，它会按照标签的顺序解析文件，并根据标签的定义渲染和呈现内容。这意味着开发者可以通过编写适当的 HTML 代码来控制网页的结构和外观，并确保页面在不同浏览器上具有一致的展示效果。

  在这浅说一下HTML中的标签语义化：常见的语义化标签有<header>、<footer>、<main>、<aside>、<textarea>、<video>、<audio>等。标签语义化有以下作用:

  1. 有利于浏览器代码阅读
  2. 有利于SEO，帮助爬虫爬取更多有效的信息

SEO（Search Engine Optimization），搜索引擎优化，是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。

  1. 良好的代码结构，是页面没有样式的情况时也能呈现出良好的结构
  2. 便于开发与维护，语义化标签令代码更具可读性，让其他开发人员更容易理解代码。
  3. 方便其他设备解析，例如屏幕阅读器，盲人阅读器，移动设备

CSS

  CSS（Cascading Style Sheets）是一种用于描述网页外观和样式的样式表语言。它与 HTML 配合使用，为 HTML 文档中的元素添加样式和布局，从而控制网页的外观和呈现方式。

  CSS 使用选择器来选择特定的 HTML 元素，并通过属性-值对的方式指定这些元素的样式。开发者可以使用各种 CSS 属性来定义元素的尺寸、颜色、字体样式、边距、背景等。通过为不同的选择器设置样式，可以实现对网页中具体元素或一组元素的样式控制。

  CSS 的样式规则具有层叠性，即当多个样式规则作用于相同的元素时，它们会根据优先级和特定规则进行合并和决定最终的样式。这使得开发者可以轻松地对网页进行全局或局部的样式修改，而不必直接修改 HTML 代码。

说一下样式的优先级

！important＞行内样式＞id选择器＞类选择器（包括伪类选择器）＞标签选择器（伪元素选择器：：after{}=后代选择器）＞子选择器＞通配符选择器（*）

  除了基本的样式设置，CSS 还提供了一些高级特性，如盒子模型、浮动、定位、动画和响应式设计等。这些功能使开发者能够更加灵活地控制页面布局和交互效果。

  CSS 可以通过三种方式应用到 HTML 页面上：内联样式（在 HTML 元素的 style 属性中指定）、内部样式表（在 <style> 标签中定义）和外部样式表（通过链接外部的 .css 文件）。外部样式表是最常用的方式，它可以在多个 HTML 文档上重复使用同一套样式，提高了代码的维护性和可重用性。

JavaScript

  JavaScript 是一种用于开发交互性和动态性网页的脚本语言。它被广泛应用于前端开发，能够为网页添加各种交互功能和动态效果。

  JavaScript 的主要作用是在浏览器中操作 HTML 元素、处理用户的输入和响应，并与后端服务器进行通信，实现动态更新和交互性。使用 JavaScript，可以对网页元素进行增删改查、实现表单验证、动态修改样式和内容、处理用户事件（如点击、滚动、键盘输入等）、发送请求与服务器交互（如异步请求、获取数据等）等等。

  这是JavaScript发展史image.png

  在2015年后出现的ES6引入一些新的特性:

  1. 块级作用域：引入了let和const关键字来声明块级作用域的变量，块级作用域意味着变量只在当前代码块内部可见，解决了使用var声明变量导致的变量提升和作用域混乱的问题。
function example() {
  let x = 10; // 块级作用域变量
  const y = 20; // 块级作用域常量

  if (true) {
    let x = 30; // 块级作用域变量，不影响外层 x 的值
    const y = 40; // 块级作用域常量，不影响外层 y 的值
    console.log(x, y); // 输出 30, 40
  }

  console.log(x, y); // 输出 10, 20
}
  1. 箭头函数：箭头函数是一种更简洁的函数声明方法，使用箭头=>来定义函数，自动绑定了上下文的this
const add = (a, b) => a + b;

const square = num => num * num;

const greet = () => {
  console.log('Hello!');
};
  1. 模板字符串：使用反引号``来定义模板字符串，可以在其中插入变量或表达式
const name = 'Alice';
const age = 25;

const message = `My name is ${name} and I am ${age} years old.`;

console.log(message); // 输出 "My name is Alice and I am 25 years old."
  1. 解构赋值：允许从数组或对象中提取值并赋给变量，简化了数据的提取操作
// 数组解构赋值
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出 1, 2, 3

// 对象解构赋值
const person = {
  name: 'Alice',
  age: 25,
  city: 'New York'
};

const { name, age } = person;

console.log(name, age); // 输出 "Alice", 25
  1. 默认参数：在函数声明时可以为参数设置默认值
function greet(name = 'Anonymous') {
  console.log(`Hello, ${name}!`);
}

greet(); // 输出 "Hello, Anonymous!"
greet('Bob'); // 输出 "Hello, Bob!"
  1. 拓展运算符：通过...操作符可以将数组或对象的元素展开作为函数参数或合并数组、对象
// 展开数组作为函数参数
const numbers = [1, 2, 3];
console.log(...numbers); // 输出 1, 2, 3

// 合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // 输出 [1, 2, 3, 4, 5, 6]

// 复制对象
const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // 输出 { x: 1, y: 2 }
  1. 模块化：使代码分割为多个模块，并使用export和import关键字进行模块的导出和导入
// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add, subtract } from './utils.js';

console.log(add(1, 2)); // 输出 3
console.log(subtract(5, 3)); // 输出 2
//在 utils.js 文件中，我们使用 export 导出了两个函数 add 和 subtract，然后在 main.js 文件中使用 import 导入这两个函数，并可以直接调用它们。
  1. 类：可以使用class关键字定义类，并使用constructor方法初始化对象的属性
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person('Alice', 25);
person.sayHello(); // 输出 "Hello, my name is Alice and I am 25 years old."
//在上面的例子中，我们使用 class 关键字定义了一个 Person 类，并在构造函数 constructor 中初始化对象的属性。然后，我们定义了一个 sayHello 方法，可以通过创建 Person 类的实例并调用 sayHello 方法来输出信息。
  1. Promise：是一种异步操作的机制，可以更好地处理回调地狱问题，并提供更加清晰的异步编程流程
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Success';
      resolve(data);
    }, 2000);
  });
}

fetchData()
  .then(response => {
    console.log(response); // 输出 "Success"
  })
  .catch(error => {
    console.error(error);
  });
  //在上面的例子中，我们定义了一个 fetchData 函数，它返回一个 Promise 对象。在 Promise 的回调函数中，我们模拟了一个异步操作，并通过 resolve 方法将结果返回。然后，我们使用 .then() 方法来处理异步操作成功的情况，并使用 .catch() 方法来处理失败的情况。

最后

  在本次《前端语言串讲》课程中，有一点知识令我好奇，是我在这以前没听过的概念：PWA和AMP

  课后我查询到了有关资料，在这做一下有关笔记：

  两者都是用于改进web应用性能和用户体验的技术，两者的重点略有不同，PWA更注重提供类似原生应用的功能和体验，AMP专注于快速加载和简化页面内容

  1. PWA（Progressive Web Apps）是一种新型的Web应用模型，结合了Web和原生应用的优势，旨在提供更快速、可靠和具有本地应用般体验的Web应用。PWA允许用户将网页添加到主屏幕上，并在离线状态下继续访问，具有推送通知和后台数据同步等功能。

核心特点：

  • 渐进式增强：逐步提升应用功能及体验，适应各种设备和网络条件
  • 响应式设计：适应不同屏幕尺寸和设备类型，提供一致的用户界面
  • 离线支持：即使在断网或弱网络环境下，仍可以访问应用的部分功能和内容
  • 应用外展示：可以通过添加到主屏幕等方式，以类似原生应用的方式呈现给用户
  • 推送通知：可以向用户发送推送通知，与用户保持互动
  1. AMP（Accelerated Mobile Pages）是一种用于创建快速加载和优化移动端页面的开放标准。AMP页面通过限制标记和脚本的使用，以及优化资源加载方式，实现快速的页面加载速度

核心特点：

  • 快速加载：通过精简HTML、CSS和JavaScript，并使用异步加载资源，实现极快的页面加载速度
  • 预渲染：AMP页面在加载前就会进行预渲染，提高用户感知的加载速度
  • 缓存机制：AMP页面可以通过Google AMP Cache等缓存服务进行全球分发，加速页面加载并减轻服务器负担
  • 响应式布局：AMP页面能够适应各种不同的设备屏幕尺寸
  • 限制交互和样式：为了保证页面性能，AMP限制了某些JavaScript功能和CSS样式的使用

希望这篇文章能够帮助到各位观众老爷，第一次写文章多多包涵，如有错误的地方请指正！

avatar
文章
阅读
粉丝