- 博客(169)
- 收藏
- 关注
RSS订阅原创 Curl 使用教程：从基础到进阶
curl是一款功能丰富、灵活且强大的命令行工具，通过掌握其各种参数和用法，可以在网络开发、测试以及日常的网络操作中发挥重要作用。无论是简单的网页获取，还是复杂的文件传输和 API 交互，curl都能提供高效便捷的解决方案。不断实践和探索curl的更多功能，将有助于您更好地理解和处理网络请求与响应，提升您在网络技术领域的技能水平。希望本教程能够为您提供一个全面的curl使用指南，让您能够快速上手并熟练运用这个强大的工具。如果您有任何进一步的问题或需要更多的示例，欢迎查阅curl。
2024-12-25 09:28:57
1164
原创 利用 Vue 组合式 API 与 requestAnimationFrame 优化大量元素渲染
本文介绍了在Vue项目中利用``语法糖与`requestAnimationFrame`优化大量元素渲染的方法。先是深入解析了自定义`useDefer`组合式函数的各部分逻辑，包括变量定义、动画帧更新、组件卸载清理及元素渲染控制等，接着展示其在组件中的使用方式，最后总结该方法有效解决性能问题，并提出进一步优化思路，旨在为Vue开发者处理此类问题提供思路与方案。
2024-11-26 21:16:19
1197
2
原创 JavaScript 跨标签页通讯全解析
在 JavaScript 跨标签页通讯中，不同的方法适用于不同的场景。对于同源简单通讯，和可以快速满足需求；当涉及跨域时，是可靠的选择；而对于高性能、复杂数据处理和频繁交互的场景，则更具优势。在实际应用中，需要根据项目的具体需求、数据量、通讯频率以及是否跨域等因素综合考虑选择合适的跨标签页通讯方式。同时，无论使用哪种方法，都要注重安全性，对消息来源进行严格验证，防止恶意数据的注入和滥用，以确保用户数据安全和应用程序的稳定运行。
2024-11-26 10:48:39
971
原创 深入理解 JavaScript 中的 AbortController
是 JavaScript 中的一个内置对象，它提供了一种简洁而有效的方式来取消一个或多个异步操作。实例本身和与之关联的。实例拥有一个abort方法，当调用这个方法时，会触发与该控制器关联的所有异步操作的取消。而则是一个特殊的对象，它可以被传递给各种异步操作函数，用于监听取消信号。例如，在fetchAPI 中，我们可以将传递给fetch请求，以便在需要时能够取消该请求。
2024-11-26 10:36:23
1329
转载 this详解
一、方法调用模式当函数被保存为一个对象的属性时，它就可称为这个对象的方法。当一个方法被调用时，this被绑定到这个对象上。如果调用表达式包含一个提取属性的动作（. 或 []），那么它被称为方法调用。例如：var name = "window";var obj = { name: "obj", getName: function(){ alert(this.name); }}obj.getName(); //"obj" getName函数作为对象obj的方法调用，所以
2022-03-13 18:55:48
529
原创 watch对数据的监测
computed: { // 使用计算属性将对象转换为单个变量（数据检测方式二） username() { return this.obj.username; }},watch: { // 对单个属性进行检测 'obj.username': { handler(newName, oldName) { console.log(newName, oldName); }, deep: true }, // 方式二：使用计算属性返回的参.
2022-03-11 19:10:20
393
原创 组件之间传值使用方法
props/$emit父组件传子组件子组件export default { name: "Component2", props: { username: { type: String, default: '' } },}父组件<component2 :username="username"></component2>子组件传父组件子组件methods: { update() { t
2022-03-11 18:47:29
309
原创 new操作符具体做了什么
1．创建了一个空的对象function Foo() {}console.log(new Foo())2．将空对象的原型，指向于构造函数的原型function Foo() {}console.log(Foo.prototype == new Foo().__proto__)3．将空对象作为构造函数的上下文(改变this指向)function Foo() { console.log(this) this.name = "张三";}cons.
2022-03-03 20:24:35
155
原创 JavaScript深浅拷贝
对象类型在赋值的过程中其实是复制了地址，从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个情况。let a = { age: 1}let b = aa.age = 2console.log(b.age) // 2浅拷贝首先可以通过Object.assign来解决这个问题，很多人认为这个函数是用来深拷贝的。其实并不是，Object.assign只会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址，所以并不...
2022-03-02 11:36:55
259
原创 原生jsajax请求有几个步骤
创建XMLHttpRequest对象， 也就是创建一个异步调用对象. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 设置响应HTTP请求状态变化的函数. 发送HTTP请求. 获取异步调用返回的数据. 使用JavaScript和DOM实现局部刷新....
2022-03-01 19:53:41
483
原创 JavaScript判断变量是不是数组
let a = [1, 2, 3];// 方法一：Array.isArray()console.log(Array.isArray(a));// 方法二：Array.prototype.isPrototypeOf()console.log(Array.prototype.isPrototypeOf(a));// 方法三：constructorconsole.log(a.constructor.toString().indexOf('Array'));// 方法四：Object.pro.
2022-03-01 15:08:12
437
原创 包装对象的使用
对象是 JavaScript 语言最主要的数据类型，三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”（wrapper）。所谓“包装对象”，指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。function mySplit(str, method, arg) { let obj = new String(str); return o
2022-02-28 17:17:37
245
原创 this的指向问题
// 直接调用function fn1() { console.log(this);}fn1(); // 指向的是window// 使用对象调用let fn2 = { name: '张三', getName: function () { console.log(this.name); }}fn2.getName();// 使用原型调用function fn3(name) { this.name = name;}fn3..
2022-02-28 17:15:02
142
原创 JavaScript常用数组
let list = [10, 20, 30, 40, 50, 40, 30, 20, 10, 11];// 又返回值let newList1 = list.map((item) => { if (item > 10) return item; return "";})console.log(newList1); // ['', 20, 30, 40, 50, 40, 30, 20, '', 11]// 无返回值（所循环到的元素、下标、遍历的数组）list.for.
2022-02-27 23:05:14
480
原创 v-model原理
<input placeholder="请输入名字" id="username">显示值：<p id="uName"></p>let obj = {};Object.defineProperty(obj, 'username', { get() { console.log("取值") }, set(v) { console.log("设置值") document.querySelector(.
2022-02-17 22:03:56
235
原创 数组与对象的解构
数组// ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构let [a, b, c] = [1, 2, 3]; // a:1 b:2 c:3// 这种写法属于'模式匹配',只要等号两边的模式相同,左边的变量就会被赋予对应的值let [aa, [[bb], cc]] = [1, [[2], 3]]; // aa:1 bb:2 cc:3let [, , z] = [1, 2, 3]; // z:3let [x, ...y] = [1, 2, 3, 4]; // x=1
2022-02-16 22:23:39
1092
原创 数组去重ES5和ES6
ES5let arr = [12, 13, 14, 12, 15, 14];let newArr = []for (let i = 0; i < arr.length; i++) { var current = arr[i]; if (newArr.indexOf(current) === -1) { newArr.push(current) }}console.log(newArr);ES6let arr = [12, 13, 14,
2022-02-15 23:39:36
159
原创 const、let、var的知识
var声明提升console.log(num); // undefinedvar num = 123;变量覆盖var num1 = 12;var num1 = 13;console.log(num1); // 13没有块级作用域function fn() { for (var i = 0; i < 3; i++) { console.log(i); } console.log(i);}fn();const1.co
2022-02-15 23:11:38
164
原创 递归求和1-100
function add(num1, num2) { let num = num1 + num2; if (num2 + 1 > 100) { return num; } else { return add(num, num2 + 1); }}let sum = add(1, 2);console.log(sum); // 5050
2022-02-15 22:13:41
641
原创 foreach()与map()
foreach1.forEach没有返回值2.forEach不能用break打断3.遍历的是value值let arr = ['a', 'b', 'c'];arr.forEach((e) => { console.log(e);})map1.map有返回值（数组）默认return是undefined2.接收的参数是一个参数（key，value）3.不能用break打断let arr = ['a', 'b', 'c'];let map = arr.map
2022-02-15 22:07:52
320
原创 JavaScript原型
原型链从当前实例属性去查找，如果找了就返回，否则顺着原型链一层一层往上面找 直到找到null为止，如果找到null都没有找到，报错function Person() {}Person.prototype.name = "张三";Person.prototype.age = 18;Person.prototype.getName = function () { console.dir(this.name)}let person = new Person();person.
2022-02-15 22:05:35
93
原创 过滤filter
let a = [1, 2, 3, 4, 10, 14, 15];// 1.current => 当前值 2.index => 当前的下标 3.array => 这个数组的对象let b = a.filter((current, index, array) => { console.log("current:", current) // 当前循环到的值 console.log("index:", index) // 循环到的下标 console.log(.
2022-02-14 23:13:21
168
原创 null和undefined
undefined1.声明，为赋值let o;console.log(o); // undefined2.对象某个属性不存在let obj = {}console.log(obj.a); // undefined3.少了参数function fn(a, b) { console.log(a, b); // 4 undefined}fn(4);4.方法的默认返回值function abcd() { console.log("111")}c
2022-02-14 23:11:42
225
原创 防抖与节流
防抖HTML代码部分<input class="inp" placeholder="输入字符">JavaScript代码部分<script> // 防抖 // 多次操作变成一次 let inp = document.querySelector(".inp"); inp.addEventListener('input', antiShake(demo, 2000)) function antiShake(fn, wait)
2022-02-11 00:28:42
253
原创 Vue3中setup调用生命周期钩子函数
介绍如果要在setup方法中调用组件生命周期钩子函数:在原来的生命周期钩子函数名称前加on关键字,并且需要保持小驼峰的命名方式。语法import {onMounted, onUpdated} from 'vue'export default { name: "Lifecycle", setup() { onMounted(() => { console.log("组件视图挂载完成") }); onUpdated(() => {
2022-01-08 19:53:04
4445
原创 Vue3的watch与computed
watch介绍通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据，只要返回的结果没有发生变化, 那么计算属性就只会被执行一次。Vue3写法setup() { const name = ref('漩涡鸣人'); const {username, password} = toRefs(reactive({ username: '宇智波带土', password: 'zs1262597806' })) watch
2022-01-08 12:22:23
1284
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人