sunwan19941023
码龄5年
关注
提问 私信
  • 博客：16,567
    16,567
    总访问量
  • 35
    原创
  • 2,312,711
    排名
  • 9
    粉丝
  • 0
    铁粉
IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）
IP 属地：湖北省
  • 加入CSDN时间： 2020-07-06
博客简介：

m0_49210479的博客

查看详细资料
个人成就
  • 获得14次点赞
  • 内容获得8次评论
  • 获得51次收藏
创作历程
  • 4篇
    2021年
  • 39篇
    2020年
成就勋章
TA的专栏
  • Vue.js
    14篇
  • JavaScript
    10篇
  • html
    6篇
  • CSS3
    9篇
  • 项目复习
    5篇
  • ES6
    2篇
  • git
    1篇
  • Echarts
    1篇
  • React
    1篇
兴趣领域 设置
  • 前端
    vue.jswebpack前端框架
  • 后端
    node.js
  • 学习和成长
    面试
创作活动更多

超级创作者激励计划

万元现金补贴，高额收益分成，专属VIP内容创作者流量扶持，等你加入！

去参加
  • 最近
  • 文章
  • 代码仓
  • 资源
  • 问答
  • 帖子
  • 视频
  • 课程
  • 关注/订阅/互动
  • 收藏
搜TA的内容
搜索 取消

Vue3中proxy相比Vue2.0中object.defineProperty的优点

一、Object.defineProperty定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象为什么能实现响应式通过defineProperty两个属性，get及set get 属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值 set 属性的...
原创
发布博客 2021.04.15 ·
369 阅读 ·
0 点赞 ·
0 评论 ·
2 收藏

如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高PS: 文末有彩蛋两栏布局两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，比如Ant Design文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器❝这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器❞这种布局适用于内容上具有明显主次关系的网页三栏布局三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次..
原创
发布博客 2021.04.13 ·
326 阅读 ·
1 点赞 ·
0 评论 ·
4 收藏

js中异步加载属性defer和asnyc的区别

基础知识script标签需要放在body最后，这是开发中一直坚持的习惯，为什么这样做呢？因为js的加载和执行会阻塞后续html的解析和渲染。如果一个script标签放在html中间，当执行到这一句时，会停止对html的解析和渲染，转而进行js的加载和执行，结束以后，再继续后面的内容。defer和asnyc1.defer这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉
原创
发布博客 2021.04.12 ·
216 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

Js中Map和WeakMap的区别

（1）Map map本质上就是键值对的集合，但是普通的Object中的键值对中的键只能是字符串。而ES6提供的Map数据结构类似于对象，但是它的键不限制范围，可以是任意 类型，是一种更加完善的Hash结构。 如果Map的键是一个原始数据类型，只要两个键严格相同，就视为是同一个键。 实际上Map是一个数组，它的每一个数据也都是一个数组，其形式如下：1 const map = [2 ["name","张三"],3 ["age",18],4 ]Map数据结构有以下操作方法：size： .
原创
发布博客 2021.04.12 ·
513 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

jquery和bootstrap的介绍与区别

Bootstrap简单介绍　 Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。　　基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。　　CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CS.
原创
发布博客 2020.11.29 ·
394 阅读 ·
1 点赞 ·
0 评论 ·
3 收藏

CSS预处理器scss、less、stylus的区别

CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器； 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭。sass(scss) 、less、 stylus等.
原创
发布博客 2020.11.29 ·
264 阅读 ·
0 点赞 ·
1 评论 ·
0 收藏

DOM事件委托机制

