- 博客(119)
- 收藏
- 关注
RSS订阅原创 【问题场景】el-table表格结合el-pagination分页器使用时，全选框每次点击都是true，且没有出现对应的选中样式
el-table表格结合el-pagination分页器使用时，全选框每次点击都是true，且没有出现对应的选中样式。即全选功能异常！
2021-11-19 13:46:00
1244
原创 useEffct hook模拟生命周期
react中的函数式组件是一个纯函数，它没有自己的状态，也没有自己的生命周期的，因而需要借助hooks去实现更多的功能。1.模拟componentWillMount、componentWillUnmountfunction Demo() { useEffect(() => { // 相当于 componentDidMount console.log("我模拟了componentDidMount") return () =>
2021-10-28 08:46:34
862
2
原创 自定义浏览器滚动条scrollbar样式（IE、Firefox、webkit内核浏览器）
1 IE浏览器1.1 IE浏览器对滚动条的样式属性如下表：1.2 滚动条各样式图示：2webkit内核滚动条样式属性3FireFox浏览器——使用jquery插件插件：jquery-custom-content-scrollerhttp://manos.malihu.gr/jquery-custom-content-scroller/使用案例：<!doctype html><html><head><met...
2021-10-16 15:26:51
1207
原创 前端开发使用模拟数据的两个方式以及使用步骤：json-server和mock.js
作为前端开发人员，当后端还没有写好接口，但是我们又不想写静态的数据的话，可以使用模拟数据。1、json-server和mock.js简介 json-server:利用json-server，可以自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。还可以设置表连接。更详细的json-server:json-server - npmhttps://www.npmjs.com...
2021-10-14 21:56:44
3499
原创 常用的浏览器兼容问题，包含滚动条、获取事件对象、获取非行内样式、获取鼠标编码值、事件监听等
1、滚动条//1.滚动条到顶端的距离（滚动高度）var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//2.滚动条到左端的距离var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;2、获取非行内样式//获取非行内样式兼容 IE:currentStyle 标准：getC
2021-10-09 10:46:58
115
原创 lazyLoad:React中的组件懒加载案例及注意点
1. 什么叫懒加载？ 懒加载：随用随载。即在需要的时候才进行加载。2. 为什么要设置懒加载？ React和Vue都是单页面应用。 在单页应用中，如果没有设置懒加载，webpack打包后的文件就会很大；从而造成进入首页时，需要加载的资源过多，时间过长，不利于用户体验。 运用懒加载，就则可以将页面进行划分，在需要的时候加载对应的页面。可以有效的分担首页所承担的加载压力，减少首页加载用时。3. 案例演示注意点1： react是一种按需引入的机制...
2021-09-28 19:53:09
938
原创 windows10系统的mongodb超详细安装教程，包含mongoDB服务的安装、可视化工具MogonDB Compass的安装
简述 mongo是一个非关系型的数据库系统，只要安装了mongoDB服务就可以使用了。但是此时只能通过命令行窗口去操作数据库，所以我们可以安装一个可视化工具，类似于mysql数据库的navicat。 最后的效果图如下： 2.安装mongo服务（三步）第一步：下载mogon，进入官网，选择好版本后，点击左下角的Download下载。注意点1：注意是选中的On-premises注意点2：本教程的安装是压缩包方式的安装，不是镜像，所以选择package时选择zip...
2021-09-24 15:49:42
2173
1
原创 Vue内置指令：v-html、v-cloak
v-html的作用？向指定节点中渲染包含html结构的内容。 v-html与插值语法的区别？(1) v-html会替换掉节点中所有的内容，{{xx}}则不会。(2) v-html可以识别html结构。v-html的使用容易导致安全问题，慎用(1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。(2)一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！v-cloak的作用？v-cloak本质是一个特殊属性，Vue实例创...
2021-08-28 11:27:16
421
原创 手写闭包：闭包的作用、概念、写法案例
闭包闭包的作用：隐藏变量，避免全局污染；可以读取函数内部的变量。闭包的概念： 有一个A函数，在A函数内部返回一个B函数；在A函数外部有变量引用这个B函数；B函数内部访问着A函数内部的私有变量。(核心就是利用执行空间不销毁的原理)写法1：注意输出结果的不同 for(var i=0;i<10;i++){ ~function(){ setTimeout(()=>{ console.log(i);//10次10 获得执行次数
2021-08-21 14:02:48
489
原创 前端常用库-nanoid和UUID：用来生成唯一的id、key在react虚拟DOM中的作用，以react/vue中key为例子
1.key在react虚拟DOM中的作用简单来说，key是虚拟DOM对象的一个标识，在真实DOM的显示和更新中有着极其重要的作用。当状态中的数据发生变化时，react会根据变化后的新数据去生成新的虚拟DOM；然后，react会将新的虚拟DOM和旧的虚拟DOM进行diff比较；从而决定哪些虚拟DOM可以复用、哪些虚拟DOM需要进行更新；最后，需要更新的DOM转化为真实DOM，进行真实DOM的更新，渲染到页面。可以复用的DOM就继续使用原来的。2...
2021-08-19 17:42:13
2900
转载 ES6模块化的3种使用方式和对应的注意点
ES6之前javascrip没有模块化的概念，是ES6的新特性。本文主要介绍js模块化的使用。一、ES6模块化的第一种方式:1.1 使用方法导出数据：export {xxx};在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部其他模块中是无法获取的。如果你希望外部模块可以读取模块当中的内容，使用export来对其进行暴露（输出）。导入数据：import {xxx} from “path”; 如导入 -a.js文件1.2 注意点注意点1：..
2021-08-13 21:57:33
558
转载 通过call、apply、bind去改变函数的this指向以及this指向详解
一、this指向详解this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话不那么严谨，作为一般情况下是可以的）再加下面的补充，就完美啦：情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题(在严格版中的默认的this不再是window，而是undefined。)
2021-08-12 11:44:26
517
转载 React 中 refs 的作用是什么？
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回：class CustomForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return (
2021-08-12 09:11:47
973
原创 ES6展开运算符的使用（展开、合并数组，拷贝（copy）数组和对象）
1 展开数组let arr1 = [1,3,5,7]console.log(...arr1);//1 3 5 72 合并数组let arr1 = [1,3,5,7]let arr2 = [2,4,6,12]console.log(...arr1,...arr2,8,7);//1 3 5 7 2 4 6 12 8 73在函数中使用（用于计算输入的所有数字的总和）该方法适用于输入的参数数量不确定的情况。无需理会传入的参数有多少，只需要调用即可。function sum(..
2021-08-10 16:06:35
1545
4
转载 2021前端最新最全面试题（答案持续更新中）
这篇面试题文章很赞，转载是为想保存下来。文章链接：https://www.cnblogs.com/liandudu/p/14276948.html
2021-08-07 17:37:57
401
转载 深拷贝与浅拷贝的实现方案与应用场景
1 写在前面首先我们得清楚基本概念。拷贝（Copy）即复制。浅拷贝：创建一个新对象，保存原始对象属性值精准拷贝。如果属性是基本类型，拷贝的是基本类型的值，如果属性是引用类型，拷贝的是内存地址，并不会占用新的内存，这种情况下如果其中一个对象改变了这个地址，会影响到另一个对象。浅拷贝只复制指向某个对象的指针，而不复制对象本身。新旧对象共享同一块内存。深拷贝：将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，增加了内存，且修改新对象不会影响原对象。新对象与原对象不共享内存。
2021-08-06 11:27:22
2828
原创 移动端开发vw+rem布局，即等比缩放布局（什么是vw?如何设置根元素html的字体大小？如何换算vw单位？文末：移动端开发步骤详解链接）
1 什么是vw?vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。能够实现页面内的字体大小跟随视口的大小而改变。1vw 视口宽度的1%100vw 视口宽度的100%1vh 视口高度的1%100vh 视口高度的100%2为什么要将根元素html字体大小设置为100px？是为了方便计算。 我们都知道，根元素默认的字体大小是12px,即 html{...
2021-08-05 21:54:47
1236
原创 移动端vw+rem等比缩放布局开发的详细步骤：包含px与rem的单位换算、二倍图以及如何使用UI给的设计稿等（开发工具HBuilder）
1 单位换算公式：/ 2 /
2021-08-05 14:20:23
2403
转载 解决数组塌陷问题的两种方法
数组塌陷：操作数组的时候会使数组的索引发生变化，造成数组中的某项被跳过。例如：删除数组中的每一项.for (var i = 0; i < arr.length; i++) { arr.splice(i, 1) }1 . 每次执行i–for (var i = 0; i < arr.length; i++) { arr.splice(i, 1) i-- }/* i = 0 进入循环 把数组第 0 项干掉 arr = [2, 3, 4] lengt
2021-08-03 21:37:44
449
原创 数组去重的8种方法（Set、[...new Set(arr)] 、indexOf、splice、sort、Map数据结构、includes、利用对象属性不重复）
ES6 Set let arr = [1,2,3,4,5,5,5,5,4,9,9,'西柚','西柚',"草莓","草莓",undefined,undefined,null,null,NaN,NaN,{},{},0,0] func...
2021-08-03 21:32:20
1744
4
原创 prototype、__proto__、原型链是什么？原型链的访问原则？（文末附原型对象指向示意图）
首先，原型的出现是为了解决什么问题？为什么会需要原型？ 我们知道使用自定义构造函数的方式去创建一个带有属性和方法的对象，通过new的方式就可以快速的实例化出对象。用自定义构造函数Person()创建对象代码示例：function Person() { this.name = 'Jack' this.age = 18 this.sayHi = function () { console.log('hello constructor') }}// 第一次...
2021-08-02 20:46:38
141
原创 Generate CSS tree：在vscode中如何快速从HTML、JSX文件中快速生成样式树，即快速提炼出其结构，可将生成的样式树用于.less、.scss、.css文件中
该文章以vscode中，从.wxml快速生成样式树用于.less为例子。其过程如下：第一步：从扩展中安装Generate CSS tree插件第二步：选中要提炼出样式树的代码区域
2021-07-28 19:07:59
610
原创 AJAX+php实现分页器：分页展示数据
效果图：.html<style> *{ margin:0px; padding: 0px; } .pagination{ width: 800px; height: 40px; border:1px solid red; margin: 20px auto;
2021-07-28 15:24:31
647
原创 AJAX验证登录：实现阻挡层效果，即用户在未登录状态下会无法访问list.html页面
login.html<form action="./login.php"> 账号：<input type="text" name="user1"><span></span> <br/> 密码：<input type="text" name="pass1"><span></span> <br/> <button&
2021-07-28 14:56:18
362
原创 AJAX+php:通过ajax传参制作价格范围查询,一般用于搜索页面中按商品价格区间进行数据显示
.html<input type="text">至<input type="text"><button>搜索</button><ul></ul> <script src="./ajax.js"></script> <script> //获取操作对象 var inps=document.querySelectorAll("input")
2021-07-28 11:35:20
212
原创 AJAX+php实现模糊查询（代码），一般用于搜索功能
功能描述：用户在输入框中输入关键字； 点击“查询”按钮，查询出含有该关键字的数据；（此案例关键字限制规则是：%keyword%，即数据中含有关键字就符合） 数据在ul中渲染在页面小知识点：json_encode() 是php的一个内置函数(php>5.2)可以使用，把数组转换成json字符串 eval()是全局对象的一个函数属性 eval()函数会将传入的字符串当做JavaScript代码进行执行。 网站链接：php:https://www.php...
2021-07-28 10:08:19
567
原创 创建一个AJAX对象的兼容性写法（针对IE高低版本的兼容）
// IE9及以上const xhr = new XMLHttpRequest()// IE9以下const xhr = new ActiveXObject('Microsoft.XMLHTTP;')//兼容写法if(window.XMLHttpRequest){ var xhr=new XMLHttpRequest();}else{ // IE5 IE6 var xhr=new ActiveXObject("Microsoft.XMLHTTP;");};...
2021-07-27 23:12:31
161
原创 php+cookie实现用户登录：实现阻挡层效果，即用户在未登录状态下会无法访问list.html页面（相似参考效果为商城中，用户在未登录的状态下，无法实现加入购物车功能）
效果图：功能描述：用cookie实现在登录的情况下才能进入某页面（此时cookie只能在同一个文件夹下面调用，有域名限制和项目地址限制）执行流程描述：1用户在login.html中输入登录账号和密码，通过action将数据传送到login.php文件中，即后台；2后台操作 1后台通过_GET方法获取到用户输入的账号和密码； 2与数据库建立连接，查询数据库中是否...
2021-07-27 21:20:10
388
原创 localStorage：添加个人信息到本地存储中（分析+代码）
实现效果：功能描述： 用户点击添加个人信息，信息提交到本地存储中，并渲染到页面； 姓名相同，则提示用户“该用户名已存在”，个人信息添加失败； 点击删除按钮，实现删除该用户信息的删除效果。思路分析：1 添加个人信息到本地存储功能 1判断本地存储中是否存在info1这个key1如果没有，则info1=[]设为空数组2如果有，则将i...
2021-07-27 21:02:24
1418
原创 php：通过冒泡算法给数组排序
//给数组中的元素排序$ar1=[23,45,12,78,9,56];//使用冒泡排序的方式for($i=0;$i<count($ar1)-1;$i++){ for($j=0;$j<count($ar1)-1-$i;$j++){ if($ar1[$j]<$ar1[$j+1]){ $temp=$ar1[$j]; $ar1[$j]=$ar1[$j+1]; $ar1[$j+1]=$temp;.
2021-07-26 19:08:23
298
原创 javaScript:用构造函数的方式实现tab选项卡（注意this指向）
效果图：使用构造函数的方式，可以快速的实现新tab选项卡的创建，大大减少了代码量，实现了代码的优化。 <style> *{ margin:0px; padding: 0px; } .box{ width: 300px; border:2px solid pink; margin:20px auto; .
2021-07-26 11:03:15
893
原创 javaScript:用欧几里德原理求出两个数n、m之间的最大公约数和最小公倍数(代码)
<script> //求最大公因数函数function gcd(n,m){ //连续计算余数，直到为零 while (n!=0){ let flag = m%n; m=n; n=flag; } return m;}console.log(gcd(25,15));//5 //求最小公倍数函数function lcm(n,m){ return (n*m)/(gc.
2021-07-23 14:00:17
302
1
原创 原生javaScript实现图片透明渐变轮播（代码）
效果图：效果描述：改变opacity的值，结合z-index;实现图片透明度渐变；点击Li,显示对应图片； 点击左右按钮，分别显示上一张、下一张图片； 鼠标移入，渐变停止；鼠标移出，渐变开始代码如下：<style> *{ margin:0px; padding: 0px; text-decoration: none; } .box{ ..
2021-07-21 14:48:41
682
1
原创 原生javascript实现图片左右平滑轮播效果（思路分析+代码）
效果截图：思路：1准备工作1通过html和css实现图片水平布局（可以在main里面设置overflow=scrollleft，更好的观察图片移动的轨迹）2获取需要操作的对象3设置默认展示的图片的下标imgIndex=1默认的轮播按钮下标btnIndex=0初始的main的scrollLeftmain.scr...
2021-07-21 11:50:54
5129
2
原创 javaScript:实现倒计时定时器setInterval的开始计时、暂停计时、停止计时效果
描述：点击开始，从60秒开始计时； 点击停止，时间会重置，等再次点击开始，就会从60开始； 点击暂停，倒计时暂停，再次点击开始，则从暂停时的时间开始倒计时效果如图：代码如下：<button>开始</button> <button>停止</button> <button>暂停</button> <div>倒计时：60秒</div> <script> .
2021-07-20 10:09:35
7556
1
原创 javaScript:一些特殊标签的获取，如body、title、html、head、doctype
+特殊的标签==>body标签:document.body==>title标签:document.title获取的是title里面的内容，但是可以获取也可以赋值==>document.title:获取的是title里面的内容==>document.title="新的titl...
2021-07-19 20:58:39
554
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人