前端进阶技术



异步与同步

异步与同步

概念

  前端的异步与同步是指在执行代码时，特定操作是按照顺序执行还是同时执行的不同方式。


  异步（Asynchronous）是指代码的执行不会阻塞其他代码的执行，操作将在后台进行，并在完成后通过回调函数、Promise等方式返回结果。这种方式适用于涉及网络请求、文件读写、定时器等耗时操作，以避免造成页面卡顿或停滞。


  同步（Synchronous）是指代码的执行按照顺序依次进行，每个操作必须在前一个操作完成之后才能继续执行。同步操作会阻塞其他代码的执行，直到当前操作完成才能继续执行后续代码。


常见的异步操作

  在前端开发中，常见的异步操作包括：

  1. 发起网络请求：例如使用Ajax或Fetch API向服务器发送请求获取数据，异步地等待服务器响应。
  2. 定时器：例如使用setTimeout或setInterval函数，在指定的时间后执行相应的操作。
  3. 事件处理：例如点击按钮时触发的事件处理函数，可以异步地执行一些操作。

  异步操作的优势在于能够提升用户体验和页面性能。通过异步执行，可以避免阻塞页面渲染和用户交互，减少页面卡顿现象，同时能够更好地处理耗时的操作，例如网络请求和数据处理。


  然而，异步执行也需要注意处理异步操作的顺序和依赖关系，以避免出现意外结果或竞态条件。合理使用回调函数、Promise、async/await等机制可以简化异步代码的编写和管理，提高代码的可读性和维护性。


区别


 

  同步：代码按照顺序一行一行地执行，每个操作必须在前一个操作完成之后才能继续执行。

  异步：代码不按照顺序执行，某些操作会在后台执行，而程序会继续执行下面的代码。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 同步示例
console.log("开始");
console.log("中间");
console.log("结束");

// 输出结果：
// 开始
// 中间
// 结束

// 异步示例
console.log("开始");
setTimeout(function() {
  console.log("定时器回调");
}, 2000);
console.log("结束");

// 输出结果：
// 开始
// 结束
// 定时器回调（2秒后输出）

 

  同步：代码的执行会阻塞后续的操作，直到当前操作完成。

  异步：代码的执行不会阻塞后续的操作，后续操作会继续执行，无需等待当前操作完成。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 同步阻塞示例
console.log("开始");
for (let i = 0; i < 1000000000; i++) {
  // 模拟耗时操作
}
console.log("结束");

// 输出结果：
// 开始
// 结束

// 异步非阻塞示例
console.log("开始");
setTimeout(function() {
  console.log("定时器回调");
}, 0);
console.log("结束");

// 输出结果：
// 开始
// 结束
// 定时器回调（下一个事件循环输出）

 

  同步：没有回调机制，代码的执行是顺序进行的。

  异步：通常会使用回调函数来处理异步操作的结果或执行相应的操作。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 同步示例
function syncFunction() {
  console.log("同步函数");
  return 42;
}

console.log("开始");
const result = syncFunction();
console.log(result);
console.log("结束");

// 输出结果：
// 开始
// 同步函数
// 42
// 结束

// 异步示例
function asyncFunction(callback) {
  setTimeout(function() {
    console.log("异步函数");
    callback(42);
  }, 2000);
}

console.log("开始");
asyncFunction(function(result) {
  console.log(result);
});
console.log("结束");

// 输出结果：
// 开始
// 结束
// 异步函数（2秒后输出）
// 42（异步函数回调输出）

回调函数与回调地狱

回调函数与回调地狱

回调函数


  回调函数是指通过将一个函数作为参数传递给另一个函数，并在特定事件发生或条件满足时被调用执行的函数。


  回调函数主要用于以下情况：


  当需要进行耗时的操作，比如网络请求、文件读取等时，可以使用回调函数来处理异步操作的结果。例如，在JavaScript中，可以将回调函数传递给setTimeout函数，在指定的时间后执行回调函数。

1
2
3
setTimeout(function() {
  console.log("这是一个回调函数");
}, 1000);

  在事件驱动的编程中，可以使用回调函数来处理特定事件的逻辑。例如，在图形用户界面（GUI）应用程序中，可以将回调函数注册到按钮点击事件上，在按钮被点击时执行相应的逻辑。

