抑郁少年-优快云博客

原创手写一个简单的Vuex

**任务分析 **实现一个插件：声明Store类，挂载$storeStore具体实现：创建响应式的state，保存mutations、actions和getters实现commit根据用户传入type执行对应mutation实现dispatch根据用户传入type执行对应action，同时传递上下文实现getters，按照getters定义对state做派生代码let Vueclass Store { constructor(options) { this._ac

2021-04-13 20:24:06 112

原创手写一个简单的VueRouter

需求分析作为一个插件存在：实现VueRouter类和install方法实现两个全局组件：router-view用于显示匹配组件内容，router-link用于跳转监控url变化：监听hashchange或popstate事件响应最新url：创建一个响应式的属性current，当它改变时获取对应组件并显示代码没有实现嵌套路由，跳转只支持字符串let Vueclass MyRouter { constructor(options) { this.$options = opt

2021-04-13 20:23:25 118

原创 Vue组件化，表单组件、消息组件实现方式

组件通信组件通信的常用方式props eventbus vuex 自定义事件 $parent $children $root $refs provide/inject $attrs $listenersprops父传子// childprops: { msg: String }// parent<HelloWorld msg="Welcome to Your Vue.js App"/>自定义事件子传父// childthis.$emit('add', good)//

2021-04-13 20:15:14 268

原创 JS中的this指向

笔记整理自《你不知道的JavaScript》第二章this是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。绑定规则有四种绑定规则, 它们用有不同的优先级默认绑定function foo() { console.log(this.a)}var a = 2foo() // 2foo()是在全局调用的, 所以this.a被解析成了全局变量a如果使用严格模式，那么全局对象将无法使用默认.

2021-04-13 19:59:53 112

原创节流与防抖

节流函数节流函数，第一次执行，随后每隔xxx秒再执行function throttle(fn, delay) { // 上次时间 let lastTime = 0 return (...args) => { // 当前时间 let nowTime = Date.now() if (nowTime - lastTime > delay) { // 若时间差大于 delay 则执行 fn.call(this, ...args)

2021-04-13 19:58:53 109

原创树结构

树（tree）是n（n >= 0）个节点构成的有限集合。当n = 0时，称为空树对于任意一颗非空树，具有以下性质有一个称为“根（Root）”的特殊节点，用r表示其余节点可分为m（m > 0）个互不交的有限集合，其中每个集合又是一棵树，称为原来树的“子树（SubTree）”[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P50MJTL0-1618314971670)(https://gitee.com/jq96m/imgbed/raw/master/img

2021-04-13 19:56:44 194

原创 HTML拖拽事件

HTML拖拽事件拖放事件对于拖放元素需要先对元素设置属性draggable="true"拖元素描述dragstart当元素开始被拖放时触发drag这个事件在拖放源触发dragend拖放源在拖放结束后会得到dragend事件对象，无论成功与否drop需要阻止容器原有的dragover默认事件放元素描述dragenter拖拽中鼠标第一次进入一个元素时触发dragover拖拽中鼠标经过一个元素时触发dragleave拖拽中鼠

2021-04-13 19:52:28 522

原创 promise对象

promise对象Promise 是异步编程的一种解决方案。里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。理解Promise从语法上来说：Promise是一个构造函数从功能上来说：Promise对象用来封装一个异步操作并获取其结果状态的改变pending变为resolvedpending变为rejected只有这两种，且一个promise对象只能改变一次无论成功或失败，都只有一个结果成功的数据一般称为value，失败的结果一般称为reason简单应用// 创建一个

2021-04-13 19:51:22 219

原创根据H标签自动生成多级目录

根据H标签自动生成多级目录这个问题分为两步将标签的层级关系生成树结构递归遍历树结构，使用ol li嵌套生成多级目录<h2>一级标题1</h2> 1. 一级标题1<h3>二级标题1</h3> 1. 二级标题1<h2>一级标题2</h2> 2. 一级标题2

2021-04-13 19:49:16 1734 3

weixin_57215431的博客