- 博客(43)
- 收藏
- 关注
RSS订阅原创 Vue3中proxy相比Vue2.0中object.defineProperty的优点
一、Object.defineProperty定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象为什么能实现响应式通过defineProperty两个属性，get及set get 属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值 set 属性的...
2021-04-15 19:45:27
357
原创 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高PS: 文末有彩蛋两栏布局两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，比如Ant Design文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器❝这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器❞这种布局适用于内容上具有明显主次关系的网页三栏布局三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次..
2021-04-13 20:49:35
309
原创 js中异步加载属性defer和asnyc的区别
基础知识script标签需要放在body最后，这是开发中一直坚持的习惯，为什么这样做呢？因为js的加载和执行会阻塞后续html的解析和渲染。如果一个script标签放在html中间，当执行到这一句时，会停止对html的解析和渲染，转而进行js的加载和执行，结束以后，再继续后面的内容。defer和asnyc1.defer这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉
2021-04-12 20:05:19
205
原创 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 19:53:04
497
原创 jquery和bootstrap的介绍与区别
Bootstrap简单介绍 Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。 CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CS.
2020-11-29 15:10:32
381
原创 CSS预处理器scss、less、stylus的区别
CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题：语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器； 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。这不是锦上添花，而恰恰是雪中送炭。sass(scss) 、less、 stylus等.
2020-11-29 14:39:46
256
1
原创 DOM事件委托机制
事件委托是什么？事件委托就是利用冒泡机制，将事件添加在目标元素的父元素或祖辈元素上，触发执行效果。也就是就是监听目标元素的祖先。代码示例：<body> <div id="div"> <button id="btn">点击</button> </div> <script> window.onload = function () { let .
2020-11-25 21:11:08
90
原创 Vue.js复习笔记三（Sun）
五 Vue的双向绑定原理vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，.
2020-11-25 10:03:23
114
转载 几种垃圾回收算法机制
垃圾回收GC的全拼是 Garbage Collection 其在维基百科的定义是： 在计算机科学中，垃圾回收（英语：Garbage Collection，缩写为GC）是一种自动的内存管理机制。当一个电脑上的动态内存不再需要时，就应该予以释放，以让出内存，这种内存资源管理，称为垃圾回收（garbage collection）垃圾回收算法有多种，先看看几个评价垃圾回收算法性能的几个方面，再具体看看各种算法的优缺点吞吐量 throughput 最大暂停时间 堆使用效率 访问的局部性一、 标记-清除
2020-11-08 21:34:17
96
转载 2 年前端 7～9 月面试经历总结
js 基础 原型链 继承的实现 数据类型 var、const、let 对比 es next 最新规范 new 的过程 this 指向问题 bind 实现方式 闭包 事件循环【超高频】 类型判断 手写 Promise 其中，关于 js 语法的资料这里不详细赘述，可以去仓库里面找对应的资料。关于事件循环（Event Loop），大小厂的问法是不同的。小厂通常会直接让你口述事件循环...
2020-10-20 15:04:13
109
原创 Vue.js复习笔记二（Sun）
背景在前端的整个学习生涯中，我们总是能一次次听到“性能”和“体验”这两个词。前端性能优化不仅是前端工程师工作中时刻需要关注的现实问题，也是前端面试中屡屡被问到的点。面试官之所以爱问，是因为偷懒。只需问这一个问题，就能在一定程度考察面试者的知识广度、知识深度、总结能力、表达能力，还能沿着这条线继续问其他问题。当被突然问到性能这个问题时，大部分人会突然一愣。总觉得有很多要说的东西，但又感觉杂乱无章一下子不知从何说起。经过一番思索，脑子里慢慢翻出早年面试刷题时看到的“雅虎性能优化N条军规”，抓耳挠腮说上七
2020-10-13 18:59:31
163
1
原创 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 19:36:39
114
原创 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 16:09:27
114
原创 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 09:09:45
229
原创 手写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 09:08:16
157
原创 HTML&CSS复习笔记二（Sun）
五 在form表单中，get方式和post方式提交数据的区别是什么？如何判断在实际开发中的应用？get方式和post方式提交数据的区别：1） 大小不同，get方式传输的数据量较小，而post可以传输大量的数据。2） 安全程度不同，get方式传输数据能够被别人轻易的看到数据内容，所以安全程度较低，而post则可以很好的隐藏。3） 速度不同，post方式速度较慢，而get方式速度较快。4） 在服务器上的作用不同，get是从服务器上获取数据，而post是向服务器上传送数据。在实际开发中的应用：1）在
2020-09-26 20:03:01
102
原创 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 21:32:50
498
原创 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 22:49:46
150
原创 JS中跨域产生的原因及解决方案
call、apply、bind的作用是改变函数运行时this的指向。callcall()的第一个参数为this绑定的对象，后面传入一串参数列表。当第一参数为null或undefined时，默认指向window对象。applyapply()和call()类似，唯一的不同点在于第二个参数传入一个参数数组。当第一参数为null或undefined时，默认指向window对象。bindbind()和call()类似，不同点一bind()不会立即执行，而是返回一个改变了this后的函数
2020-09-16 23:09:17
461
原创 两栏以及三栏自适应布局
两栏以及三栏自适应布局左边宽度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 21:30:48
135
原创 苹果记账之抽取公共组件
苹果记账反思：抽取公共组件在写代码时一直牢记：我与重复不共戴天在目前写的两个页面里，抽取了一些公共组件：TagTypeInputButton遇到的问题有：需要传的参数不同， 用props 父传子 用slot ， 比如Input组件 在money页的placeholder是“写点备注吧”在editLabel页的placeholder是“限三个汉字”做法是用prop 传递 placeholder变量EdiltLabel<FormItem .
2020-09-14 22:37:57
100
原创 如何用Typescript写Vue组件
Toast首先我们做需求分析：难点1. 动态生成Vue实例第一个难点在于：我们需要动态生成Vue实例，作为弹窗，这就需要用到插件的知识另外，由于我用的是Typescript, 还需要额外指定类型首先我们准备一个Toast.vue<template> <div class="toast"> <slot></slot> </div></template><scri
2020-09-13 21:08:05
481
原创 Vue.js组件中data为什么必须是一个函数
柠檬UI之Grid网格布局网格布局什么是网格布局？就是把一个 div 分成 N 个部分（N = 12,16,24...），每个部分无空隙或者有空隙。制作雏形：一行分成24份，可以用span指定多少份增加gutter:每个column之间有间隙，但是两边无间隙实现思路：column设置 Padding，值为 gutter / 2，这样两个column之间的间隙值就是gutter 父元素row 设置负Margin，值为 - gutter / 2怎么通...
2020-09-10 22:51:12
94
原创 巧用provide和inject方法完成精巧的Tab组件
巧用inject方法完成精巧的Tab组件目标：希望用户如下使用代码：<m-tabs> <m-tabs-nav> <m-tabs-item name="tab1"></m-tabs-item> <m-tabs-item name="tab2"></m-tabs-item> </m-tabs-nav> <m-tab
2020-09-09 21:17:51
248
转载 git的基本使用方法
git的基本使用方法什么是git？git是目前世界上最先进的分布式版本控制系统。git与SVN的最主要区别？SVN是集中式版本控制系统，版本库是集中放在中央服务器的，而工作的时候用的都是自己的电脑，所以开始工作之前需要从中央服务器那里获取最新的版本，然后开始工作，工作完后，需要把自己所做的工作推送到中央服务器。集中式版本控制系统必须要联网才能工作，如果在局域网中，有足够的宽带，运行速度够快，而在互联网环境下，网速慢通常会导致服务难以进行。git是分布式版本控制系统，没有中央服务器，每个人的电
2020-09-08 22:43:20
86
转载 如何部署Vue项目到github上并实现在线预览
最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目，有点小激动，想把它上传到 github 并展示一下预览效果，结果踩了好多坑，折腾了大半天才弄好。这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目，并且项目也已经上传到了 github问题1当我们在命令行执行 npm run build 后，项目的目录下会生成一个 dist 文件夹，它里面又包含一个 static 文件夹和一个 index.html 文件，这是 webpack 最终打包好的文件我们先尝试在浏览器
2020-09-07 22:41:07
3141
3
转载 Echarts可视化图表的基本用法
一、引入echarts（有问题请留言）ECharts是由百度打造的一个纯javascript的图标库，很好用。下载地址：http://echarts.baidu.com/download.html可下载精简版或者完整版引入js.<script type="text/javascript" src="echarts-all.js"></script>二、使用echarts在使用echarts制图之前，首先要定义一个div....
2020-09-06 22:35:04
232
1
原创 Webpack基础与进阶
目标一：用webpack编译JS首先下载webpack然后由于是本地安装，所以需要指定在哪里去找webpack的执行程序 ./node_modules/.bin/webpack --version还有一种简易的方法，就是npx webpacknpx 会自动帮我们找webpack在本地的哪个地方当我们运行之后，会发现多了一个dist文件，里面还有main.js 这就是转译index.js的结果转译JS初体验在index.js里写一些浏览器里不能...
2020-09-05 23:16:13
116
原创 异步与回调的异同点
一、什么是同步和异步？同步：直接能拿到结果 异步：不能直接拿到结果在JS中，有的函数不能立刻拿到结果，需要等一会才能拿到结果，比如发送HTTP请求，等待响应需要一段时间。如果 JS 不能直接拿到一个函数的结果，可以先去执行别的代码，等结果到了再取结果，这就是异步异步的好处是可以把用来等待的时间拿去做别的事情怎么判断一个函数的结果是同步的还是异步的呢？如果一个函数的返回值在setTimeout, AJAX, AddEventListener 这三个东西内部，那么这个函数就是异步函.
2020-09-03 20:40:47
783
原创 React和Vue的相同点与不同点
vue和react的区别 Vue最大的优势，就是实现了数据的双向绑定，而React的数据流动是单向的。 React中是把html和css全都写进js中。而Vue采用的是模板，就是在html中写css和js，最后再用webpack和vue-loader进行打包，这种编码方式对于初学者而言是很舒服的 在React中要想更新状态，必须调用setState方法，而在Vue中只需要通过this的某种方式去更新state中的数据，这种方式更加方便 Vue会跟踪每一个组件的依赖关系，不
2020-09-02 19:06:04
416
转载 Vue中mixins的用法
mixinsvue中提供了一种混合机制–mixins（混合），用来更高效的实现组件内容的复用。mixins是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。mixins理解组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属
2020-09-01 19:32:01
688
原创 v-for中为什么要用key
1.vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。2.key主要用来做domdiff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，Vue不是移动Dom元素来匹配数据项.
2020-08-31 19:29:23
464
原创 画一只动态的皮卡丘（四）
vuex是什么？ vuex官网Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，统一管理和维护vue的可变状态。什么情况下应该使用vuex？多组件共享状态 多个组件使用同一个数据 任何一个组件发生改变 其他的组件也要跟着发生相应的变化vuex的五个核心属性五个核心概念：State、Getter、Action、Mutation、Module一、Statestate是vuex的全局状态数据由于vuex状态存储是响应式的，所以vue组件从store中获取状态最简单的方法
2020-08-27 17:16:26
201
原创 画一只动态的皮卡丘（三）
手写Promiseclass Promise2 { succeed = null fail = null state = 'pending' constructor(fn) { fn(this.resolve.bind(this), this.reject.bind(this)) } resolve(result) { setTimeout(() => { this.state = 'fulfilled' this.su
2020-08-26 18:01:41
198
原创 画一只动态的皮卡丘（二）
一、跨域产生的原因 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。二、什么是跨域当一个请求url的协议、域名、
2020-08-25 18:03:25
237
原创 画一只动态皮卡丘（一）
vue组件中的data必须是函数类比引用数据类型Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响举个????const MyComponent = function() {};MyComponen
2020-08-24 20:17:23
754
原创 重绘和重流的区别
HTML页面的重绘（repaint）和重流（reflow）repaint）浏览器的大概工作流程以普通的HTML页面为例：解析HTML文档，生成dom树解析css产生css规则树解析JavaScript，通过DOM-API来操作dom树和css规则树通过dom树和css规则树来构造渲染树（rendering tree）调用操作系统的GUI接口画页面、重流元素的大小尺寸、位置发生变化时，会重新计算渲染树，页面要进行重新排版工作，这个过程即是重流。触发重流的因素1.添加、删除可见的dom2
2020-08-23 22:35:58
632
1
原创 JS中深浅拷贝的区别
深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。假设B复制了A，修改A的时候，看B是否发生变化：如果B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值）如果B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不同的值）浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，使用深拷贝的情况下，释放内存的时候不会因为出现浅..
2020-08-23 17:17:16
382
原创 CSS盒模型简介
CSS盒模型两种盒模型content-box 内容盒： 宽度只是内容的宽度 border-box 边框盒： 宽度包括内容+ padding + border的宽度举例来说，如果写以下代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> .content-box {
2020-08-22 22:31:49
146
原创 CSS中选择器的种类及优先级顺序
1、类型选择器CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器)，可以向这种元素类型的每个实例上应用声明。例如，以下简单规则的选择器是H1，因此规则作用于文档中所有的H1元素。2、简单属性选择器CLASS属性CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲，可以使用CLASS属性来分类元素，在样式表中创建规则来引用CLASS属性的值，然后浏览器自动将这些属性应用到该组元素。类选择器以标志符(句点)开
2020-08-22 22:26:36
296
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人