hahahaoyx的博客

原创 webpack,babel

结合代码过一下这几个配置项babel 处理es6 到 es5 兼容浏览器postcss需要配置如下否则无法生效 需要npm install 相关依赖webpack优化 小图片用base64直接加载 减少网络请求多入口抽离CSS文件 需要npm install 相关依赖抽离公共代码和第三方代码优化产出代码小图片用base64产出 bundle加hash 懒加载 异步加载 提取公共代码(避...

原创 Vuex基础

state 定义getters定义(注意参数1当前state, 2当前getters, 3当前根state)不分模块的话可不写模块名定义actions(一般是用于异步处理,和多个mutations结合)组件中用dispatch(模块名/定义的actions名)mutations 一般用于单个state数据操作用commit操作(参考actions中定义的)...

原创 一些手写js

setTimeout 是先 setInterval (带清除定时器)function setMyInter(){}

原创 网络知识整理

HTTPHTTP/1.1 主要的变更点有：1.增加了 PUT、DELETE 等新的方法；2.增加了缓存管理和控制；3.明确了连接管理，允许持久连接；4.允许响应数据分块（chunked），利于传输大文件；5.强制要求 Host 头，让互联网主机托管成为可能。HTTP/21.二进制协议，不再是纯文本；2.可发起多个请求，废弃了 1.1 里的管道；3.使用专用算法压缩头部，减少数据传输量；4.允许服务器主动向客户端推送数据；5.增强了安全性，“事...

原创 diff算法解析

需要看源码或视频再捋一捋

原创 vue-router原理

hash模式

原创 Vue组件化

数据驱动视图通过修改数据,框架帮我们重新渲染视图

原创 Vue组件渲染更新过程

//初次渲染1.initState ->进行双向绑定2.$mount->将template编译成render函数3.执行渲染 触发属性get函数,将渲染watcher 收集到dep中4.调用render 函数 生成vnode5.patch(elm,vnode)//更新1.修改数据 触发属性set2.然后dep.notify() ->watch.update 派发更新3.触发render watcher 的render回调4.生成新的v...

原创 Vue模板编译

模板编译(模板转为js代码)基于​​​​​​​

原创 Vue高级特性

自定义v-module $nextTick slot 动态 异步组件 keep-alive mixin自定义v-module$nextTick slot基本使用作用域插槽具名插槽

原创 Vue基础的一些

父子组件间基本通信props $emit兄弟或者隔着很多层的组件间的自定义通信其中的event 就是vue实例 vue中实现了$on $emit $off生命周期1.挂载阶段beforeCreatecreated 页面还未渲染beforeMountmounted 页面已经渲染完成更新阶段beforeUpdate 当data被修改但并未重新渲染updated 重新渲染并应用更新3.销毁阶段bef...

原创 new Object() 和Object.create(null)

new Object() 和Object.create(null)const obj1 = { a : 10, b : 20};const obj2 = { a : 10, b : 20};//obj1 === obj2 =>>> false 引用类型 因为内存地址不同const obj3 = new Object(obj1);// obj3 === obj1 =>>> true 指向同一内存地址const o

原创 var,let,const 区别

var 是es5语法let const 是es6语法let const 块级作用域（不解释）const 定义的是不可修改的let 和 var 定义是可以修改//var 变量提升console.log(a); //undefined 并不是找不到 a 这个变量var a = 200;//以上代码相当于var a; //预声明console.log(a);a = 200;var 变量提升变量提升就是会预声明由var定义的变量拓展：函数声明和...

原创 前端运行环境

原创 http状态码,methods,Restful API,headers,缓存

状态码分类常见状态码methods(规范)Restful APIdelete method 删headersRequest headersResponse headers

原创 localStorage+sessionStorage

存储

原创 ajax+jsonp

ajaxXMLHttpRequest手写ajax(XMLHttpRequest + Promise 返回)JSONP

原创 dom操作,事件相关

DOM 操作DOM性能 BOM事件相关事件冒泡event.stopPropagation 阻止冒泡事件代理event.preventDefault()阻止默认行为

原创 宏任务微任务+eventloop

微任务在DOM渲染前触发(Promise,async/await)宏任务在DOM渲染后触发(setTimeout,setInterval,dom事件绑定,ajax)CallStack清空后 查看当前执行的微任务 尝试渲染DOM 触发EventLoop(宏任务在这里执行) evenloop过程 ...

原创 Promise

Promise 三种状态pending resolved rejected1. 执行async函数 返回的是Promise 对象await相当于Promise的then(只执行成功的情况) try...catch 可捕获异常,代替了Promise的catch

原创 event loop 的机制

event loop(事件循环/事件轮询)event loop 的机制，可画图 什么是宏任务和微任务，两者有什么区别？ Promise有哪三种状态？如何变化？dom事件也是基于event loop和setTimeout差不多，只是执行的时机不一样，流程参考上述...

原创 this在几种场景中的应用

this 几种应用场景1.做为普通函数2.使用call apply bind3.作为对象方法被调用4.在class方法中调用5.箭头函数this取什么样的值是在函数执行的时候确认的不是在函数定义的时候确认的普通函数中的this是window call,bind等会改变this的值所以打印的是传入的参数对象函数中打印的this是当前对象左图中setTimeout中是执行的是普通函数所以this是window右图中setTimeou...

原创 数据类型-原型-原型链

typeOf能判断哪些类型 （识别所有值类型，是否是函数【funciton】，是否是引用类型【object】）值类型:引用类型:值类型undefine,string,number,boolean,symbol引用类型array object function==运算符什么时候使用===什么时候使用==深拷贝判断是否是值类型或者为null 是Array 还是 object 递归！！class extends （和java差不...