Wml Blog

前端攻城狮呀

防抖和节流

背景防抖和节流在面试过程中应该被问的频率蛮高了，工作中也时常遇到，在浏览器中，当频繁操作某个函数，且响应速度比触发速度低时，会出现卡顿，延迟，甚至假死状态，比如根据用户输入查询接口，滚动加载等；为了提高性能，不造成资源浪费，使用防抖和节流防止函数被高频触发。防抖debounce 事件被触发时，设置定时器，延迟n秒后执行，如果n秒内该事件被再次触发，则重新计时，将频繁的事件合并为最后...

Posted by wml on April 15, 2019

vue.js的事件机制实现

vue事件机制 vue官方Api上提供了四个事件，$on, $once, $off, $emit，这几个事件都是基于订阅观察者模式实现的，在vm上创建一个event对象存放时间，on方法将事件添加到事件中心，emit将对应的事件发布，off移除对应事件，once监听自定义时间，但只触发一次。实现原理实现一个简易的方法，拥有以上几个事件。 class Vm { _even...

Posted by wml on March 26, 2019

[今日算法] 无重复字符的最长子串

题目描述给定一个字符串，请你找出其中不含有重复字符的最长子串的长度。示例 1: 输入: “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”，所以其长度为 3。示例 2: 输入: “bbbbb” 输出: 1 解释: 因为无重复字符的最长子串是 “b”，所以其长度为 1。示例 3: 输入: “pwwkew” 输出: 3...

Posted by wml on March 19, 2019

flex布局属性总结

flex布局 flex布局使用次数很多了，不过对于其属性值，每次都是用到了临时查阅文档，没有真正系统的总结过。更谈不上对答如流了。 display: flex | inline-flex flex弹性布局，父元素为容器，有水平的主轴和垂直的交叉轴，子元素为项目；容器的属性： flex-direction: row | row-reverse | column | column-re...

Posted by wml on March 18, 2019

[今日算法] 两数之和

背景作为前端开发，对算法的要求可能没有那么高，但还是要有一些了解和涉猎。新发现一个算法的网站力扣，里面有大量从易到难的算法题，每日一练，相信时间久了肯定大有收获。难度简单题目描述给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中...

Posted by wml on March 18, 2019

关于es6类里的super方法和get set方法

es6 Class 类继承父类时，super()方法只能在构造函数中使用，且必须在使用this关键字之前调用 class内部使用的set get关键字是用来对某个属性设置存值函数和取值函数 class Esc { constructor(id, region, name) { this.id = id; this.region = re...

Posted by wml on March 18, 2019

跨域的7种解决方案

前言同源策略(Same-origin Policy),这个概念已经耳熟能详了,简单来说就是浏览器的一种安全策略,不允许浏览器中一个网站访问另一个网站的数据,除非这两个网站具有相同的源(origin),即: 相同的协议(eg:http/https)、相同的主机地址（eg: www.a.com/www.b.com）、相同的端口号（www.a.com:3000/www.a.com:4000），...

Posted by wml on March 5, 2019

日常踩坑填坑

获取url查询参数方法(超简) let q={}; location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v); console.log(q); 网络分层模型（OSI）(3/4) OSI(open systems interconncecion)模型,开放系统互联，分为七层： applicatio...

Posted by wml on March 4, 2019

浏览器地址栏输入url到页面展示到底发生了什么？

前言作为一个前端工程师，不可避免的需要了解浏览器工作的原理；而面试中问得最多的也就是浏览器地址栏输入url到页面展示这个过程发生了什么？查看相关博客文章，加上自己的理解做一番总结如下：进程与线程现代操作系统都是支持多任务的，即操作系统可以运行多个任务，比如可以一边浏览器上网，一边听音乐，一边用记事本打字，这就是多任务执行。对操作系统来说，一个任务就是一个进程（proces...

Posted by wml on December 17, 2018

npm模块调试小技巧

日常背景最近在写一个parcel+ts+preact的CLI工具，开发过程中，少不了要做一些npm模块测试以及本地调试，下面两个是开发过程中比较实用的技能。 npm link npm模块开发中，调试是不可获取的一环；如果每次都需要发到线上或者需要重新安装整个模块进行调试，那确实是一件很痛苦的事，那是否有方法能支持本地实时调试呢？答案是yes。 npm本身对于这种情况提供了专门的命令...

Posted by wml on December 14, 2018