- 博客(58)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 获取今天到前十五天之间的日期
日期处理转载 https://www.cnblogs.com/pnz-bug/p/8080414.html<!DOCTYPE html><br><html><head> <meta charset="UTF-8"> <title></title></head><body> <script type="application/javascript">
2020-07-06 15:37:50
887
原创 JavaScript/TypeScript变量声明
变量声明前言var 声明作用域规则前言面试过程中, 总有一些面试官喜欢问概念性的东西, 我懂, 但是我忘了专业名词…let 和 const是 JavaScript 里相对较新的变量声明方式。let 在很多方面与 var 是相似的，但是可以帮助大家避免在 JavaScript 里常见一些问题。const 是对 let 的一个增强，它能阻止对一个变量再次赋值。因为 TypeScript 是 JavaScript 的超集，所以它本身就支持let 和const。 下面我们会详细说明这些新的声明方式以及为什么
2020-05-29 18:23:29
630
原创 Vue面试相关问题整理
Vue面试相关问题整理前言什么是vue生命周期Vue生命周期总共有几个阶段Vue的双向数据绑定原理是什么vue组件间通信六种方式对于MVVM的理解什么是MVCMVVM与MVC区别Vue 组件 data 为什么必须是函数，data什么时候可以适用对象?vue中 key 值的作用什么是vue的计算属性computed 和 watch 的差异delete和Vue.delete删除数组的区别v-if与v-show的用法与区别vuex是什么？怎么使用？哪种功能场景使用它？vuex中的变量是响应式的,页面刷新后数据无法
2020-05-16 01:22:26
464
原创 前端EventEmitter,发布/订阅模式,Vue双向数据绑定
前端EventEmitter,发布/订阅模式前言实现拓展Vue 中非父子组件组件通信通俗易懂了解Vue双向绑定原理及实现Vue双向绑定原理，教你一步一步实现双向绑定参考的代码1参考代码2`推荐`[Source Code - JavaScript - 学习优雅的编码](https://segmentfault.com/a/1190000015043262)参考前言发布订阅模式，很多地方都用到的一种模式，简单的说就是预定一件事情，时机成熟通知你，比如我们nodejs中的fs的读写文件的流，消息事件的触发等都
2020-05-12 21:01:52
643
原创 JS面试相关问题整理
标题前言参考JS基本数据类型和引用数据类型什么是堆？什么是栈？它们之间有什么区别和联系？内部属性 [[Class]] 是什么？介绍 js 有哪些内置对象？null 和 undefined 的区别？从(内存)来看 null 和 undefined 本质的区别是什么？如何获取安全的 undefined 值？JavaScript 原型，原型链？ 有什么特点？调用 person1 的“实际定义在 Obje...
2020-05-03 12:42:41
312
转载 事件冒泡和捕获、事件委托
标题前言问题引入：addEventListener参数1.冒泡2.捕获3.当一个元素绑定两个事件，一个冒泡，一个捕获总结事件委托参考前言要理解DOM相关事件，我们先要理解“事件流”这个概念，事件流描述的是从页面中接收事件的顺序。事件冒泡：事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点或文档。事件捕获：事件开始由不太具体的节点接收，然后逐级向下传播到最具体的节点。它与事件冒泡...
2020-05-02 22:52:10
298
原创 HTTP面试相关问题整理
HTTP面试相关问题整理前言参考http状态码有那些？HTTP是什么？GET和POST两种基本请求方法的区别?即时通讯的实现，短轮询、长轮询、SSE长连接 和 WebSocket 间的区别？当你在浏览器中输入 Google.com 并且按下回车之后发生了什么？说说TCP传输的三次握手四次挥手策略断开一个TCP连接则需要“四次握手”：为什么服务器在接到断开请求时不立即同意断开说说网络分层里七层模型是...
2020-04-25 23:39:29
589
原创 TCP与UPD区别？TCP三次握手和四次挥手详解
TCP三次握手和四次挥手前言TCP和UDP的区别TCP三次握手过程理解过程：简单过程：详细过程：详细过程分析实例TCP四次挥手为什么服务器在接到断开请求时不立即同意断开？过程理解过程：详细过程：参考前言TCP(Transmission Control Protocol)-传输控制协议。TCP是主机对主机层的传输控制协议，提供可靠的连接服务，采用三次握手确认建立一个连接:位码即tcp标志位,...
2020-04-25 15:55:18
299
转载 Web端即时通讯技术简析:轮询、长轮询、长连接、websocket
前言Web端即时通讯技术：即时通讯技术简单的说就是实现这样一种功能：服务器端可以即时地将数据的更新或变化反应到客户端，例如消息即时推送等功能都是通过这种技术实现的。但是在Web中，由于浏览器的限制，实现即时通讯需要借助一些方法。这种限制出现的主要原因是，一般的Web通信都是浏览器先发送请求到服务器，服务器再进行响应完成数据的现实更新。 实现Web端即时通讯的方法：实现即时通讯主要有四种方式，...
2020-04-25 00:06:14
503
转载 Web 通信 之 长连接、长轮询（long polling）
目录前言基于HTTP的长轮询简单实现Web 通信 之 长连接、长轮询（long polling）一、什么是长连接、长轮询？二、长连接、长轮询的应用场景三、优缺点四、实现原理五、程序设计1、普通轮询 Ajax方式2、普通轮询 iframe方式3、长连接iframe方式4、ajax实现长连接六、总结参考前言转载仅是为了个人方便参考学习，技术或许过时了，推荐使用websocket。基于HTTP的长...
2020-04-24 23:30:28
583
原创 HTML面试相关问题整理
HTML面试相关问题整理前言HTML5语义化b 与 strong 的区别和 i 与 em 的区别？浏览器架构为什么最好把 CSS 的``标签放在``之间？为什么最好把 JS 的`前言写完CSS面试相关问题整理，继续整理。HTML5语义化什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。好处易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎...
2020-04-24 16:53:51
428
原创 CSS面试相关问题整理
CSSCSS 选择器的优先级是如何计算的？css盒子模型CSS 选择器的优先级是如何计算的？css盒子模型盒模型的概念:网页中，每一个元素都占有一定的空间，无论是div、h1~h6、还是p，都可以看成是盒子。盒模型的概念:网页中，每一个元素都占有一定的空间，无论是div、h1~h6、还是p，都可以看成是盒子。盒模型的组成: content（内容）、padding（内边距）、borde...
2020-04-23 23:16:09
521
原创 CSS布局系列
前言一般布局前可以先重置一下样式，如这个仓库，使用normalize.css和reset一些常用的属性（如清除浮动等）/** * 1. Avoid the IE 10-11 `min-height` bug. * 2. Set `flex-shrink` to `0` to prevent some browsers from * letting these items shrin...
2020-04-23 17:46:20
232
转载 Holy Grail 圣杯布局详解
IntroductionI’m sorry. Really. I didn’t name it. I don’t mean to overstate its importance or trivialize the other and rather weightier Holy Grails.But the name’s out there, and we all know what it...
2020-04-23 17:42:49
843
转载 前端响应式布局原理与方案（详细版）
引言本文转自： 前端响应式布局原理与方案（详细版）响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。...
2020-04-22 16:40:16
595
原创 css元素水平垂直居中详解
css元素水平垂直居中导读水平居中垂直居中水平垂直居中参考导读一般常用水平或垂直居中主要使用的属性为margin、position:absolute;、transform、flex、vertical-align、text-align、line-height…页面结构vertical-align: middle;针对行内块元素使用 , 如 input 对齐, img 去掉下边空白,...
2020-04-21 23:36:15
257
原创 CSS块级格式化上下文（BFC）与清除浮动详解
BFC1. 什么是BFC2.BFC元素所具有的特性3.如何创建BFC4.BFC的应用场景1. 解决块级元素垂直方向的边距重叠问题2.解决元素浮动后发生重叠的问题(自适应布局)右边自适应布局中间自适应布局3.清除浮动1.`overflow: hidden`清除浮动（计算BFC浮动元素高度）2.`clear:both` 清除浮动3.利用伪元素和BFC清除浮动总结参考1. 什么是BFCBFC...
2020-04-21 16:27:30
317
转载 JS前端进阶/面试
this指向我们知道this绑定规则一共有5种情况：1、默认绑定（严格/非严格模式）2、隐式绑定3、显式绑定4、new绑定5、箭头函数绑定其实大部分情况下可以用一句话来概括，this总是指向调用该函数的对象。var num = 1;var myObject = { num: 2, add: function() { this.num = 3; ...
2020-04-20 00:55:59
424
原创 JS节流和防抖函数的理解和实现
参考演示网站木易杨7分钟理解JS的节流、防抖及使用场景Js中的防抖与节流/** * Created by thephpjo on 21.04.14. */var helpers = { /** * debouncing, executes the function if there was no new event in $wait milliseconds * ...
2020-04-20 00:48:54
511
转载 详细解析赋值、浅拷贝和深拷贝
@TOC一、赋值（Copy）赋值是将某一数值或对象赋给某个变量的过程，分为下面 2 部分基本数据类型：赋值，赋值之后两个变量互不影响引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响对基本类型进行赋值操作，两个变量互不影响。let a = "muyiy";let b = a;console.log(b);// muyiya = "change";...
2020-04-19 15:22:44
387
转载 ES6 系列之 WeakMap
ES6 系列之 WeakMap前言特性应用1. 在 DOM 对象上保存相关数据2. 数据缓存3. 私有属性深拷贝上的应用ES6 系列前言(我是在看muyiy的深拷贝防止循环引用用到WeakMap就找到这篇文章)我们先从 WeakMap 的特性说起，然后聊聊 WeakMap 的一些应用场景。特性1. WeakMap 只接受对象作为键名const map = new WeakMap();...
2020-04-18 22:37:51
276
原创 使用mockjs生成随机手机号码
使用mockjsconst Mock = require('mockjs')// 拓展mockjsMock.Random.extend({ phone: function () { var phonePrefixs = ['132', '135', '189'] // 自己写前缀哈 return this.pick(phonePrefixs) + Mock.mock(/\...
2020-04-02 00:01:15
15656
3
原创 eggjs实现文件下载
参考文章exceljs-democreateReadStream用法egg-download exampleexceljseggjs怎么实现文件下载？-知乎实现// 简单的const filePath = '/path/to/file'this.ctx.attachment(filePath)// 相当于设置响应头 'content-disposition': `attachm...
2020-03-22 17:45:48
6492
原创 Vue中事件绑定和vm.$listeners
问题最近看别人的源码, 看到一个v-on="on"不太理解, 应为我们通常绑定事件都是v-on:click="event"这样来的,于是自己试试了实践在子组件中设置v-on="{ change: test }" 发现能正常绑定,emm。于是我们可以这样组封装一些组件<template> <el-select v-model="newValue" v-bind=...
2020-02-22 23:43:28
1383
原创 Vue中JSX用法(杂文,个人标记)
说明杂文, crud组件中遇到JSX一些(babel插件)写法, 如不小心点进来了, 可以参考下列教程.参考:JSXbabel-plugin-transform-vue-jsxvuejs/jsx (Babel Preset JSX)在Vue中使用JSX的正确姿势Vue如何支持JSX语法代码// 方式 1:<el-button size='mini' on-click={t...
2020-02-12 17:19:11
479
原创 页面返回顶部过渡-Window.scrollTo()
滚动到文档中的某个坐标。(有过渡效果)参考MDN文档语法window.scrollTo(x-coord,y-coord )window.scrollTo(options)参数x-coord 是文档中的横轴坐标。y-coord 是文档中的纵轴坐标。options 是一个包含三个属性的对象:top 等同于 y-coordleft 等同于 x-coordbehavior ...
2020-02-05 00:18:59
1938
原创 js获取元素宽高和位置的几种方法&&点击事件坐标
一.获取宽高：1.行内样式获取宽高：var dom= document.getElementById("div");var divWidth = dom.style.width;var divHeight = dom.style.height;注：只能通过行内样式才能获取到。获取到的元素宽高不包括padding和border2.offset/client/scroll方法获取：va...
2020-02-04 23:42:55
3242
原创 getBoundingClientRect获取DOM元素获取的宽和高以及位置
dom.getBoundingClientRect()属性说明:width, height: 元素的实际宽度 / 宽度left: 元素左边距离视口左边的距离right: 元素右边距离视口左边的距离top: 元素上边距离视口上边的距离bottom: 元素下边距离视口上边的距离注意:宽高包含padding, border距离根据视口/文档?为起点, 而不是父元素x, y: 元素...
2020-02-04 22:57:49
2338
1
转载 JS中DOM元素获取的宽和高的方法
获取网页窗体方法网页可见区域宽： document.body.clientWidth （可变）网页可见区域高： document.body.clientHeight （可变）网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： document.bod...
2020-02-04 22:08:09
834
原创 webpack中的require.context说明与应用
问题:req.keys().map(req)不太懂,req函数为什么返回这个结果代码export const iconList = () => { const req = require.context('@/icons', false, /\.js$/) console.dir(req) //fn console.dir(req.id) // ./src/icons sy...
2020-01-29 18:27:50
324
转载 针对js后缀文件代码提示失效问题解决
问题：使用VS Code开发时，针对js文件代码提示失效。问题描述：最近使用react开发项目，在使用过程中发现vscode在初始化ts/js语言的支持时代码提示失效，而在HTML的script标签中提示仍有效。问题原因：后经GitHub上vscode项目issue中得知因为初始化ts/js语言支持时，node_modules文件夹下文件导致初始化失败。也可以自己新建一个项目来验证，当项...
2020-01-27 21:16:59
531
原创 VSCode配置格式化工具(Prettier/Vetur/ESLint)和jsconfig.json
网上很多配置,有的过时了, 有的很杂, 自己看了下文档,简单配置了以下, 顺便记录下来。准备用vue-cli建好项目之后,在VSCode安装插件ESLint document,Prettier - Code formatter document, Vetur document。CLI installLaunch VS Code Quick Open (Ctrl+P)ext instal...
2020-01-27 20:43:41
4166
原创 如何在Javascript和Sass之间共享变量
有时候我们需要获取样式文件中的变量, 可以利用:export {}可以导出需要的变量。案例是在webpack中使用。安装npm install sass-loader node-sass webpack --save-dev配置// webpack.config.jsmodule.exports = { module: { rules: [ { ...
2020-01-27 18:42:36
568
1
原创 前端文章收集(长期更新)2020-02-04
H5C3CSS3原生变量varCSS/CSS3中的原生变量var详解以及布局响应式网页扩展结合:root使用:root { --1: #369;}body { background-color: var(--1);}
2020-01-27 18:33:36
587
原创 一个简单的呼吸灯效果
一个简单的呼吸灯效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
2019-12-14 14:20:43
1249
原创 简单写一个分享弹出框
从实习入职后一直在写小程序,感觉整个人有点荒废了…想辞职,怕找不到工作(主要是当初不努力,上了个三流本科,很多公司根本不给面试机会…还有怕没钱交房租吃饭,不想向家里要),呜呜呜呜提醒自己: 看后面的拓展今天分享一个类似下面的弹出框,给新入坑的前端小伙参考一下吧来自搜狐新闻详情直接上代码大家应该看得懂<!DOCTYPE html><html lang="en"&...
2019-11-10 16:08:24
317
原创 canvas应用
提取自: Silva Zhou视频教程画圆,外圆被截取?注意: 画圆的半径是以宽度(lineWidth)的一半画的,所以只需要减去一半就可以了<body> <canvas id="clock" width="200px" height="200px"></canvas> <script> let clock = document...
2019-11-04 11:17:39
137
原创 javascript删除对象上的属性
任务删除 age 属性let obj = { name: 'xiaoming', age: 11, id: 2}解决方法1:对象的解构let {age, ...rest} = objconsole.log(age) //11console.log(rest) //{ name: 'xiaoming', id: 2 }对象的解构与数组有一个重要的不同。数组的元素是按次序排列的...
2019-11-01 17:38:03
8105
原创 Vue--关于子component使用props接收父component异步数据的注意点
关键字: props异步场景:用uniapp写了个图片的组件, 父组件通过ajax获取后台图片列表数据, 通过子组件的props接收,然而在子组件的生命周期获取的数据为 []原因:在vue中,父组件调用ajax的接口获得数据,然后赋值给data中的初始值,然后通过props传给子组件,子组件在created的时候,获得的props的值有的时候是undefined,因为ajax是异步请求,执...
2019-10-25 16:08:39
409
原创 canvas个人笔记
beginPath开启新的(独立)路径和closePath自动闭合(三角形闭合),没有对应的关系,不是一个东西独立路径:rect() 不是独立路径,样式会被覆盖/*绘制矩形路径 不是独立路径*/ /*ctx.rect(100,100,200,100); ctx.fillStyle = 'green'; ctx.stroke(); ctx.fill();*//...
2019-10-17 15:04:35
115
debounce_throttle.rar
2020-04-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人