1
button.on_click(callback_function)

  通过将回调函数作为参数传递给其他函数，可以实现根据需求定制函数的行为。例如，在排序算法中，可以传递一个比较函数作为回调函数，来决定元素之间的比较规则。

1
2
numbers = [3, 1, 2, 5, 4]
numbers.sort(callback_function)

  当有多个异步操作需要按特定顺序执行时，也会使用回调函数。每个异步操作的回调函数中包含下一个异步操作的调用，形成了回调地狱的结构。例如，在Node.js中进行数据库查询操作时，可以使用回调函数来处理查询结果。

1
2
3
4
5
6
7
db.query('SELECT * FROM users WHERE role="admin"', function(err, result) {
  if (err) throw err;
  
  processQueryResult(result, function() {
    // ...
  });
});

  总的来说，回调函数在处理异步操作、事件驱动、定制化行为等场景下非常有用。它允许我们在特定事件发生时执行自定义逻辑，提高代码的灵活性和可扩展性。



回调地狱


  回调地狱是指在多个异步操作依赖于之前异步操作的结果时，嵌套过多的回调函数导致代码难以理解和维护的情况。为了解决回调地狱问题，可以采用以下方法：


  Promise是一种用于管理异步操作的对象，它提供了更简洁的处理异步操作的方式。通过使用Promise，可以将回调函数转换为链式的Promise调用，减少回调函数的嵌套。例如，在JavaScript中，可以使用then方法和catch方法来处理异步操作。

1
2
3
4
5
6
7
8
9
10
db.query('SELECT * FROM users WHERE role="admin"')
  .then(function(result) {
    return processQueryResult(result);
  })
  .then(function() {
    // ...
  })
  .catch(function(err) {
    console.error(err);
  });

  Async/Await是ES2017引入的语法糖，用于更方便地处理异步操作。它基于Promise，并使用async和await关键字来编写更直观、可读性更高的异步代码。通过使用Async/Await，可以避免大量的回调函数嵌套。例如，在JavaScript中，可以使用await关键字在异步函数中等待一个Promise的结果。

1
2
3
4
5
6
7
8
9
10
11
async function processQuery() {
  try {
    const result = await db.query('SELECT * FROM users WHERE role="admin"');
    await processQueryResult(result);
    // ...
  } catch (err) {
    console.error(err);
  }
}

processQuery();

  有些语言、框架或第三方库提供了专门处理异步操作的工具，它们可以帮助简化和优化代码。例如，在Node.js中，可以使用异步流程控制库如async、bluebird等来处理复杂的异步操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
async.waterfall([
  function(callback) {
    db.query('SELECT * FROM users WHERE role="admin"', callback);
  },
  function(result, callback) {
    processQueryResult(result, callback);
  },
  function(result, callback) {
    // ...
  }
], function(err) {
  if (err) console.error(err);
});

  通过上述方法，可以有效地减少回调地狱的问题，使代码更加可读、易于维护，并提高开发效率。选择适合你编程语言和框架的方式来处理回调地狱，根据实际情况选择最佳的解决方案。


解构赋值与插值语法

解构赋值与插值语法

解构赋值

  解构赋值是一种用于从数组或对象中提取数据并将其赋值给变量的语法。它通过模式匹配的方式，按照特定的规则将值解构成独立的变量。解构赋值可以用于提取数组中的元素、对象中的属性，并支持嵌套和默认值等功能。它的主要作用是方便地获取和操作复杂的数据结构中的数据。


  在ES6之前，如果需要从多个层次嵌套的对象或数组中提取数据，通常需要写很多重复的代码，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 从对象中提取数据
const person = {
  name: 'Alice',
  age: 25,
  address: {
    city: 'Beijing',
    street: 'Dongcheng Road',
  },
};

const name = person.name;
const age = person.age;
const city = person.address.city;
const street = person.address.street;

console.log(name, age, city, street);  // 输出：Alice 25 Beijing Dongcheng Road

  在上面的例子中，我们需要使用多个赋值语句来提取person对象中的name、age、city和street属性，代码显得冗长和重复。


  使用解构赋值可以更好地处理这种情况，将提取数据和赋值合并到一个语句中，例如：

