一、全局安装 vue-cli 脚手架，使用 vue init webpack-simple yyl-npm-practice 初始化项目 初始化项目后 npm install ; npm run dev，项目就能跑起来了。下面我们来试着封装一个属于我们自己的公用组件 Button 在 src 目录下新建一个 components 存放自定义组件 ...
CSS BFC 详解及运用
BFC 概念 Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方...
js 数组方法详解及类数组（arguments）如何转换成数组
join()push()pop()shift() unshift()sort()reverse()concat()slice()splice()toString() includes() （ES5新增）indexOf()（ES5新增）lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5新增）r...
webpack 构建缓存之 hash、chunkhash、contenthash 详解
hash hash是跟整个项目的构建相关，构建生成的文件hash值都是一样的，所以hash计算是跟整个项目的构建相关，同一次构建过程中生成的hash都是一样的，只要项目里有文件更改，整个项目构建的hash值都会更改。 如果出口是hash，那么一旦针对项目中任何一个文件的修改，都会...
js EventLoop 事件循环、微任务、宏任务
EventLoop 事件循环 主线程循环：即主线程会不停的从执行栈中读取事件，会执行完所有栈中的同步代码。 当遇到一个异步事件后，并不会一直等待异步事件返回结果，而是会将这个事件挂在与执行栈不同的队列中，我们称之为任务队列(Task Queue)。 当主线程将执行栈中所有...
浏览器缓存之强缓存与协商缓存
缓存直接会影响到网站性能和用户体验的，它是必要存在的。 优点 减少了不必要的数据传输，节省带宽减少服务器的负担，提升网站性能加快了客户端加载网页的速度用户体验友好 缺点 资源如果有更改但是客户端不及时更新会造成用户获取信息滞后，如果老版本有bug的话...
js 快速查找字符在数组集合中出现的位置之二分法
二分法 固名思义，一分为二，从中间开始查 条件 采用二分法查找数据集合必须是有序的 实现思路 循环，首页取出数据集合最中间的值，比较这个值与要查找的值的大小 currentKey === findKey，当然就等到结果了currentKey > findKey，由于是有序数据集合，就只...
浏览器地址栏输入 URL 到显示网页，这个过程到底发生了什么？
域名解析TCP连接发送 HTTP 请求服务器处理请求并返回HTTP报文渲染页面断开TCP连接 域名解析 网址到ip地址的转换过程就是DNS解析。然后建立 TCP 连接 TCP连接 HTTP协议是使用TCP协议作为其传输层协议的，在拿到服务器的IP地址后，浏览器客户端会与服务器建立TCP连...
redux-saga 使用详解说明
redux-saga 是一个用于管理应用程序 Side Effect（副作用，例如异步获取数据，访问浏览器缓存等）的 library，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。 可以想像为，一个 saga 就像是应用程序中一个单独的线程，它独自负责处理副...
react proxy 详解，跨域配置 proxy is not a function
一个前后端分离的项目，本地联调，跨域配置至关重要。 传统设置浏览器跨域设置这里就不继续累赘了。 网上很多教程都在 “package.json” 里边设置 "proxy": { "/api": { "target": "http://localhost:3001" } } 初接触的小伙伴，直接按这种方式都做了发现...