- 博客(101)
- 收藏
- 关注
RSS订阅原创 多次请求只保持最后一次的结果
最近项目总结，如果一个输入框和一个搜索按钮，点击查询的时候，需要发起请求获取数据，因为请求是异步的，则无法获取哪一次的请求是最后一次的请求，则可以进行一下操作优化：思路一：请求外部存在一个变量，记录每次请求的标记值；可以将外部的标记值传入调用请求的内部，因为函数有作用域的概念，所以暂时目前传入的数据是会一直存在于该作用域内部的，但是外部的标记值会一直变化，当是最后一次请求的时候，外部的值和内部接收的值是相同的，可以在此处进行数据处理。vue代码如下：<template> <
2021-10-19 15:47:04
5384
5
原创 css:first-child和first-of-type
块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中，必须声明 <!DOCTYPE>。first-child:选择器用于选取属于其父元素的首个子元素的指定选择器first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素nth-of-type(x):选择器匹配属于其父元素的特定类型的第x个子元素的每个元素话不多说，先上代码： <div>
2021-08-24 13:42:48
1539
原创 吸顶效果实现
遇到一个小模块需要实现吸顶效果，在此简单总结一下：主要有2种思路：1.通过js代码监控需要吸顶的部分距离顶部的位置来设置固定定位；2.通过css的粘性定位属性来实现。思路一详解：1.div初始居普通文档流中2. 给window添加scroll事件（可事件节流），获取div的offset的top值，滚动时scrollTop值和top比较，当到达top时给div添加一个fixed的class使其固定3. 向上滚动时当到达div初始top时则删除fixed的class，此时div又回到普通文档流中
2021-08-23 11:18:39
2366
原创 echars中tooltip添加单位操作
tooltip中的formatter实际上提示框浮层内容格式器，支持字符串模板和回调函数两种形式。但是如果只有对字符串模板进行处理的话，拿不到该条数据对应的图例颜色，所以可以使用回调函数进行操作。详情可以参考：https://echarts.apache.org/zh/option.html#tooltip.formatter代码如下：仅供参考 tooltip: { trigger: 'axis', // 数据项图形触发 formatt
2021-08-12 18:31:55
1208
原创 promise和async、await
首先明确一个问题，为什么Node.js需要异步编程？JavaScript是单线程的，在发出一个调用时，在没有得到结果之前，该调用就不返回，意思就是调用者主动等待调用结果，换句话说，就是必须等待上一个任务执行完才能执行下一个任务，这种执行模式叫：同步。Node.js的主要应用场景是处理高并发（单位时间内极大的访问量）和I/O密集场景（ps:I/O操作往往非常耗时，所以异步的关键在...
2019-10-19 20:31:09
256
原创 for-in和for-of
参考：https://www.cnblogs.com/qiqingfu/archive/2018/11/28/10035554.htmlfor in 和 for of 相对于大家肯定都不陌生,都是用来遍历属性的没错。那么先看下面的一个例子:例1:以上是遍历对象,下面再看一个遍历数组的例子。var arr = [1,3,5]//for-in循环for(let i in arr...
2019-10-17 16:41:26
271
原创 echarts 图表大小随窗口变动而自适应变动（无需刷新浏览器调整）
问题提出：使用echars做完图表之后，需要根据浏览器窗口的缩放做自适应效果。原因分析及解决方案：echars的图标实例事实上并没有主动的去绑定resize()事件，就是说显示区域的大小改变内部并不知道，当你需要去做一些自适应的效果的时候，需要主动绑定这个时间才能达到自使用的效果，常见的如window.onresize = myChart.resize()示例：var m...
2019-09-27 15:09:40
8462
原创 window..onload和$(document).ready()
在Jquery里面，$(function(){}) 和$(document).ready(function(){})，这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。$(document).ready是在DOM完全就绪时就可以被调用。而window.onload是在dom文档树加载完和所有文件（包括图片等非文字媒体文件...
2019-09-17 20:25:27
597
原创 浏览器的缓存机制（总结版）
缓存类型缓存在宏观上可以分为两类：私有缓存和共享缓存。共享缓存就是那些能被各级代理缓存的缓存，私有缓存就是用户专享的，各级代理不能缓存的缓存。微观上可以分为以下几种：1. 浏览器缓存缓存存在的意义就是当用户点击back按钮或者是再次去访问某个页面的时候能够快速的响应。尤其在多页面应用的网站中，如果你在多个页面使用了一张相同的图片，那么缓存这张图片就变得特别的有用。浏览器先向代理服务...
2019-09-06 16:34:16
985
原创 原生JS添加类名 删除类名
为 <div> 元素添加 class:document.getElementById("myDIV").classList.add("mystyle");为 <div> 元素添加多个类:document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass"...
2019-09-04 16:23:16
1765
原创 制作表格边框样式
1.通过设置border-collapse。border-collapse 属性设置表格的边框是否被合并为一个单一的边框。可能的值值 描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 emp...
2019-08-30 12:09:33
327
原创 BOM
简介BOM（浏览器对象模型）提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。1.window对象BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象具有双层角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。2.location对象location对象是最有用的BOM对象...
2019-03-20 00:13:52
209
原创 JavaScript简单实现节流和防抖
函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多，带来的效果也是一样。倒不如，把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源，又能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。一.节流定义：触发函数事件后，短时间间隔内无法连续调用，只有上一次...
2019-03-08 16:48:08
518
原创 Proxy
一.概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”...
2019-03-08 11:14:18
8514
原创 笔试归纳和整理
1.变量提升和this考点1：变量提升：http://www.cnblogs.com/xiaohuochai/p/5700590.html考点2：func()(),这样调用，this指向的是window，第一个a输出的值是从作用域一层一层往上找，第二个a直接是window.a;可以理解为...
2019-03-07 18:21:41
167
原创 关于setTimeOut和Promise执行顺序的问题
前言promise为es6引进的语言标准，为异步编程的一种解决方案；阅读此文的前提是了解浏览器event loop的机制，还有promise的基本用法和特性，比如他自执行特性、状态不可逆特性等任务队列中的宏观任务和微观任务任务队列并不是只有一个，不同的任务对应着不同的任务队列。宏观任务放入宏观任务队列，微观任务放入微观任务队列，这些任务队列在栈空的时候被调入的优先级是微观任务队列优于...
2019-03-07 17:18:19
3325
原创 事件DOMContentLoaded和load的区别
参考：https://www.cnblogs.com/caizhenbo/p/6679478.htmlDOM文档加载的步骤为： 1.解析HTML结构。 2.加载外部脚本和样式表文件。 3.解析并执行脚本代码。 4.DOM树构建完成。//DOMContentLoaded 5.加载图片等外部文件。 ...
2019-03-07 15:30:15
243
原创 web前端应该注意的安全问题
1.跨站脚本攻击（XSS攻击） 跨站攻击，即Cross Site Script Execution(通常简写为XSS)是指攻击者利用网站程序对用户输入过滤不足，输入可以显示在页面上对其他用户造成影响的HTML代码，从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式XSS(Cross Site Scripting)，跨站脚本攻击。XSS是常见的Web攻...
2019-03-05 17:03:00
1683
原创 Vue面试题收集
一、对于MVVM的理解？MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，...
2019-03-02 21:23:08
220
原创 新建分支并且提交、合并到主分支上面（关于github操作）
新建分支并且提交、合并到主分支上面1.新建分支，并且切换到该分支上（假设分支名为hello）git branch hellogit checkout hello2.push到远程仓库上面git push origin hello这里的含义是将hello_git_branch这个分支提交到远程仓库上面。如果远程仓库没有这个分支，那么也会新建一个该分支。（原来为两个分支...
2019-02-27 23:44:07
2523
原创 Vue中的CSS动画原理
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点从隐藏状态变成显示状态：在进入/离开的过渡中，会有 6 个 class 切换。 从显示状态变成隐藏状态： v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素...
2019-02-22 22:22:00
179
原创 动态组件
1.动态组件前奏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态组件前奏</title> <script src="vue.js">
2019-02-21 22:04:23
424
原创 Vue中的插槽
1.匿名插槽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>匿名插槽</title> <script src="vue.js">&am
2019-02-21 21:29:26
146
原创 组件的参数校验和非props特性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父组件向子组件传值</title> <script src="vue.js">&l
2019-02-20 21:59:36
211
原创 Vue中的组件传值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父子组件传值</title> <script src="vue.js"></
2019-02-20 21:15:00
231
原创 vue组件使用过程中的注意点
一.使用is属性根据HTML规范，<table>、<ul>、<ol>、<select>等元素只能包含特定元素，当模板标签在使用有限制性的元素，在渲染时就会出现bug。组件定义的内容会被作为无效内容提升到外部导致渲染出错。需要借助is 特性。<!DOCTYPE html><html lang="en">&a
2019-02-20 19:37:50
256
原创 Vue基础
1.组件实例化vm实例有很多属性和方法，在使用$destroy()方法之后，则销毁了Vue实例，此刻控制台可以修改数据，但是不会显示在页面上面，该实例失去双向绑定的功能。2.Vue的生命周期结合代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...
2019-02-16 23:29:30
465
1
原创 apply()，call()和bind()
1.apply()，call()和bind()的相同点三者都可以把一个函数应用到其他对象上；都是用来改变函数内部的this的指向的；2.call()和apply()相同点：都是调用一个对象的一个方法，用另一个对象替换当前对象（功能相同）例如： B.call(A, args1,args2);即A对象调用B对象的方法 ，且向调用的方法传入args1,args2......参数 ...
2019-02-13 23:22:39
205
原创 普通函数和箭头函数的this
普通函数的this1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj2. 调用的时候，没有任何前缀，则指向window，new的时候，指向new出来的对象。3.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window4.在严格模式下,没有直接调用者的函数中的this是 unde...
2019-02-11 22:06:50
5156
原创 优雅降级和渐进增强
一.背景介绍优雅降级和渐进增强印象中是随着css3流出来的一个概念。由于低级浏览器不支持css3，但css3的效果又太优秀不忍放弃，所以在高级浏览中使用css3而低级浏览器只保证最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。二.什么是渐进增强、优雅降级？ 渐进增强 （progressive enh...
2019-02-11 18:55:44
176
转载 从输入url到页面完全加载发生了什么？——前端角度
这是一道经典的面试题，这道面试题不光前端面试会问到，后端面试也会被问到。这道题没有一个标准的答案，它涉及很多的知识点，面试官会通过这道题了解你对哪一方面的知识比较擅长，然后继续追问看看你的掌握程度。当然我写的这些也只是我的一些简单的理解，从前端的角度出发，我觉得首先回答必须包括几个基本的点，然后在根据你的理解深入回答。浏览器的地址栏输入url并且按下回车 浏览器查找当前url是否存...
2019-01-24 18:04:21
210
原创 回流（重排）和重绘
参考：https://segmentfault.com/a/1190000017329980https://www.cnblogs.com/dujingjie/p/5784890.html浏览器的渲染过程从上面这个图中，可以看出浏览器的渲染过程如下：解析HTML，生成DOM树 解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树（Render Tree...
2019-01-18 19:00:56
1485
原创 阿里巴巴矢量图标库使用步骤
1.登陆官网，选择需要的图标，将其添加至项目，然后下载至本地。2.解压文件。3.在工程目录下新建CSS文件夹，在CSS文件夹之后新建iconfont文件夹，并且将下面四个文件复制在CSS/iconfont文件夹之下。 4.将下载的图标文件中的iconfont.css复制到CSS文件夹之下，与iconfont文件夹在同一层。5.至此，目录如下：6.双击打开icon...
2019-01-18 15:02:51
11801
2
原创 Vue工程创建步骤
1.Vue-cliVue-cli是Vue的脚手架工具，是帮助我们编写好Vue.js基础代码的工具，Vue-cli可以帮助我们完成目录结构、本地调试、代码部署、热加载、单元测试等工作。安装：node -v ,查看node的版本，node的版本需要在4以上 npm install -g vue-cli，安装vue脚手架 vue,查看命令，如下安装成功 vue list，查看可以使用的...
2019-01-17 13:27:06
174
原创 Vue.js的核心思想
数据驱动DOM树数据的一种自然映射如果没有使用Vue.js，使用Ajax从后端获取数据，然后手动触发DOM改变，或者通过前端交互改变一些数据，仍然需要手动的触发一些DOM的改变，手动改变DOM不仅是一个繁琐的过程，而且非常容易出错。使用Vue.js 之后，省去了手动触发DOM的操作，在Vue.js里面，只需要改变数据，Vue.js通过directive指令对DOM进行一层封装，当数据发...
2019-01-17 10:48:09
1102
原创 前序遍历、中序遍历和后续遍历
树的遍历顺序大体分为三种：前序遍历（先根遍历、先序遍历），中序遍历（中根遍历），后序遍历（后根遍历）。 如图所示二叉树： 前序遍历：前序遍历可以记为根左右，若二叉树为空，则结束返回。前序遍历的规则：（1）访问根节点（2）前序遍历左子树（3）前序遍历右子树这里需要注意：在完成第2,3步的时候，也是要按照前序遍历二叉树的规则完成。前序遍历的输出结果：AB...
2019-01-16 09:41:11
65170
3
原创 gitHub配置及其上传项目
1.配置 1.登陆注册github 2.打开git bush ,输入指令： ssh-keygen -t rsa -C "xxxxxx@qq.com"3.在打开的位置下面找到.ssh文件，找到id_rsa.pub打开，复制里面的内容。 4.点击gitHub上面右上角头像里面的setting进入如下页面，将复制的秘钥输入并且确定。5.在git bush 里面...
2019-01-08 18:38:17
228
原创 git——合并和删除分支
合并分支语法： git merge 分支名删除分支语法： git branch -d 分支名 git branch --delete 分支名归纳：git 的分支原理实际上就是通过HEAD指针来实现的，也就是说通过指针来记住快照。 ...
2019-01-08 14:01:23
550
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人