1
2
3
4
// 使用解构赋值从对象中提取数据
const { name, age, address: { city, street } } = person;

console.log(name, age, city, street);  // 输出：Alice 25 Beijing Dongcheng Road

  在上面的例子中，我们使用了解构赋值从person对象中提取了name、age、city和street属性，并将它们赋值给相应的变量。解构赋值的语法使用了花括号（{}）来标识需要提取的属性，其中冒号（:）可以用于指定新的变量名。


  除了从对象中提取数据，解构赋值还可以从数组中提取数据，并且可以同时从多个对象或数组中提取数据，例如：

1
2
3
4
5
6
// 使用解构赋值从数组中提取数据
const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first, second, rest);  // 输出：1 2 [3, 4, 5]

  在上面的例子中，我们使用了解构赋值从数组中提取了前两个元素，并将剩余的元素赋值给rest数组。使用省略号（…）可以获取剩余的元素并将它们放在一个新的数组中。


  总之，解构赋值是一种方便的语法，可以在JavaScript中从数组或对象中提取数据并将其赋值给变量。使用解构赋值可以更好地处理复杂的数据结构，使代码更加简洁和易读。


插值语法

  插值语法（或称为模板字符串）是一种用于动态生成字符串的语法。它允许在字符串中嵌入表达式或变量，并在最终生成的字符串中进行替换。插值语法可以提高字符串拼接的简洁性和可读性。


  在不同的编程语言和框架中，插值语法的具体语法和使用方式可能会有所不同。


  在JavaScript中，常见的插值语法是使用模板字符串（template literal）。模板字符串用反引号（）包裹，并且可以在字符串中通过${}`的形式嵌入变量或表达式。例如：

1
2
3
4
5
6
7
const name = 'Alice';
const age = 25;

// 使用插值语法
const message = `My name is ${name} and I'm ${age} years old.`;

console.log(message);  // 输出：My name is Alice and I'm 25 years old.

  在上面的例子中，我们使用了插值语法${}来在模板字符串中嵌入变量name和age。当模板字符串被解析时，${}中的表达式会被计算并替换为相应的值，最终生成最终的字符串。


  插值语法不仅限于变量的嵌入，还可以包含任意的JavaScript表达式。例如：

1
2
3
4
5
6
7
const x = 10;
const y = 5;

// 使用插值语法嵌入表达式
const result = `The sum of ${x} and ${y} is ${x + y}`;

console.log(result);  // 输出：The sum of 10 and 5 is 15

  在这个例子中，我们使用插值语法将表达式${x + y}嵌入到模板字符串中，计算出变量x和y的和，并生成最终的字符串。


  总之，插值语法是一种方便的字符串拼接方式，它使用特定的语法将变量或表达式嵌入到字符串中，使代码更易读、简洁和灵活。在不同的编程语言和框架中，插值语法的具体语法和用法可能会有所不同。


区别

    • 解构赋值用于从数组或对象中提取元素或属性并赋值给变量，方便操作数据

    • 插值语法用于在字符串中嵌入表达式或变量，方便构建复杂的字符串

    • 解构赋值使用方括号 [] 或花括号 {} 进行解构

    • 插值语法使用反引号 `` 进行字符串的声明

    • 解构赋值适用于任意复杂度的数据类型，并可以进行嵌套解构

    • 插值语法适用于字符串构建，能够进行简单的表达式求值


总结


    • 用于将数组或对象中的元素或属性解构出来赋值给变量

    • 适用于提取数据并赋值给变量

    • 使用方括号 [] 或花括号 {}

    • 可以实现嵌套解构，提取更复杂的数据结构


    • 在字符串中嵌入变量或表达式

    • 适用于构建字符串

    • 使用反引号 ``

    • 简单地在字符串中嵌入表达式


命令式编程与反应性编程

命令式编程与反应性编程

命令式编程

  命令式编程（Imperative Programming）是一种编程范式，它通过明确地指定计算机要执行的操作步骤来描述程序的控制流程。在命令式编程中，程序员需要按照顺序编写代码，显式地指定每一步的执行过程和控制逻辑。常见的命令式编程语言包括C、Java、Python等。


