![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 80
tinfengyee
这个作者很懒,什么都没留下…
展开
-
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 · 468 阅读 · 0 评论 -
前端EventEmitter,发布/订阅模式,Vue双向数据绑定
前端EventEmitter,发布/订阅模式前言实现拓展Vue 中非父子组件组件通信通俗易懂了解Vue双向绑定原理及实现Vue双向绑定原理,教你一步一步实现双向绑定参考的代码1参考代码2`推荐`[Source Code - JavaScript - 学习优雅的编码](https://segmentfault.com/a/1190000015043262)参考前言发布订阅模式,很多地方都用到的一种模式,简单的说就是预定一件事情,时机成熟通知你,比如我们nodejs中的fs的读写文件的流,消息事件的触发等都原创 2020-05-12 21:01:52 · 655 阅读 · 0 评论 -
JS面试相关问题整理
标题前言参考JS基本数据类型和引用数据类型什么是堆?什么是栈?它们之间有什么区别和联系?内部属性 [[Class]] 是什么?介绍 js 有哪些内置对象?null 和 undefined 的区别?从(内存)来看 null 和 undefined 本质的区别是什么?如何获取安全的 undefined 值?JavaScript 原型,原型链? 有什么特点?调用 person1 的“实际定义在 Obje...原创 2020-05-03 12:42:41 · 326 阅读 · 0 评论 -
事件冒泡和捕获、事件委托
标题前言问题引入:addEventListener参数1.冒泡2.捕获3.当一个元素绑定两个事件,一个冒泡,一个捕获总结事件委托参考前言要理解DOM相关事件,我们先要理解“事件流”这个概念,事件流描述的是从页面中接收事件的顺序。事件冒泡:事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点或文档。事件捕获:事件开始由不太具体的节点接收,然后逐级向下传播到最具体的节点。它与事件冒泡...转载 2020-05-02 22:52:10 · 311 阅读 · 0 评论 -
Web端即时通讯技术简析:轮询、长轮询、长连接、websocket
前言Web端即时通讯技术:即时通讯技术简单的说就是实现这样一种功能:服务器端可以即时地将数据的更新或变化反应到客户端,例如消息即时推送等功能都是通过这种技术实现的。但是在Web中,由于浏览器的限制,实现即时通讯需要借助一些方法。这种限制出现的主要原因是,一般的Web通信都是浏览器先发送请求到服务器,服务器再进行响应完成数据的现实更新。 实现Web端即时通讯的方法:实现即时通讯主要有四种方式,...转载 2020-04-25 00:06:14 · 531 阅读 · 0 评论 -
Web 通信 之 长连接、长轮询(long polling)
目录前言基于HTTP的长轮询简单实现Web 通信 之 长连接、长轮询(long polling)一、什么是长连接、长轮询?二、长连接、长轮询的应用场景三、优缺点四、实现原理五、程序设计1、普通轮询 Ajax方式2、普通轮询 iframe方式3、长连接iframe方式4、ajax实现长连接六、总结参考前言转载仅是为了个人方便参考学习,技术或许过时了,推荐使用websocket。基于HTTP的长...转载 2020-04-24 23:30:28 · 628 阅读 · 0 评论 -
HTML面试相关问题整理
HTML面试相关问题整理前言HTML5语义化b 与 strong 的区别和 i 与 em 的区别?浏览器架构为什么最好把 CSS 的``标签放在``之间?为什么最好把 JS 的`前言写完CSS面试相关问题整理,继续整理。HTML5语义化什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。好处易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。有利于SEO,搜索引擎...原创 2020-04-24 16:53:51 · 440 阅读 · 0 评论 -
CSS面试相关问题整理
CSSCSS 选择器的优先级是如何计算的?css盒子模型CSS 选择器的优先级是如何计算的?css盒子模型盒模型的概念:网页中,每一个元素都占有一定的空间,无论是div、h1~h6、还是p,都可以看成是盒子。盒模型的概念:网页中,每一个元素都占有一定的空间,无论是div、h1~h6、还是p,都可以看成是盒子。盒模型的组成: content(内容)、padding(内边距)、borde...原创 2020-04-23 23:16:09 · 534 阅读 · 0 评论 -
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 · 853 阅读 · 0 评论 -
前端响应式布局原理与方案(详细版)
引言本文转自: 前端响应式布局原理与方案(详细版)响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果,分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。...转载 2020-04-22 16:40:16 · 612 阅读 · 0 评论 -
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 · 343 阅读 · 0 评论 -
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 · 439 阅读 · 0 评论 -
页面返回顶部过渡-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 · 1994 阅读 · 0 评论 -
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 · 3414 阅读 · 0 评论 -
getBoundingClientRect获取DOM元素获取的宽和高以及位置
dom.getBoundingClientRect()属性说明:width, height: 元素的实际宽度 / 宽度left: 元素左边距离视口左边的距离right: 元素右边距离视口左边的距离top: 元素上边距离视口上边的距离bottom: 元素下边距离视口上边的距离注意:宽高包含padding, border距离根据视口/文档?为起点, 而不是父元素x, y: 元素...原创 2020-02-04 22:57:49 · 2433 阅读 · 1 评论 -
JS中DOM元素获取的宽和高的方法
获取网页窗体方法网页可见区域宽: document.body.clientWidth (可变)网页可见区域高: document.body.clientHeight (可变)网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.bod...转载 2020-02-04 22:08:09 · 864 阅读 · 0 评论 -
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 · 327 阅读 · 0 评论 -
如何在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 · 579 阅读 · 1 评论 -
简单写一个分享弹出框
从实习入职后一直在写小程序,感觉整个人有点荒废了…想辞职,怕找不到工作(主要是当初不努力,上了个三流本科,很多公司根本不给面试机会…还有怕没钱交房租吃饭,不想向家里要),呜呜呜呜提醒自己: 看后面的拓展今天分享一个类似下面的弹出框,给新入坑的前端小伙参考一下吧来自搜狐新闻详情直接上代码大家应该看得懂<!DOCTYPE html><html lang="en"&...原创 2019-11-10 16:08:24 · 323 阅读 · 0 评论 -
Vue--关于子component使用props接收父component异步数据的注意点
关键字: props异步场景:用uniapp写了个图片的组件, 父组件通过ajax获取后台图片列表数据, 通过子组件的props接收,然而在子组件的生命周期获取的数据为 []原因:在vue中,父组件调用ajax的接口获得数据,然后赋值给data中的初始值,然后通过props传给子组件,子组件在created的时候,获得的props的值有的时候是undefined,因为ajax是异步请求,执...原创 2019-10-25 16:08:39 · 430 阅读 · 0 评论 -
canvas个人笔记
beginPath开启新的(独立)路径和closePath自动闭合(三角形闭合),没有对应的关系,不是一个东西独立路径:rect() 不是独立路径,样式会被覆盖/*绘制矩形路径 不是独立路径*/ /*ctx.rect(100,100,200,100); ctx.fillStyle = 'green'; ctx.stroke(); ctx.fill();*//...原创 2019-10-17 15:04:35 · 126 阅读 · 0 评论 -
h5c3等个人笔记
2倍图,3倍图使用scss@mixin bg-image($url) { background-image: url($url + "@2x.png"); @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){ background-image: url($url + "@3x.png") ...原创 2019-10-15 11:48:22 · 95 阅读 · 0 评论 -
正则表达式(个人笔记)
描述\s匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。\S匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。\b匹配一个单词边界,也就是指单词和空格间的位置。例如, ‘er\b’ 可以匹配"never" 中的 ‘er’,但不能匹配 “verb” 中的 ‘er’。...原创 2019-10-14 17:06:20 · 318 阅读 · 0 评论 -
canvas相关数学函数(个人笔记)
sincostanatan(y/x) -pi/2 ~ pi/2atan2(y-y0, x-x0) -pi ~ pi求roate角度// atangetAngle(start, end) { var diff_x = end.x - start.x, diff_y = end.y - start.y; if (diff_x >...原创 2019-10-14 11:09:56 · 262 阅读 · 0 评论 -
javascript一些杂的东西
关于前端没传值导致undefine问题const params = {id, status, title} = req.query这样接收变量, 没有收到的值会自动省略掉原先就用 if 或者三元表达式 逐个接收原创 2019-08-15 11:48:21 · 136 阅读 · 1 评论 -
node.js中path模块解析(resolve,join)
重点 -> 核心区别:path.resolve构成绝对路径后就返回,path.join 用于连接路径,会连接完所有的路径node的path模块经常被使用,但是path的resolve和join两个方法很容易混淆,本篇主要介绍二者的核心区别及各自的使用方式。path.solvepath.resolve([from ...], to)1,将to解析为绝对路径;2,给定的路径从左向右处...转载 2019-07-19 21:25:36 · 414 阅读 · 0 评论 -
ES6基础
资料来源 imooc推荐es6入门教程 ECMAScript 6 入门-ruanyifenglesson1-let,const声明变量,块级作用域;注意:const a = 1;a=2;//errorconst k={a:1};k.b=2;//是对的,因为他的意思的声明的引用不可变;function test(){ // for(let i=1;i<3;i++){ ...原创 2019-06-03 21:26:08 · 329 阅读 · 0 评论