事件委托是什么？事件委托就是利用冒泡机制，将事件添加在目标元素的父元素或祖辈元素上，触发执行效果。也就是就是监听目标元素的祖先。代码示例：<body> <div id="div"> <button id="btn">点击</button> </div> <script> window.onload = function () { let .
原创
发布博客 2020.11.25 ·
95 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

Vue.js复习笔记三（Sun）

五 Vue的双向绑定原理vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，.
原创
发布博客 2020.11.25 ·
120 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

几种垃圾回收算法机制

垃圾回收GC的全拼是 Garbage Collection 其在维基百科的定义是： 在计算机科学中，垃圾回收（英语：Garbage Collection，缩写为GC）是一种自动的内存管理机制。当一个电脑上的动态内存不再需要时，就应该予以释放，以让出内存，这种内存资源管理，称为垃圾回收（garbage collection）垃圾回收算法有多种，先看看几个评价垃圾回收算法性能的几个方面，再具体看看各种算法的优缺点吞吐量 throughput 最大暂停时间 堆使用效率 访问的局部性一、 标记-清除
转载
发布博客 2020.11.08 ·
100 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

2 年前端 7～9 月面试经历总结

js 基础 原型链 继承的实现 数据类型 var、const、let 对比 es next 最新规范 new 的过程 this 指向问题 bind 实现方式 闭包 事件循环【超高频】 类型判断 手写 Promise 其中，关于 js 语法的资料这里不详细赘述，可以去仓库里面找对应的资料。关于事件循环（Event Loop），大小厂的问法是不同的。小厂通常会直接让你口述事件循环...
转载
发布博客 2020.10.20 ·
117 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

Vue.js复习笔记二（Sun）

背景在前端的整个学习生涯中，我们总是能一次次听到“性能”和“体验”这两个词。前端性能优化不仅是前端工程师工作中时刻需要关注的现实问题，也是前端面试中屡屡被问到的点。面试官之所以爱问，是因为偷懒。只需问这一个问题，就能在一定程度考察面试者的知识广度、知识深度、总结能力、表达能力，还能沿着这条线继续问其他问题。当被突然问到性能这个问题时，大部分人会突然一愣。总觉得有很多要说的东西，但又感觉杂乱无章一下子不知从何说起。经过一番思索，脑子里慢慢翻出早年面试刷题时看到的“雅虎性能优化N条军规”，抓耳挠腮说上七
原创
发布博客 2020.10.13 ·
170 阅读 ·
0 点赞 ·
1 评论 ·
0 收藏

Vue.js复习笔记一（Sun）

一 axios的底层什么实现的以及相关的ajax的问题Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。Ajax包含下列技术：基于web标准（standards-basedpresentation）XHTML+CSS的表示；使用 DOM（Document ObjectModel）进行动态显示及交互；使用 XML .
原创
发布博客 2020.10.12 ·
120 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

HTML&CSS复习笔记三（Sun）

九 行内元素有哪些？块级元素有哪些？空元素有哪些？块级元素：div、p、h1-h6、ol、ul、table、form行内元素：span、a、img、input、select、small空元素：没有内容的元素、 br、 hr十 doctype的作用是什么？严格模式与混合模式如何进行区分？它们之间有什么样的意义？doctype的作用是<!DOCTYPE> 声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范来渲...
原创
发布博客 2020.10.10 ·
118 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

Vuex的基本介绍及五个核心属性

一、创建button按钮1 HTML结构<div class="action"> <button data-speed="slow">慢速</button> <!-- 自定义属性 --> <button data-speed="normal" class="active">中速</button> <button data-speed="fast">快速</button>&l
原创
发布博客 2020.09.28 ·
232 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

手写Promise/Promise.all/Promise.race

前言继续总结过程中学到的新知识，这是第3部分。一、设置上下两部分，上方展示代码，下方跟随展示效果1 设置HTML结构<link rel="stylesheet" href="./css/default.css"> /*默认框架样式*/<style id="styleTag"></style> /*引入跟随展示效果 样式*/......<div class="code-wrapper"> <pre id="code"&
原创
发布博客 2020.09.28 ·
167 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

HTML&CSS复习笔记二（Sun）

五 在form表单中，get方式和post方式提交数据的区别是什么？如何判断在实际开发中的应用？get方式和post方式提交数据的区别：1） 大小不同，get方式传输的数据量较小，而post可以传输大量的数据。2） 安全程度不同，get方式传输数据能够被别人轻易的看到数据内容，所以安全程度较低，而post则可以很好的隐藏。3） 速度不同，post方式速度较慢，而get方式速度较快。4） 在服务器上的作用不同，get是从服务器上获取数据，而post是向服务器上传送数据。在实际开发中的应用：1）在
原创
发布博客 2020.09.26 ·
110 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

HTML&CSS复习笔记一（Sun）

一 垂直水平居中的多种方法：未知宽高：父元素设置：display：flex ; justify-content: center ; align-items : center子绝父相后：top: 50%; left: 50% ; transform: translate（-50%，-50%）知道宽高：子绝父相后： margin： auto子绝父相后：top: 50%; left: 50% ;margin：-50%px 0 0 -50%px二 flex是怎么使用的以及fle...
原创
发布博客 2020.09.24 ·
510 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

Vue.js中computed和watch的区别

计算属性computedcomputed的概念Vue的计算属性computed用于返回一个计算值，如果用于计算这个计算值的data的属性（即依赖的响应式 property ）发生变化，计算值也会相应的发生变化。var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlu.
原创
发布博客 2020.09.17 ·
153 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏

JS中跨域产生的原因及解决方案

call、apply、bind的作用是改变函数运行时this的指向。callcall()的第一个参数为this绑定的对象，后面传入一串参数列表。当第一参数为null或undefined时，默认指向window对象。applyapply()和call()类似，唯一的不同点在于第二个参数传入一个参数数组。当第一参数为null或undefined时，默认指向window对象。bindbind()和call()类似，不同点一bind()不会立即执行，而是返回一个改变了this后的函数
原创
发布博客 2020.09.16 ·
479 阅读 ·
0 点赞 ·
0 评论 ·
1 收藏

两栏以及三栏自适应布局

两栏以及三栏自适应布局左边宽度200px, 右边自适应宽度1. 左右都absolute，右right:0左右两边都绝对定位，父元素相对定位<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> &l
原创
发布博客 2020.09.15 ·
142 阅读 ·
0 点赞 ·
0 评论 ·
0 收藏
加载更多