反应性编程

  反应性编程（Reactive Programming）是一种编程范式，它关注数据流和变化传播。在反应性编程中，程序被建模为一组组件，这些组件之间通过定义数据流和数据依赖关系来相互交互。当数据流中的某个值发生变化时，该变化会自动传播到受影响的组件，触发相应的操作或更新。反应性编程对异步和事件驱动的处理具有很好的支持，能够更好地应对实时性要求高的系统。


区别

命令式编程

  当使用命令式编程时，程序员需要明确地指定代码的执行顺序和操作步骤，例如以下JavaScript代码：

1
2
3
4
5
// 命令式编程示例
let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

  在上述代码中，我们使用了for循环来遍历arr数组中的元素，并将它们打印到控制台上。程序员需要明确地指定循环的终止条件、每次迭代的操作等。这种方式比较适合处理简单的有序数据集合。


反应性编程

  而当使用反应性编程时，我们可以定义数据流和数据依赖关系，让数据的变化自动传播并触发相应的操作。例如以下JavaScript代码：

1
2
3
// 反应性编程示例
const source = Rx.Observable.fromEvent(document.querySelector('button'), 'click');
source.subscribe(() => console.log('Clicked!'));

  在上述代码中，我们使用RxJS库中的Observable类，通过fromEvent()方法来创建一个Observable对象，监听document中button元素的点击事件。当用户点击按钮时，Observable对象会发出一个事件，将其作为数据流自动传播到相关的组件，触发相应的操作（在这里，我们将“Clicked!”打印到控制台）。这种方式更加适合处理复杂的交互逻辑和需求实时响应的场景。


总结

  在命令式编程中，程序的控制流由程序员显式地指定，通过顺序执行代码来实现。而反应性编程中，控制流由数据流和事件驱动来决定，数据的变化会自动触发相应的操作。

  在命令式编程中，程序员需要编写显式的代码来处理数据的每一步操作，包括状态管理、循环等。而在反应性编程中，程序员通过定义数据流和数据依赖关系，数据的变化会自动传播到相关的组件。

  反应性编程更加注重异步和事件驱动的处理方式，能够更好地应对实时性要求高、需要处理大量并发事件的场景。而命令式编程在处理异步操作时通常需要显式地使用回调函数或者使用线程等机制。

  反应性编程鼓励以数据流和事件为中心的思维方式，更加关注系统的响应性能力，能够更好地处理复杂的交互逻辑和实时数据的变化。


  需要注意的是，命令式编程和反应性编程并不是完全独立的概念，它们可以在同一个应用中共存。例如，可以使用命令式编程语言编写应用的业务逻辑，同时使用反应性编程框架来处理事件驱动和异步操作。


固定式布局与响应式布局

固定式布局与响应式布局

  固定式布局（Fixed Layout）和响应式布局（Responsive Layout）是网页设计中常用的两种布局方式，它们在页面元素的排列和适应不同屏幕尺寸的方式上有所不同。


固定式布局

  • 固定式布局是指在设计网页时，使用固定的像素单位来定义页面元素的尺寸和位置。
  • 页面元素的尺寸、宽度、高度等都使用具体的像素值进行定义，不随浏览器窗口或设备屏幕尺寸的改变而自适应调整。
  • 当用户在不同屏幕尺寸的设备上访问网页时，如果网页使用固定式布局，可能会导致页面内容无法完全显示或者需要通过滚动条进行查看。

响应式布局

  • 响应式布局是指在设计网页时，使用相对单位（如百分比、em、rem等）以及媒体查询（media queries）来定义页面元素的尺寸和位置。
  • 页面元素的宽度、高度等使用相对单位进行定义，使得它们能够根据浏览器窗口或设备屏幕的尺寸发生变化而自动调整大小。
  • 通过使用媒体查询，可以针对不同的屏幕尺寸应用不同的样式和布局，以提供更好的用户体验。
  • 响应式布局可以使网页在不同的设备上显示良好，无需用户手动调整或使用滚动条。

