- 博客(61)
- 收藏
- 关注
RSS订阅原创 webpack面试问题
loader与plugin区别Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less…），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。样式3-4 使用 SCSS · 深入浅出 WebpackPostCSS 是一个 CSS 处理工具，和 SCSS 不同的地方在于它通过插件机制可以灵活的扩展其支持的特性，而不是像 SCSS 那样语法是固定的。 PostCSS 的用处非常多，包括给 CSS 自动加前缀、使用下一代 CSS 语法等，目前越来越多的人开始用它
2020-07-30 15:34:12
891
2
原创 vuex
mutation为什么不能异步操作？vuex原理简述核心原理⠀ 非常棒根据 Vuex 的官方文档：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 Vuex 状态自管理应用包含以下几个部分：State：驱动应用的数据源Getters：用于从状态管理库中访问数据Mutations：处理程序函数，用于在状态树中执行数据修改Actions：提交Mutations的函数。Mutations
2020-07-30 15:25:40
327
原创 vue-router
1、模式原生 js 实现一个前端路由 router - 掘金谈谈前端路由 - 掘金阿里P7：你了解路由吗？ - 掘金在传统的 Web 开发中，浏览器根据地址栏的 URL 向服务器发送一个 HTTP 请求，服务器根据 URL 返回一个 HTML 页面。这种情况下，一个 URL 对应一个 HTML 页面， 一个 Web 应用包含很多 HTML 页面，这样的应用就是多页面应用；在多页面应用中，页面路由的控制由服务器负责，这种路由方式称为后端路由。在多页面应用中，每次页面切换都需要向服务器发送一次请求，页
2020-07-30 15:24:14
299
原创 vue篇
nextTickhttps://juejin.im/post/5ae3f0956fb9a07ac90cf43ehttps://juejin.im/post/5be692936fb9a049e129b741 非常棒Vue.js在默认情况下，每次触发某个数据的 setter 方法后，对应的 Watcher 对象其实会被 push 进一个队列 queue 中，在下一个 tick 的时候将这个队列 queue 全部拿出来 run一遍。this.$nextTick也为事件队列push进入了新的一个callb
2020-07-30 15:22:50
632
原创 typescript
TypeScript 最重要的作用就是给JavaScript加上静态类型检查https://github.com/xcatliu/typescript-tutorialhttps://juejin.im/post/5b3b9729f265da0f4b7a6e08#heading-171、有哪些基础类型2、typescript中type和interface有什么区别？不知道写的什么狗屎，就是记录吧，之后整理整理...
2020-07-30 14:43:16
222
原创 js基础问题
new做了什么？模拟一个newfunction create() { // 创建一个空的对象 var obj = new Object(), // 获得构造函数，arguments中去除第一个参数 Con = [].shift.call(arguments); // 链接到原型，obj 可以访问到构造函数原型中的属性 obj.__proto__ = Con.prototype; // 绑定 this 实现继承，obj 可以访问到构造函数中的属性 var ret =
2020-07-29 19:21:31
738
原创 js基础问题
1、 promise里面如果直接return了？链接上来： https://juejin.im/post/5e58c618e51d4526ed66b5cfPromise.resolve(1) .then(2) .then(Promise.resolve(3)) .then(console.log).then 或者 .catch 的参数期望是函数，传入非函数则会发生值穿透。第一个then和第二个then中传入的都不是函数，一个是数字类型，一个是对象类型，因此发生了穿透，将resolve(
2020-07-27 19:18:01
234
原创 拖拽
拖拽1、被拖拽的元素：需要在可拖动元素上，设置draggable=“true”当拖拽这个元素时触发的事件：dragstart：拖拽开始的时候drag: 在元素被拖动时反复触发dragend：拖拽完成时目标元素的事件：当被拖拽元素进入到目标元素时时，会触发dragenter事件被拖拽元素在目标元素上移动时，会触发dragover事件当被拖动元素没有放下就离开目的地元素时，会触发dragleave事件被拖拽元素在目标元素上同时鼠标放开时，会触发drop事件dragenter和drag
2020-07-27 19:04:08
433
原创 css样式
55个提高你CSS开发效率的必备片段1、布局经常问到大约就是两栏布局以及三栏布局2、css样式权重顺序：!import>内联>id>class>标签>通配符>继承>默认计算规则：内联：1000Id:100class（属性选择器）: 10标签1通配符： 0第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为001
2020-07-27 19:02:03
559
原创 性能相关
1、首屏和白屏时间如何计算10分钟彻底搞懂前端页面性能监控 - 掘金const timing = window.performance.timing*白屏时间*timing.responseEnd – timing.fetchStart首屏时间timing.loadEventStart – timing.fetchStart2、gzip压缩这是性能优化里面的一个环节压缩比例非常大：能压缩50%以上需要浏览器与nigix配合使用浏览器需要在请求头中添加accept-encoding:g
2020-07-27 18:48:01
197
原创 csxf与xss
老规矩（呸，哪里来的规矩），先附上链接：https://juejin.im/post/5e8fe74251882573744c5fbeCSRF概念CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证(cookies 等)，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。过程：攻击流程受害者登录 a.com，并保留了登录凭证（Cookie）
2020-07-27 18:34:01
916
原创 网络相关的面试
跨域jsonp的简易实现function jsonp(url, callback) { let script = document.createElement('script) let src = url + '?callback=' + callback script.src = src document.getElementByTagName('head')[0].append(script)}可以看到，一个 JSONP 的步骤实质是：客户端发送 script 请求，参数中带着处
2020-07-24 19:17:37
344
原创 看的非常不错的文章输出，基本都是面试的
2万字 | 前端基础拾遗90问 - 掘金https://juejin.im/post/5d59f2a451882549be53b170#heading-17 （vue）
2020-07-24 19:01:14
163
原创 扫描二维码登入PC的工作原理
不知道从哪里看的了，有侵权找我删，我只是想记录一下????1 pc端随机生成一个含有唯一uid的二维码，并与服务器建立一个长连接；2 手机扫描二维码，解析出二维码中的uid，并把这个uid和手机端的用户密码进行绑定，上传给服务器；3 服务器获得客户端信息之后，pc端的长连接轮询操作会获得该消息，显示该账号的信息；4 pc端会再开一个长连接与手机端保持通信，等待手机端确认登陆后，获得服务器授权的token，就可以在pc端登陆进行正常通信了。...
2020-07-24 19:00:22
1025
原创 不成熟的网罗的面经
面经先这样看着吧，之后再整理一番格式以及答案算法题：字母数组，输出出现最少次数的那个字母ts的东西Vue的 双向绑定 原理Vue指令的使用v-html有没有对xss做处理组件间怎么通讯发布订阅模式业务设计：你一个带搜索框带显示列表带侧滑框的ui，你会怎么设计这个组件用同步的写法，并且可以外部控制执行逻辑行进写一段异步代码， 对上一个请求有依赖的异步，请求之间还需要夹杂其他处理逻辑（ es6里yield和next）webpack的东西，打包流程
2020-07-24 18:49:07
246
原创 js判断数据类型
1. typeoftypeof可以判断出基础数据类型以及Object、function，区分不出Object的具体类型 let a typeof a //undefined a = 123 typeof a //number a = '124' typeof a //string a = null typeof a //object a = {d: 124} typeof a...
2020-01-04 18:01:33
198
原创 vue生命周期来一波
虽说用vue有一年三个月？大概吧，但是说生命周期，我居然说不出来，我果然是个菜的，????。生命周期对我们来说很重要，因为在哪个阶段做哪些操作还是要掌握的，不然可能会出bug，出了bug，扣绩效，扣年终奖，可怕可怕，当然这是我自己臆想的，臆想的小姐姐总是最美的。偶吼吼????看看之下的代码，然后看控制台输出，发现了什么？<template> <div id="app"> ...
2019-11-07 10:41:30
237
原创 模拟实现call、apply以及bind
作用.apply.call.bind 都是为了改变函数运行时上下文(this指向)而存在的。区别：三者的第一个参数都是this的指向apply的第二个参数是个数组，而call与bind的第二个以及之后的参数都是函数的入参bind不是立即执行，而call和apply会call的简单模拟实现思路：函数定义在哪里？因为是对全局有效的，所以定义至Function的原型对象中参数接...
2019-10-13 17:15:52
187
原创 微任务与宏任务
微任务与宏任务概念同步任务与异步任务微任务与宏任务微任务宏任务合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入概念再说微任务与...
2019-09-23 10:45:20
335
原创 vue-resource系列之request.headers.set设置的问题
vue-resource系列之request.headers.set设置的问题为什么设置请求头的过程中出现了问题？为什么设置请求头的过程中出现了问题？问题如下：Vue.http.interceptors.push((request, next) => { request.headers.set('lanId', 100);})项目运行的过程中，每个页面都会报如下错误：后来在...
2019-08-15 16:53:46
2182
原创 webpack 打包css z-index值被重新计算
webpack 打包css z-index值被重新计算发生了什么？问题在哪里有问题就要解决发生了什么？当把项目打包放置测试环境，发现了一件奇怪的事，我设置的z-index值变了，不再是我熟悉当那个z-index了，肿么了？顿时怀疑测试环境的人生，得纠正它的人生。问题在哪里有问题就百度，看到某大佬在其文章说道：OptimizeCssPlugin 调用 cssProcessor cssnan...
2019-06-27 23:04:40
400
1
转载 vue单页面应用刷新网页后vuex的state数据丢失的解决方案
vue单页面应用刷新网页后vuex的state数据丢失的解决方案产生原因解决思路第一种思路第二种思路第三种思路解决过程首先得选择合适的客户端存储用sessionStorage来保存state里的数据产生原因做的项目是但页面应用，在刷新页面中发现，之前存储在store中的数据随着刷新，也给刷没了，哭唧唧，为什么会没了？这是为什么呢？因为store里的数据是保存在运行内存中的，当页面刷新时，页面会...
2019-06-27 11:51:33
1340
原创 devserver
devser遇到问题后端url混合写后端url混合写Error: [HPM] Invalid context. Expecting something like: ["/api", “/ajax”] or ["/api/", "!.html"]{ context: ['/a/b', '/c/**'], target: 'http://**.**...
2019-05-06 11:26:13
2137
原创 eslint报错
eslint报错升级至webpack4升级时出现的问题升级至webpack4升级时出现的问题ImportDeclaration should appear when the mode is ES6 and in the module context.AssertionError [ERR_ASSERTION]: ImportDeclaration should appear when the...
2018-11-01 14:57:17
3513
原创 webpack问题汇总
#1.升级把webpack3.*升级至4.*会出现问题Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.上面很明确说出了解决方案，添加上面圈里面的内容，把下面那个圈里面的内容干掉就可以了...
2018-10-30 14:58:36
927
原创 npm报错问题汇总
问题1sha1sha1npm ERR! code EINTEGRITYnpm ERR! sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= integrity checksum failed when using sha1: wanted sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= but got sha1-VGHlv6Oxmz2ZGynSkmeTt0...
2018-10-30 14:20:22
1138
原创 GIT学习
1.提交代码 1.先拉取远程代码的分支 git pull origin 分支名称 2.git add ./ 把文件添加至缓存区 3.git commit -m &amp;quot;对改动作解释&amp;quot; 把文件放置本地库 4.git push origin 分支名称 把项目放置远程仓库...
2018-10-25 16:58:49
160
原创 GIT遇坑系列
GIT遇坑系列1 本地分支 没有与远程分支建立联系1 本地分支 没有与远程分支建立联系报错： If you wish to set tracking information for this branch you can do so with:git branch --set-upstream-to=origin/<branch> fixbug_master_20181025...
2018-10-25 11:17:34
443
原创 前端面试题-滴滴二面
面试题一function P(){}P.prototype.a = 'a';function C(){}C.prototype = new P();var obj1 = new C();通过obj1来进行修改a方法一：obj1._prototype_.a = 'xx';方法二：obj1.constructor.prototype.a = 'xx';面试题二说一下图片的格式 jpg、png
2017-10-27 17:30:09
5698
2
原创 前端面试题-滴滴一面
1、先手写代码//写闭包 cal(); //num=? cal(); //num=? var cal2 = counter(); cal(); //num=? cal2(); //num=? function counter(){ var num = 0; function add(){ return
2017-10-27 17:05:07
6697
3
原创 前端面试题-小米二面
一、CSS1、盒模型 W3C盒模型和IE盒子，注意说区别。2、隐藏元素方法一：display：none； 方法二：visibility：hidden； 方法三：opacity：0； 方法四：z-index3、实现三角width:0px; height:0px; border:三边透明，一边有颜色4、轮播图一种是利用js实现的，一种是利用animation。 这里要注意的是从最后一张到第
2017-10-27 14:45:01
6070
2
原创 img图片四要素
src:图片路径 alt：描述，搜索引擎是不识别图片的，只能通过alt来进行获取，这是搜索引擎优化的很重要的一步。 height:图片高度 width：图片宽度 height和width要加上。浏览器加载内容都是从上到下进行加载的，如果img没有宽度和高度，这样无形当中拖慢整个页面的开打速度（加上宽度和高度利于搜索引擎的优化和用户的体验）。
2017-10-27 14:25:19
2603
原创 伪元素和伪类
前言昨天被面试官给问到了，因为这个问题本身我就不是很清楚，所以今天赶紧查了查。区别所谓伪类，就是作用在元素本身，可以像类一样使用，往元素上面添加样式。 所谓伪元素，就是相当于创建了一个新的元素，把所选内容放在了这个元素里面，并且为这个元素添加样式。 注意:伪元素中新建的那个元素其实display为inline的元素，这就是为什么我们用::after清除浮动的时候需要写上display:block
2017-09-23 11:45:58
379
原创 JavaScript：对象作为对象的属性名
var a = {}; b = {key:'b'}; c = {key:'c'}; a[b] = 123; a[c] = 456; console.log(a[b]);//456原因：key名称只能是string类型的，因此，b先变成string，默认变string类型使用的是toString()方法，而不是valueO
2017-09-08 15:22:30
901
原创 跨域--window.name + iframe
name在浏览器环境中是一个全局/window对象的属性，且挡在frame中加载新页面时，name的属性值依旧保持不变。 通过在iframe中加载一个资源，该目标页面将设置frame的name属性。此name属性值可被获取到，以访问web服务发送的信息。 但name属性仅对相同域名的frame可访问。这意味着为了访问name属性，当远程web服务页面被加载后，必须导航frame回到原始域。 同
2017-09-06 22:41:18
889
原创 链家面试
Q1：分页问题只能offset和limit就能解决分页问题吗？ 很显然是不能的，因为会有新的数据填到数据库里面。解决方案一：存储 把数据查询完以后全部放置前端进行缓存，需要的时候直接在缓存中拿数据即可解决方案二：使用小于或者大于生成数据的时间进行查询分页的数据Q2:html新的标签nav、section、article、footer、header、aside等 为什么新增这些标签？去掉
2017-09-02 14:46:21
891
原创 拼多多面试2
Q1:画一个内圆半径为5px，外圆半径为10px方法一：利用border画外圆<style type="text/css"> #circle { width: 10px;height: 10px;border-radius: 50%;border: 5px solid black; }</style><div id="circle"></div>方法二：利用定位和
2017-08-28 23:01:26
2357
原创 拼多多面试
Q1.实现两列布局描述：实现这么一个布局，左侧是导航栏，右侧是主区域，导航栏宽度固定为200px，主区域宽度不固定，并且导航栏和主区域中间有20px的间隙。要求，加载时优先加载主区域。 答：问到这个问题，让我想起了圣杯布局和双飞翼布局，这就是一个变体，只不过是把三列改成了两列而已。 上代码：<!DOCTYPE html><html lang="en"><head> <meta cha
2017-08-20 16:31:26
3639
转载 CSS:hack
1.什么是CSS hack由于不同厂商的浏览器或某浏览器不同版本，对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同版本的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack2.CSS hack的原理由于不同浏览器的浏览器版本对CSS的支持以及解析结果不一样，以及CSS优先级对浏览器展
2017-08-14 11:46:30
2325
转载 圣杯布局和双飞翼布局
介绍：两者都属于三列布局，是一种很常见的页面布局方法，三列一般分别是子列sub、主列main和附加列extra，其中子列一般是居左的导航，且宽度固定；主列是居中的主要内容，宽度自适应；附加列一般是广告等额外信息，局右且宽度固定。1.圣杯布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Do
2017-08-13 20:09:23
428
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人