学习总结
关注
分享
扫一扫
云之前端
千行代码，Bug何处藏。
展开
-
彻底弄懂图片懒加载及底层实现原理
思路：给图片一个src属性存储一个加载动画的图片，data-src存储真实的图片，在图片每一进入可视区域的时候先加载加载动画的图片，等真正进入可视区域再加载真实图片。思路：只需要获取img元素相对于视口的顶点位置rectObject.top，只要这个值小于浏览器的高度window.innerHeight就说明进入可视区域。说明图片已经在视野范围内了，可以加载图片，下面是具体的代码实现。当元素相对于文档顶部的高度原创 2023-01-31 15:59:36 · 617 阅读 · 0 评论 -
javascript封装一个单向链表
toString() 由于链表项使用了 Node 类，就需要重写继承自 JavaScript 对象默认的 toString 方法，让其只输出元素的值。单向链表类似于火车，有一个火车头，火车头会连接一个节点，节点上有乘客，并且这个节点会连接下一个节点，以此类推。isEmpty() 如果链表中不包含任何元素，返回 trun，如果链表长度大于 0 则返回 false。indexOf(element) 返回元素在链表中的索引。insert(position, element) 向链表的特定位置插入一个新的项。原创 2023-01-31 10:21:45 · 315 阅读 · 0 评论 -
js实现数组去重的几种方式
注意了，该方法对于NaN也是有效的哦，虽然NaN与NaN不是恒等的，但在set里面认为NaN与NaN相等。当我们看到这个数组的时候，你第一反应是不是采用set呢，当然，针对该数组可以。2.利用includes + forEach方法实现。5.利用对象实现，其方法和Map()差不多。好了，今天的分享就到这里！列：下面是一个简单的数组。4.利用reduce去重。3.利用Map()实现。原创 2023-01-30 19:54:20 · 143 阅读 · 0 评论 -
JS高级-简单易懂的原型与原型链之（_ _proto_ _与prototype关系）
在讲解之前先记住几个关键点：1.所有的实例对象都有一个_ proto 属性（即隐式原型)2.所有的构造函数都有一个prototype属性（即显示原型)3.实例对象的 proto _属性指向它的构造函数的prototype属性下面创建一个Fn构造函数：function Fn(){ this.method1 = function(){ console.log('method1') }}var fn = new Fn()在这个例子中，fn是Fn的实例，因此fn._ proto _ ===原创 2021-02-22 17:08:30 · 193 阅读 · 0 评论 -
react-hooks之useImperativeHandle使用详解
useImperativeHandle可以通过使用ref时自定义暴露给父组件的实列值，并配合forwardRef一起使用下面是一个简单的例子暴露给父组件一个属性值效果如下该钩子函数还有第三个参数，如果里面涉及到某个变化的值，只有当第三个参数发生改变时，父组件接收到的该值才会发生改变代码如下所示：先点击setCount按钮加到7，然后点击“获取子组件暴露给父组件的东西”按钮，此时打印出的count还是初使状态的0，只有点击了setNum按钮，（也就是说当num发生改变当时候），再次点击“获取原创 2020-08-09 19:45:02 · 6395 阅读 · 6 评论 -
react之forward与useRef的使用简单详解
forwardRef用于创建一个组件，该组件可通过ref属性转发到另一个组件中下面给一个列子便可了解其使用方法定义一个子组件定义一个父组件打印出的效果如下由此可见，给子组件某一元素添加了ref属性之后，父组件结合useRef，调用其.current便可获得该元素。...原创 2020-08-09 17:51:01 · 1657 阅读 · 0 评论 -
react-hooks之useMemo与useCallback使用详解--（上篇）
介绍：当父组件引入子组件以及在更新某一个值的状态的时候，往往会造成一些不必要的浪费，而useMemo和useCallback的出现就是为了减少这种浪费，提高组件的性能，不同点是：useMemo返回的是一个缓存的值，即memoized 值，而useCallback返回的是一个memoized 回调函数。useMemo使用解析：如上图所示，点击按钮之后，虽然count值改变了，但保存在useMemo里面的count还是最初的count值，这就类似与javascript的一种缓存技术，那么，怎么样才会改原创 2020-07-26 21:58:32 · 1230 阅读 · 1 评论 -
javascript之制作3d轮播图
如上图所示为一个3d轮播图的实例，如下我的代码里面有详细描述<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="keywords" content=""> <title>3d轮播图</title><style type=...原创 2019-04-12 19:57:19 · 377 阅读 · 0 评论 -
jquery实现手风琴
效果图：如下是我的代码：<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="keywords" cintent=""> <title>js之手风琴</title><style> body{margin:0;} b...原创 2019-04-13 19:42:38 · 392 阅读 · 0 评论 -
JS具有代表性的题-this的理解
第一题：这是一道典型的对象调用函数，谁调用的,this就指向谁，o.fn()此时this指向o,因此this.a即o.a,所以输出结果为2第二题fun()是一个典型的函数直接加圆括号，所以其上下文环境为window,里面的this.a=2; this指向window,相当于定义了一个全局变量a=2,第一次fun()返回了一个内层函数，第二个()也是典型的函数直接加(),所以上下文也是wi...原创 2019-04-13 23:15:16 · 150 阅读 · 0 评论 -
bootstrap制作一个优美的导航栏
制作这个导航栏需要知道导航栏是bootstrap网站的一个突出特点。导航栏在移动设备的视图中是折叠的，随着可用视图的增加，导航栏也会水平展开。实例如下所示：<!DOCTYPE html><html><head> <title></title><link rel="stylesheet" type="text/css" ...原创 2019-04-22 21:56:28 · 10101 阅读 · 1 评论 -
vue实现一个任务计划表
效果图如下所示：需要用到的指令：条件渲染 v-show根据表达式之真假值，切换元素的 display CSS 属性当条件变化时该指令触发过渡效果v-model在表单控件或者组件上创建双向绑定v-bind缩写:动态地绑定一个或多个特性，或一个组件 prop 到表达式v-on缩写@绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰...原创 2019-06-02 16:45:54 · 3251 阅读 · 10 评论 -
es6之模板字符串
es6出现之前，字符串的拼接特别麻烦，但自从有了es6之后，这一切问题都变得简单了。虽然之前也用过es6的模板字符串，但从来没有好好整理一下，现在整理笔记，也方便以后复习。模板字符串用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。比如下面这样。...原创 2019-07-13 22:35:27 · 199 阅读 · 0 评论 -
js中的几种循环总结
比如：const fruits = ['apple', 'orange', 'strawberry', 'grape'];第一种，for循环for(let i = 0; i < fruits.length; i++) { console.log(fruits[i]); // apple orange strawberry grape}第二种，forEach循环frui...原创 2019-07-14 10:38:10 · 417 阅读 · 0 评论 -
es6之数组的几种新方法
这些知识点不常用到，写这个的目的是为了方便以后的复习，之后有什么项目需要用到该知识点的，便于在这里进行查询。.find()查找数组当中满足某一个条件的元素该方法接受三个参数find(element, index, array)找到了符合条件的第一个元素时就会立马返回，而不会执行后面的操作，与forEach相比有一定的优势，与for of相比语法更加简单清晰const inventory ...原创 2019-07-23 22:13:37 · 458 阅读 · 0 评论 -
es6之剩余参数
function sum(...numbers) { console.log(numbers); // [1, 2, 3, 4]}sum(1, 2, 3 , 4)可以看出numbers是一个数组，并且其原型也是一个数组，因此可以使用数组的一切方法剩余参数有两个常见的应用第一种，汇率计算function converCurrency(rate, ...amounts) { re...原创 2019-07-23 22:48:35 · 156 阅读 · 0 评论 -
es6之扩展运算符
在es6以前，如果我们要把两个数组拼接到一起，通常是使用数组的concat方法，比如const a = ['Jelly', 'Bob', 'Helen'];const b = ['James', 'Adrew', 'John'];const c = a.concat(b);console.log(c);// ['Jelly', 'Bob', 'Helen', 'James', 'Adr...原创 2019-07-24 22:38:52 · 272 阅读 · 0 评论 -
vue+bootstrap制作简易表格的添加、删除与搜索
所用到的技术vue+bootstrap效果图如下代码如下所示<!DOCTYPE html><html><head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <...原创 2019-08-03 18:07:08 · 795 阅读 · 0 评论 -
es6之class类的理解
传统的javascript语言中，没有类的概念，生成示例对象是先定义一个构造函数，然后通过new操作符来完成。下面是一个列子。这种写法与传统的面向对象语言(c++ java)差异很大，对于刚学习这门语言的程序员来说，可能会感到困惑。因此，es6引入了class类这个概念，作为对象的模板，通过class关键字就可以定义类。1、构造函数实例注意：class定义类的时候，不需要写functio...原创 2019-04-08 21:15:37 · 1088 阅读 · 0 评论 -
javascript-es6之深度克隆
在讲深度克隆之前，我们需要了解一些知识点：判断数据类型的方式：1、typeof返回的数据类型:String Number Boolean Undefined Object Function2、Object.prototype.toString.call(obj)拷贝数据：基本数据类型：拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据对象/数组:拷贝后不会生成新的数据，而且...原创 2019-04-10 21:08:27 · 1634 阅读 · 0 评论 -
JavaScript复选框之全选、不选和反选
<html><head><meta charset="utf-8"><title></title><script>window.function(){ var oBtn1=document.getElementById('btn1'); var oBtn2=document.getEleme原创 2019-01-24 19:19:41 · 232 阅读 · 2 评论 -
javascript函数传参（点击变宽变高变绿）
我们在使用div更改宽高颜色的时候，里面往往会采用下面这种方式：function toWidth(){var oDiv=document.getElementById(‘div1’);oDiv.style.width=‘200px’;}function toHeight(){var oDiv=document.getElementById(‘div1’)；oDiv.style.h...原创 2019-01-20 19:20:02 · 401 阅读 · 1 评论 -
JavaScript之、innerHTML实例讲解
本文通过一个具体的实例讲解innerHTML的用法，分享给大家做参考，具体代码如下：<html><head><meta charset="utf-8"><title></title><style>#div1{ width:200px; height:100px; border:1原创 2019-01-25 17:18:47 · 658 阅读 · 1 评论 -
JS运动之无缝滚动
&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;style&g原创 2019-02-02 11:10:26 · 147 阅读 · 1 评论 -
JS之简易日历的制作
下面我为大家分享一个我制作的简易日历，话不多说，直接上代码body部分 &lt;body&gt; &lt;div id='tab'&gt; &lt;ul&gt; &lt;li class="active"&gt;&lt;h2&gt;JAN&原创 2019-02-14 17:31:54 · 633 阅读 · 0 评论 -
JS表格之各种搜索应用
搜索忽略大小写-toLowerCase实现大小写转换模糊搜索-search的使用多关键词-split的使用<! DOCTYPE html><html><head><title></title><script>window.function(){ var oTab=document.getEleme...原创 2019-02-07 15:33:11 · 321 阅读 · 1 评论 -
css3之制作个性照片墙
在学习了css3之后，是不是觉得css3的功能竟然如此强大，话不多说，下面我就给大家讲讲如何利用css3制作一个个性化的照片墙。需要用到的知识：rotate()方法transform:rotate(度数)度数为正，表示元素相对原点中心顺时针旋转；度数为负，则表示元素相对原点中心进行逆时针旋转。结构伪类选择器：E：first-child 选择父元素的第一个子元素E：last-child...原创 2019-02-21 14:27:44 · 528 阅读 · 0 评论 -
css3之鼠标移入显示所有内容
在做这个之前，我先介绍一下做这个需要用到的知识点：text-overflow属性text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition-property属性设置过渡动画所需操作的属性transition-duration属性设置过渡动画持续时间，单位s(秒)，也可以为小数，如：0.5秒transiti...原创 2019-02-21 16:30:04 · 4482 阅读 · 0 评论 -
JavaScript之数码时钟
下面，我就教大家如何利用JavaScript做一个简单的数码时钟。在做之前我们需要在网上找到从0-9的10张数字图片，保存到一个文件夹里面，并将数字图片对应为相应的数字，作为我们的素材工具。具体步骤如下所示：首先在body部分插入6张图片。<img src="C:\Users\asus\Desktop\img/0.png"/><img src="C:\Users\asu...原创 2019-01-31 12:13:37 · 688 阅读 · 1 评论 -
JS之offsetWidth的一些小缺陷
在我前面发的一些文章中，大家可能经常看到我使用offsetWith offsetHeight offsetLeft等，今天这篇文章，我将讲一下offsetWidth的一些缺陷。在讲之前，做一个平时常用的物体变窄，代码如下：<!DOCTYPE html><html><head> <title></title><style&...原创 2019-02-17 15:30:52 · 1023 阅读 · 0 评论 -
JavaScript之多物体运动框架
列子：多个div,变宽，变高注：多物体运动框架中所有东西都不能公用<!DOCTYPE html><html><head> <title></title><style>div{width:200px;height:200px;background: yellow;margin:10px;float:left;bor...原创 2019-02-17 20:22:07 · 217 阅读 · 1 评论 -
css3之爱心表白动画特效
春天了，又到了告白的季节，你是不是还在苦恼不知如何向心中的她（他）表白心意呢，哈哈，下面我就教大家做一个爱心表白特效<!DOCTYPE html><html><head> <title></title><style>html{height: 100%;background: rgb(40,240,245);}.h...原创 2019-02-26 14:56:32 · 2851 阅读 · 0 评论 -
JavaScript经典案例水仙花数
水仙花数是指一个三位数，他的每个位上的数字的3次幂之和等于它本身。下面我将讲解如何用js做一个水仙花数，代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title><script type="text/ja原创 2019-03-02 16:19:35 · 2556 阅读 · 0 评论 -
css3之制作旋转小风车
下面教大家做一个旋转小风车，所用知识与我上一篇的爱心特效有相似之处，大家可以看看我前面发的文章，好了，下面就展示我的代码吧<!DOCTYPE html><html><head> <title></title><style>*{margin:0;padding:0;}#box{width:400px;height:...原创 2019-03-02 22:24:40 · 662 阅读 · 0 评论 -
javascript之创意选项卡
我们都知道选项卡在js的学习过程中是必须要掌握的基本功能，下面我结合了css做了一个创意的选项卡，附上我的代码<!DOCTYPE html><html><head> <title></title><style type="text/css">#box{width: 500px;height:300px;backgr...原创 2019-03-20 23:12:11 · 153 阅读 · 0 评论 -
css之二级菜单效果
在做之前需要了解的几个小知识点：a{text-decoration}去掉下划线float:left左浮动，把一级菜单水平显示list-style-type:删除小圆点display:none隐藏二级菜单display:block显示二级菜单好了，下面来看我们的代码吧<!DOCTYPE html><html><head> <title&g...原创 2019-03-22 21:14:14 · 585 阅读 · 0 评论