东莞市国外网站建设平台,长春免费网站建站模板,订单插件 wordpress,无锡网站制作推广公司Gulp
gulp是前端开发过程中一种基于流的代码构建工具#xff0c;是自动化项目的构建利器;它不仅能对网站资源进行优化#xff0c;而且在开发过程中很多重复的任务能够使用正确的工具自动完成 Gulp的核心概念:流
流#xff0c;简单来说就是建立在面向对象基础上的一种抽象的…Gulp
gulp是前端开发过程中一种基于流的代码构建工具是自动化项目的构建利器;它不仅能对网站资源进行优化而且在开发过程中很多重复的任务能够使用正确的工具自动完成 Gulp的核心概念:流
流简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中定义了一些处理数据的基本操作如读取数据写入数据等程序员是对流进行所有操作的,而不用关心流的另一头数据的真正流向
gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作Gulp的特点:
易于使用:通过代码优于配置的策略gulp让简单的任务简单复杂的任务可管理。构建快速利用Node.js 流的威力你可以快速构建项目并减少频繁的IO操作。易于学习通过最少的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
允许你声明一个作用域被限制在块级中的变量、语句或者表达式。let绑定不受变量提升的约束这意味着let声明不会被提升到当前该变量处于从块开始到初始化处理的“暂存死区”
var
·声明变量的作用域限制在其声明位置的上下文中而非声明变量总是全局的由于变量声明(以及其他声明)总是在任意代码执行之前处理的所以在代码中的任意位置声明变量总是等效于在代码开头声明
const
声明创建一个值的只读引用(即指针)基本数据当值发生改变时那么其对应的指针也将发生改变故造成const申明基本数据类型时”再将其值改变时将会造成报错例如const a 3 ;a 5 时将会报错但是如果是复合类型时如果只改变复合类型的其中某个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);
优点
高效requestAnimationFrame 由浏览器进行优化以确保动画的平滑性和性能。自动时间间隔你不需要自己设置时间间隔如使用 setTimeout 或 setInterval浏览器会基于屏幕刷新率来调用你的回调函数。节省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(); 获取页面所有checkbox 怎样添加、移除、移动、复制、创建和查找节点
在JavaScript中操作DOM文档对象模型是常见的任务包括添加、移除、移动、复制、创建和查找节点。以下是一些基本的示例说明如何执行这些操作
1. 创建节点
要创建一个新的DOM节点你可以使用document.createElement()方法。
// 创建一个新的div元素
var newDiv document.createElement(div); // 设置其一些属性
newDiv.id newDivId;
newDiv.className newDivClass;
newDiv.textContent 这是一个新的div; // 将新创建的元素添加到body中
document.body.appendChild(newDiv);
2. 查找节点
查找DOM节点可以使用多种方法如getElementById()getElementsByClassName(), getElementsByTagName(), querySelector(), querySelectorAll()等
// 通过ID查找
var elementById document.getElementById(someElementId); // 通过类名查找返回HTMLCollection
var elementsByClass document.getElementsByClassName(someClass); // 通过标签名查找返回HTMLCollection
var elementsByTagName document.getElementsByTagName(p); // 使用querySelector查找第一个匹配的元素
var firstElement document.querySelector(.someClass); // 使用querySelectorAll查找所有匹配的元素返回NodeList
var allElements document.querySelectorAll(.someClass);
3. 添加节点
将新节点添加到DOM中可以使用appendChild()或insertBefore()。
// 将新节点添加到body的末尾
document.body.appendChild(newDiv); // 将新节点添加到某个特定元素之前
var referenceNode document.getElementById(someElementId);
document.body.insertBefore(newDiv, referenceNode);
4. 移除节点
使用removeChild()方法可以从DOM中移除一个节点。
var elementToRemove document.getElementById(someElementIdToRemove);
if (elementToRemove elementToRemove.parentNode) { elementToRemove.parentNode.removeChild(elementToRemove);
}
5. 移动节点
移动节点实际上是一个先移除再添加的过程。首先使用removeChild()从当前位置移除节点然后使用appendChild()或insertBefore()将其添加到新位置。
6. 复制节点
使用cloneNode()方法可以复制一个节点。这个方法接受一个布尔值作为参数指定是否进行深复制复制节点及其所有子节点。
// 浅复制只复制节点本身
var clonedNode elementById.cloneNode(false); // 深复制复制节点及其所有子节点
var clonedNodeDeep elementById.cloneNode(true); // 然后你可以将复制的节点添加到DOM中的某个位置
document.body.appendChild(clonedNodeDeep);
正则表达式 正则表达式-CSDN博客 Javascript中callee与caller的作用
caller是返回一个对函数的引用该函数调用了当前函数;callee是返回正在被执行的function函数也就是所指定的function对象的正文
在JavaScript中callee和caller是两个非标准的、但曾经在早期JavaScript版本中广泛使用的属性它们分别用于函数内部引用当前执行的函数和调用当前函数的外部函数。然而值得注意的是由于它们带来的混淆和潜在的性能问题现代JavaScript开发中通常不推荐使用这两个属性并且在严格模式strict mode下这两个属性是不可用的。
callee
callee属性是arguments对象的一个属性它指向当前正在执行的函数本身。这在编写递归函数时特别有用因为你可以直接使用arguments.callee来引用函数自身而不需要在函数体内显式地引用函数名。然而这种做法可能会导致代码难以理解和维护因为它隐藏了函数的实际名称。
function factorial(n) { if (n 1) { return 1; } else { return n * arguments.callee(n - 1); }
}
现代JavaScript中更推荐使用函数名来引用自身或者使用箭头函数来避免this和arguments的混淆。
caller
caller属性是一个函数对象的属性它指向调用当前函数的函数。这在你需要知道是哪个函数调用了当前函数时非常有用。然而与callee一样caller属性也带来了代码可读性和维护性的挑战并且在严格模式下是不可用的。
function outerFunction() { innerFunction();
} function innerFunction() { console.log(innerFunction.caller); // 指向outerFunction
} outerFunction();
替代方案
递归函数对于递归函数直接使用函数名而不是arguments.callee。调试和日志记录对于需要知道调用栈的情况考虑使用现代浏览器的开发者工具或者利用Error对象的堆栈跟踪尽管这可能会因浏览器而异且不是跨平台的解决方案。设计模式考虑使用设计模式如事件监听器、回调函数等来管理函数间的依赖和调用关系而不是依赖caller属性。