区别

  固定式布局不具备适应不同屏幕尺寸的能力，而响应式布局可以根据屏幕尺寸自动调整。

  固定式布局使用像素单位进行定义，而响应式布局使用相对单位进行定义。

  固定式布局的尺寸是固定的，无法灵活调整；响应式布局具有灵活性，可以根据屏幕尺寸变化进行适应。

  固定式布局可能导致内容在某些设备上被裁剪或需要使用滚动条浏览，而响应式布局可以提供更好的用户体验，使内容在不同设备上自然适应。


总结

  当一个网页使用固定式布局时，网页中的各个元素（如导航栏、图片、文本块等）都是用像素单位进行定义，例如，导航栏的宽度为1000像素，内容区域的宽度为960像素，在大屏幕上显示良好，但如果用户在小屏幕（如手机屏幕）上访问此页面，可能需要使用水平滚动条才能查看所有内容，用户体验不佳。

  相反，当一个网页使用响应式布局时，可以根据不同的屏幕尺寸提供不同的样式和布局。例如，在大屏幕上，导航栏可以水平排列，而在小屏幕上，导航栏可以折叠到一个菜单按钮中，使得页面更易于浏览。

  另外，在响应式布局中，可以使用相对单位（如百分比、em、rem等）来定义元素的大小和位置，例如，可以使用width: 100%指定一个元素的宽度，使其充满整个容器。这样，当容器的大小变化时，元素也会自动调整大小，以适应其父容器的尺寸。


闭包

闭包

概念

  在前端开发中，闭包（Closure）是指函数和它所引用的外部变量的组合。闭包通过将函数内部的变量和作用域链保存起来，使得函数能够访问和操作外部的变量，即使在函数被调用后外部变量的作用域已经结束。当一个函数内部定义了另一个函数，并且内部函数引用了外部函数的变量时，就形成了闭包。具体来说，闭包是由以下两个要素组成：


  在闭包中，通常有一个具名或匿名函数定义。

  函数内部引用的外部变量形成了闭包的环境，这些外部变量包括函数声明时所在的作用域内的变量、函数参数或任何外部函数的变量。


特点

  闭包使得函数可以保留对定义时作用域内变量的引用，即使这些变量在函数调用后已经离开了作用域，也不会被垃圾回收机制回收。

  闭包允许函数访问和操作其外部作用域中的变量，即使函数被调用时外部作用域已经销毁。

  由于闭包保留了外部变量的引用，因此这些变量的生命周期可能会比平常情况更长，可能会导致内存占用过多的问题。


应用场景

  通过闭包，可以实现模块化开发，将一些私有信息隐藏起来，同时提供公共接口进行访问。

  利用闭包可以在函数外部缓存数据，避免重复计算的开销。

  闭包可以用来保存函数的状态，在异步操作中保持某些值的稳定性。


  需要注意的是，闭包的不当使用可能会导致内存泄漏问题，因为被引用的外部变量无法被垃圾回收。因此，在使用闭包时需要注意合理管理内存，并避免创建不必要的闭包。


代码示例

1
2
3
4
5
6
7
8
9
10
11
12
function outerFunction() {
  var outerVariable = 'I am outside!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

var closure = outerFunction(); // 调用outerFunction并将返回的innerFunction赋值给变量closure
closure(); // 输出: I am outside!

  在这个例子中，outerFunction 是外部函数，它定义了一个变量 outerVariable 和一个内部函数 innerFunction。内部函数 innerFunction 引用了外部函数 outerFunction 的变量 outerVariable。当我们调用 outerFunction 并将其返回的 innerFunction 存储在变量 closure 中时，innerFunction 成为了一个闭包，它保留了对外部函数变量 outerVariable 的引用。


  随后，我们通过调用 closure() 执行了闭包 innerFunction，它打印出了保留的外部变量 outerVariable 的值 “I am outside!”。


  这个例子展示了闭包的基本概念。innerFunction 在函数定义时捕获了外部作用域中的变量 outerVariable，即使 outerFunction 已经执行结束，但闭包 innerFunction 仍然可以访问和使用 outerVariable 的值。这种能力使得闭包在许多情况下很有用，比如封装私有变量和创建特定状态的函数等。