前端源码学习和手撕
关注
分享
扫一扫
文章平均质量分 67
包含一些插件，API，空间的源码学习
望屿
这个作者很懒，什么都没留下…
展开
-
Vue的diff算法原理
0. 从常见问题引入虚拟dom是什么?如何创建虚拟dom?虚拟dom如何渲染成真是dom?虚拟dom如何patch（patch）虚拟DOM的优势?（性能）Vue中的key到底有什么用，为什么不能用index?Vue中的diff算法实现1. 虚拟dom1. h方法实现virtual dom ，也就是虚拟节点它通过js的Object对象模拟dom中的节点再通过特定的render方法将其渲染成真实的dom节点eg：<div id="wrappe原创 2022-03-15 16:54:40 · 1470 阅读 · 2 评论
-
图片懒加载的原理--三种方法实现
1. 图片懒加载的背景类似于大型的淘宝商城、京东等网页，设计大量的商品图片信息，如果我们使页面包含的所有图片一次性加载完成，那用户体验很差。目前流行的做法是滚动动态加载，也就是懒加载，显示在屏幕之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示这样做的好处，一是页面加载速度快(浏览器进度条和加载转圈很快就结束了，这样用户的体验也比较好)，而是节省流量，因为不可能每一个用户会把页面从上到下滚动完2. 图片懒加载的原理存储图片的真实路径，把图片的真实路径绑定给一个以d原创 2022-02-26 19:14:08 · 30803 阅读 · 4 评论 -
vue实现全选框效果
昨天看快手面经有这样一道题目，今天就试着来实现了一下vue组件封装，写逻辑部分，css忽略。大概是：全选单选，就像购物车的全选按钮，五个商品五个按钮，一个全选按钮，点击全选，商品都选中，反之，商品都选中则全选按钮亮。html部分<template id="check"> <div> // 表示全选框，定义全选点击事件 <input type="checkbox" class="all_check" value原创 2022-02-03 20:58:19 · 2866 阅读 · 0 评论 -
vue+css实现给弹框后的背景区域添加阴影效果
效果如下：只有弹框部分是白色，其他的加上一层阴影效果首先创建一个div，v-show控制显示和隐藏，默认隐藏<div class="bg" v-show="isShowbg"></div> .bg{ //设置布局方式为固定定位，充斥整个屏幕 position: fixed; top: 0; left: 0; bottom: 0; right: 0; //设置背景颜色为0.4透明度的黑色 background-co原创 2022-02-03 13:27:30 · 2398 阅读 · 0 评论 -
flex详解以及利用flex进行骰子布局
1.flex内容详解请移步致张鑫旭大牛的博客：flex布局重点是要明白flex布局由容器和子项构成作用在容器和子项上分别有不同的属性，了解每个属性的含义2.利用flex布局实现筛子效果效果图如下：附上源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con原创 2022-01-22 23:22:22 · 1255 阅读 · 0 评论 -
前端用户信息管理界面（上传图片到头像并显示）
界面展示如下以下为头像图片上传代码实现步骤html部分：我们需要通过file表单来上传图片，但是为了美观我们选择把file表单隐藏，通过直接点击图片触发file表单的形式上传文件 <div class="imgupload"> <p>点击添加头像</p> <img src="./img/添加.png" alt="" id=.原创 2021-07-23 16:54:31 · 4720 阅读 · 0 评论 -
利用setTimeout实现setInterval
1.定时器的概念介绍关于定时器要记住的最重要的事情是，指定的时间间隔表示何时将定时器的代码添加到队列，而不是何时实际执行代码假设有这样一句代码var btn = document.getElementById("my-btn"); btn.onclick = function(){ setTimeout(function(){ document.getElementById("message").style.visibility = "visible"; }, 250); //其原创 2022-02-16 14:17:04 · 5064 阅读 · 0 评论