Gulp

• gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器;它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成

• Gulp的核心概念:流

1. 流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如读取数据，写入数据等，程序员是对流进行所有操作的,而不用关心流的另一头数据的真正流向

• gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作
• Gulp的特点:

1. 易于使用:通过代码优于配置的策略，gulp让简单的任务简单，复杂的任务可管理。
2. 构建快速利用Node.js 流的威力，你可以快速构建项目并减少频繁的IO操作。
3. 易于学习通过最少的API，掌握 gulp毫不费力，构建工作尽在掌握:如同一系列流管道
    

Vue双向数据绑定

Vue核心基础-CSDN博客 

设计模式—观察者模式与发布订阅-CSDN博客

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过0bject.defineProperty( 来劫持各个属性的setter ,getter ,在数据变动时发布消息给订阅者，触发相应的监听回调
 

事件的各个阶段

在JavaScript中，事件处理是一个重要的概念，它允许开发者在用户与网页进行交互时执行代码。事件处理通常涉及到事件的各个阶段，这些阶段也被称为事件流（Event Flow）或事件传播（Event Propagation）。主要可以分为三个阶段：捕获阶段（Capturing Phase）、目标阶段（Target Phase，也称为事件处理阶段或冒泡前的激活阶段）、冒泡阶段（Bubbling Phase）。

1. 捕获阶段（Capturing Phase）

• 顺序：从文档的根节点（通常是document对象）开始，向下传播到目标元素。
• 特点：在捕获阶段，事件处理器会从最外层的节点开始触发，然后向事件的目标节点传播。这个阶段的目的是在事件到达目标节点之前，先给外层的元素机会来处理这个事件。
• 用途：捕获阶段通常用于事件在到达目标元素之前进行拦截处理，例如，阻止事件进一步传播或修改事件对象。

2. 目标阶段（Target Phase）

• 顺序：当事件到达目标元素时，会触发目标元素上的事件处理器。
• 特点：在这个阶段，事件处理器被绑定在目标元素上，即用户实际与之交互的元素。这通常是我们设置事件监听器的地方。
• 注意：技术上讲，目标阶段并不是事件传播的一个独立阶段，但它发生在捕获阶段和冒泡阶段之间，是事件处理器被目标元素实际调用的时刻。

3. 冒泡阶段（Bubbling Phase）

• 顺序：从目标元素开始，向上传播到文档的根节点。
• 特点：在冒泡阶段，事件会从目标元素开始，一直向上传播到DOM树的顶层。这个阶段的目的是允许事件在到达顶层之前，沿途的每个节点都有机会处理这个事件。
• 用途：冒泡阶段常用于在不特定知道哪个元素会被点击的情况下，处理事件。例如，点击了列表中的某个项，但你可能希望无论点击了哪个项，都能触发同一个事件处理器。

设置事件监听器时指定阶段

在JavaScript中，使用addEventListener方法添加事件监听器时，可以通过第三个参数来指定监听器是在捕获阶段还是冒泡阶段触发。如果省略这个参数，或者将其设置为false，则监听器会在冒泡阶段触发。如果设置为true，则监听器会在捕获阶段触发。

element.addEventListener('click', function(event) {  // 事件处理代码  
}, true); // 在捕获阶段触发  element.addEventListener('click', function(event) {  // 事件处理代码  
}, false); // 在冒泡阶段触发（默认）

let VS var VS const

• let

1. 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。
2. let绑定不受变量提升的约束，这意味着let声明不会被提升到当前
3. 该变量处于从块开始到初始化处理的“暂存死区”

• var

1. ·声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的
2. 由于变量声明(以及其他声明)总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明

• const

1. 声明创建一个值的只读引用(即指针)
2. 基本数据当值发生改变时，那么其对应的指针也将发生改变，故造成const申明基本数据类型时”再将其值改变时，将会造成报错，例如const a = 3 ;a = 5 时将会报错
3. 但是如果是复合类型时，如果只改变复合类型的其中某个Value 项时，将还是正常使用
    

快速让一个数组乱序

sort方法

const arr=[1,2,3,4,5,6];
arr.sort(function(a,b){return Math.random()-0.5;
})

Fisher-Yates洗牌算法

在JavaScript中，快速让一个数组乱序（即打乱数组元素的顺序）的一种常用方法是使用Fisher-Yates洗牌算法（也称为Knuth洗牌算法）。这种方法的基本思想是遍历数组元素，并在每一步中随机选择一个未处理的元素与当前元素交换位置。

以下是一个使用Fisher-Yates洗牌算法来打乱数组顺序的示例代码：

function shuffleArray(array) {  for (let i = array.length - 1; i > 0; i--) {  // 生成一个0到i的随机索引  const j = Math.floor(Math.random() * (i + 1));  // 交换array[i]和array[j]  [array[i], array[j]] = [array[j], array[i]];  }  return array;  
}  // 示例  
const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];  
console.log(shuffleArray(myArray));

 如何渲染几万条数据并不卡住界面

考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分DOM，那么就可以通过requestAnimationFrame来每16 ms刷新一次
 

requestAnimationFrame 是 Web API 的一部分，它用于在浏览器下一次重绘之前调用指定的函数来更新动画。这是一种高效的方式来创建平滑的动画，因为它允许浏览器优化和最小化重绘和重排，从而提供更好的性能和用户体验。

当你使用 requestAnimationFrame 时，你需要提供一个回调函数作为参数。浏览器会在这个函数准备好进行屏幕更新之前调用它。这个函数通常用于更新动画的当前状态，比如改变元素的位置或样式。

基本用法

function step(timestamp) {  // 更新动画状态  // 例如，改变元素的位置  // ...  // 如果需要继续动画，则再次调用 requestAnimationFrame  requestAnimationFrame(step);  
}  // 启动动画  
requestAnimationFrame(step);

优点

1. 高效：requestAnimationFrame 由浏览器进行优化，以确保动画的平滑性和性能。
2. 自动时间间隔：你不需要自己设置时间间隔（如使用 setTimeout 或 setInterval），浏览器会基于屏幕刷新率来调用你的回调函数。
3. 节省CPU：当标签页或窗口不在前台时，requestAnimationFrame 会自动暂停调用回调函数，从而节省CPU资源。

停止动画

要停止动画，你可以简单地不再调用 requestAnimationFrame。但是，如果你需要从一个特定的回调中停止动画（例如，基于某些条件），你可能需要将 requestAnimationFrame 的返回值（一个ID）保存起来，并使用 cancelAnimationFrame 来取消它。

let animationId = null;  function startAnimation() {  animationId = requestAnimationFrame(step);  
}  function stopAnimation() {  if (animationId) {  cancelAnimationFrame(animationId);  animationId = null;  }  
}  function step(timestamp) {  // ... 更新动画状态  // 根据需要决定是否继续动画  // requestAnimationFrame(step);  
}  // 启动和停止动画  
startAnimation();  
// ... 在某个时刻停止动画  
stopAnimation();