- 博客(18)
- 收藏
- 关注
RSS订阅原创 hash模式和history模式的区别
hash： 带 "# " 参数在 "？" 之后通过 "&" 拼接。例：https://xxx.com/#/playlist?id=21982373 history: 没有 " # " ,参数在路径中。例：https://xxx.com/playlist/21839210hash模式是基于锚点和 onhashchange 事件实现的，将锚点的值作为路由地址，当地址发生变化时触发onhashchange事件，根据路径决定页面上呈现的内容。因为向服务器发送请求不会带#后面的内容，因此修改#后面的内容不会触发浏览
2022-07-11 21:49:58
1411
原创 vue3自定义指令实现Collapse
元素隐藏的方式有以下几种1、overflow:hidden防止溢出，也是一种隐藏，只不过是把超出范围的元素隐藏，这种一般用于文字过多或者图片特效以及自适应中div没法设置高度时使用2.display:none设置元素的display为none是最常用的隐藏元素的方法。.hide { display:none;}这就是完全的隐藏了，直接消失，任何对该元素直接的用户交互操作都不可能生效，被隐藏的元素完全不会占用空间，仿佛元素完全不存在一样。3、opacity:0opa...
2022-05-18 11:06:03
1159
原创 reactive、ref、toRef、toRefs
reactive和ref1.reactive接收的数据类型：对象类型使用:const data1 = reactive({ value: "1", name: "2"})data1.value // 使用结果:作用：把参数加工成一个代理对象（proxy对象）原理：基于Es6的Proxy实现，通过代理操作源对象，相比于ref定义的浅层次响应式数据对象，reactive定义的是更深层次的响应式数据对象。const data1 = reactive({ valu
2022-04-02 17:49:50
999
1
原创 组件库搭建（一）
第一步：使用vue脚手架初始化项目第二步：创建package文件夹，我们之后写的自定义组件就放在package下，并且提供一个统一的入口。第三步：编写组件库入口文件的代码。根据使用element-ui的经验，组件的引入有两种方式一、在main.js中导入组件库,并且使用Vue.use()方法将组件挂载在全局对象上。import ElementUI from "element-ui";Vue.use(ElementUI);vue.use方法会调用install方法（这个方法的第一
2022-04-01 16:21:55
996
原创 无法在“节点”上执行“insertBefore”：要插入新节点的节点不是该节点的子节点 react
无法在“节点”上执行“insertBefore”：要插入新节点的节点不是该节点的子节点。错误原因：Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.在使用 React 16 的页面上使用 Google 翻译时，当呈现的内容发生更改时，特定的代码模式会产生 Javascript 错误 ( )。解决办法：在head标签中加上问题解决 <met.
2022-03-19 21:13:04
10173
原创 迭代器模式（设计模式）
定义迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。例如jquery中的$.each函数。迭代器的分类迭代器可以分为内部迭代器和外部迭代器。内部迭代器内部迭代器的特点是内部已经定义好了迭代规则，完全接手整个迭代过程，外部只需要一次初始调用。如下的each函数就是内部迭代器。var each = function (ary, callback) { for (var i = 0, l = ary.length; i < l;
2022-03-18 17:57:17
141
原创 策略模式【设计模式】
以下是一个计算奖金的函数，该函数需要接受两个参数，员工的工资数额和绩效等级。var calcBonus = function (performanceLevel, salary) { if (performanceLevel === "S") { return salary * 4; } if (performanceLevel === "A") { return salary * 3; } if (performanceLevel === "B") { r
2022-03-11 16:05:39
139
原创 单例及单例的实现【设计模式】
单例的定义保证一个类只有一个实例，并且提供一个访问他的全局访问点。例如：当我们点击登录按钮的时候页面会出现一个登录浮窗，而这个登录浮窗是唯一的，不管用户点击多少次登录按钮，这个浮窗只会被创建一个，这个登录浮窗就很适合使用单例模式来创建。单例的用途实现线程池、全局缓存、浏览器的window对象。实际上vuex就是基于单例的思想实现的。惰性单例指的是在需要的时候才创建对象实例。而不是在页面加载好的时候才创建。例如上述例子中我们说到的登录弹窗，可能有些用户访问页面只是想浏览一下，并不需
2022-03-10 17:47:44
287
原创 闭包的作用
闭包的用途有很多（实现继承、对象的私有属性、缓存结果、实现面向对象设计、实现命令模式）。但是他的作用主要有两个，一个是延长局部变量的寿命。另一个是使外部能够访问到函数内部的变量。我们先从两个例子来看一个闭包的使用场景。示例一：利用闭包缓存计算结果假设有一个计算乘积的简单函数，可以接受一些Number类型的参数，并返回这些参数的乘积。但是我们觉得对于相同的参数，每次计算都是一种浪费，我们就可以通过缓存机制来提高这个函数的性能。var cache = {}var mult = functi
2022-02-25 15:07:15
3109
原创 什么是闭包？
在了解闭包之前我们首先需要了解两个概念，一个是变量作用域，一个是变量的生存周期。变量的作用域变量的作用域就是指变量的有效范围。我们使用var let const在函数体内部声明的变量是局部变量，只有在函数内部才能访问到。在js中，当在函数中搜索一个变量时，如果函数体内没有声明该变量，那么此次搜索的过程会随着代码执行环境创建的作用域链往外逐层搜索，直到找到全局对象为止。var a=1var func1 = function(){ var b = 2 var func2 = functi
2022-02-24 17:42:56
388
1
原创 call和apply的区别和用法
call和apply的区别ECAMScript3给Function的原型定义了两个方法，分别是Function.prototype.call和Function.prototype.apply，他们的作用一模一样，区别仅在于传参方式不同。apply接收两个参数第一个参数指定函数体内this对象的指向，第二个参数是数组或者类数组(例如arguments)，是传入被调用函数的参数列表。var func = function(a, b, c) { alert([a,b,c]) // 输出[1,
2022-02-23 17:59:32
1333
1
原创 this的指向问题
js的this总是指向一个对象，但是具体指向的是哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的对象。除去特殊的with和eval的情况，具体可以分为以下四种：1.作为对象的方法调用作为对象的方法被调用时，this指向该对象var obj={ a:1, getA:function(){ alert(this == obj); // true alert(this.a) // 1 }}obj.getA()2.作为普通函数调用作为普通
2022-02-21 16:37:33
315
原创 js数据类型和判别方式
JS的数据类型JS的基本数据类型：Undefined、Null、Boolean、Number、StringUndefined类型只有一个值，即特殊的undefined，声明变量但是没有初始化，这个变量的值就是undefined Null类型只有一个值null，表示一个空对象指针，正式使用typeof操作符检测null会返回object Boolean有两个字面值：true和false Number:用来表示整数和浮点数，还有一种特殊的值即NaN,这个数值用来表示一个本来要返回数值的操作数未返回
2022-02-21 14:33:16
106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人