liuliuliu_666的博客

loader与plugin区别Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less…），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。样式3-4 使用 SCSS · 深入浅出 WebpackPostCSS 是一个 CSS 处理工具，和 SCSS 不同的地方在于它通过插件机制可以灵活的扩展其支持的特性，而不是像 SCSS 那样语法是固定的。 PostCSS 的用处非常多，包括给 CSS 自动加前缀、使用下一代 CSS 语法等，目前越来越多的人开始用它

mutation为什么不能异步操作？vuex原理简述核心原理⠀ 非常棒根据 Vuex 的官方文档：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 Vuex 状态自管理应用包含以下几个部分：State：驱动应用的数据源Getters：用于从状态管理库中访问数据Mutations：处理程序函数，用于在状态树中执行数据修改Actions：提交Mutations的函数。Mutations

1、模式原生 js 实现一个前端路由 router - 掘金谈谈前端路由 - 掘金阿里P7：你了解路由吗？ - 掘金在传统的 Web 开发中，浏览器根据地址栏的 URL 向服务器发送一个 HTTP 请求，服务器根据 URL 返回一个 HTML 页面。这种情况下，一个 URL 对应一个 HTML 页面， 一个 Web 应用包含很多 HTML 页面，这样的应用就是多页面应用；在多页面应用中，页面路由的控制由服务器负责，这种路由方式称为后端路由。在多页面应用中，每次页面切换都需要向服务器发送一次请求，页

nextTickhttps://juejin.im/post/5ae3f0956fb9a07ac90cf43ehttps://juejin.im/post/5be692936fb9a049e129b741 非常棒Vue.js在默认情况下，每次触发某个数据的 setter 方法后，对应的 Watcher 对象其实会被 push 进一个队列 queue 中，在下一个 tick 的时候将这个队列 queue 全部拿出来 run一遍。this.$nextTick也为事件队列push进入了新的一个callb

TypeScript 最重要的作用就是给JavaScript加上静态类型检查https://github.com/xcatliu/typescript-tutorialhttps://juejin.im/post/5b3b9729f265da0f4b7a6e08#heading-171、有哪些基础类型2、typescript中type和interface有什么区别？不知道写的什么狗屎，就是记录吧，之后整理整理...

new做了什么？模拟一个newfunction create() { // 创建一个空的对象 var obj = new Object(), // 获得构造函数，arguments中去除第一个参数 Con = [].shift.call(arguments); // 链接到原型，obj 可以访问到构造函数原型中的属性 obj.__proto__ = Con.prototype; // 绑定 this 实现继承，obj 可以访问到构造函数中的属性 var ret =

1、 promise里面如果直接return了？链接上来： https://juejin.im/post/5e58c618e51d4526ed66b5cfPromise.resolve(1) .then(2) .then(Promise.resolve(3)) .then(console.log).then 或者 .catch 的参数期望是函数，传入非函数则会发生值穿透。第一个then和第二个then中传入的都不是函数，一个是数字类型，一个是对象类型，因此发生了穿透，将resolve(

拖拽1、被拖拽的元素：需要在可拖动元素上，设置draggable=“true”当拖拽这个元素时触发的事件：dragstart：拖拽开始的时候drag: 在元素被拖动时反复触发dragend：拖拽完成时目标元素的事件：当被拖拽元素进入到目标元素时时，会触发dragenter事件被拖拽元素在目标元素上移动时，会触发dragover事件当被拖动元素没有放下就离开目的地元素时，会触发dragleave事件被拖拽元素在目标元素上同时鼠标放开时，会触发drop事件dragenter和drag

55个提高你CSS开发效率的必备片段1、布局经常问到大约就是两栏布局以及三栏布局2、css样式权重顺序：!import>内联>id>class>标签>通配符>继承>默认计算规则：内联：1000Id:100class（属性选择器）: 10标签1通配符： 0第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为001

1、首屏和白屏时间如何计算10分钟彻底搞懂前端页面性能监控 - 掘金const timing = window.performance.timing*白屏时间*timing.responseEnd – timing.fetchStart首屏时间timing.loadEventStart – timing.fetchStart2、gzip压缩这是性能优化里面的一个环节压缩比例非常大：能压缩50%以上需要浏览器与nigix配合使用浏览器需要在请求头中添加accept-encoding:g

老规矩（呸，哪里来的规矩），先附上链接：https://juejin.im/post/5e8fe74251882573744c5fbeCSRF概念CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证(cookies 等)，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。过程：攻击流程受害者登录 a.com，并保留了登录凭证（Cookie）

跨域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 请求，参数中带着处

2万字 | 前端基础拾遗90问 - 掘金https://juejin.im/post/5d59f2a451882549be53b170#heading-17 （vue）

面经先这样看着吧，之后再整理一番格式以及答案算法题：字母数组，输出出现最少次数的那个字母ts的东西Vue的 双向绑定 原理Vue指令的使用v-html有没有对xss做处理组件间怎么通讯发布订阅模式业务设计：你一个带搜索框带显示列表带侧滑框的ui，你会怎么设计这个组件用同步的写法，并且可以外部控制执行逻辑行进写一段异步代码， 对上一个请求有依赖的异步，请求之间还需要夹杂其他处理逻辑（ es6里yield和next）webpack的东西，打包流程

Q1.实现两列布局描述：实现这么一个布局，左侧是导航栏，右侧是主区域，导航栏宽度固定为200px，主区域宽度不固定，并且导航栏和主区域中间有20px的间隙。要求，加载时优先加载主区域。 答：问到这个问题，让我想起了圣杯布局和双飞翼布局，这就是一个变体，只不过是把三列改成了两列而已。 上代码：<!DOCTYPE html><html lang="en"><head> <meta cha

面试题一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

1、先手写代码//写闭包 cal(); //num=? cal(); //num=? var cal2 = counter(); cal(); //num=? cal2(); //num=? function counter(){ var num = 0; function add(){ return

一、CSS1、盒模型 W3C盒模型和IE盒子，注意说区别。2、隐藏元素方法一：display：none； 方法二：visibility：hidden； 方法三：opacity：0； 方法四：z-index3、实现三角width:0px; height:0px; border:三边透明，一边有颜色4、轮播图一种是利用js实现的，一种是利用animation。 这里要注意的是从最后一张到第

Q1：分页问题只能offset和limit就能解决分页问题吗？ 很显然是不能的，因为会有新的数据填到数据库里面。解决方案一：存储 把数据查询完以后全部放置前端进行缓存，需要的时候直接在缓存中拿数据即可解决方案二：使用小于或者大于生成数据的时间进行查询分页的数据Q2:html新的标签nav、section、article、footer、header、aside等 为什么新增这些标签？去掉

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

前言昨天被面试官给问到了，因为这个问题本身我就不是很清楚，所以今天赶紧查了查。区别所谓伪类，就是作用在元素本身，可以像类一样使用，往元素上面添加样式。 所谓伪元素，就是相当于创建了一个新的元素，把所选内容放在了这个元素里面，并且为这个元素添加样式。 注意:伪元素中新建的那个元素其实display为inline的元素，这就是为什么我们用::after清除浮动的时候需要写上display:block

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>方法二：利用定位和