- 博客(27)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JavaScript 执行上下文解读
概念理解执行上下文其实是函数调用的一个抽象环境，环境中包括了函数内部和外部所关联的所有的引用关系，这些引用关系会在函数执行的时候用到。执行上下文包括三种类型：分为全局执行上下文函数执行上下文eval执行上下文每个执行上下文都有三个属性变量对象作用域链this变量对象函数的形参（如果是在函数作用域中）函数声明变量声明作用域链局部变量 scope，用于存放当前执行上下文的父级执行上下文的引用this默认绑定非严格模式下，默认绑定的 this 指向全局对象， wi
2020-08-24 14:52:02
113
原创 原生 js 实现鼠标拖拽绘制矩形区域
业务开发中遇到一个场景，视频监控播放的时候，需要在视频区域画一个矩形，然后将这个矩形包括的范围放大的功能。所以首先就需要一个可以在 video 标签上绘制矩形的方法。思路：鼠标按下，记录鼠标按下的位置，及绘制矩形的起点。鼠标移动的时候，以起点为原点建立直角坐标系，然后分别讨论移动之后的鼠标点在四个坐标象限的情况。鼠标弹起，清空鼠标移动个鼠标弹起事件，调用矩形绘制方法的回调函数。在鼠标移动的过程中还要考虑到鼠标越界的情况。代码如下：<!DOCTYPE html><html
2020-08-21 15:19:14
2180
原创 3-2-20-Vue.js 源码阅读-nextTick
Vue 中的 vm.$nextTick 方法vm.$nextTick( [callback] )参数：{Function} [callback]返回值：{Function} unwatch用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。注意：2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Pro
2020-08-12 10:47:46
98
原创 3-2-19-Vue.js 源码阅读-watch
Vue 中的 vm.$watch 方法vm.$watch( expOrFn, callback, [options] )参数：{string | Function} expOrFn{Function | Object} callback{Object} [options]{boolean} deep{boolean} immediate返回值：{Function} unwatch用法：观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新
2020-08-11 17:47:05
141
原创 3-2-18-Vue.js 源码阅读-delete
Vue 中的 vm.$delete 方法Vue.delete( target, propertyName/index )参数：{Object | Array} target{string | number} propertyName/index仅在 2.2.0+ 版本中支持 Array + index 用法。用法：删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它
2020-08-11 17:46:34
155
原创 3-2-17-Vue.js 源码阅读-set
Vue 中的 $.set 方法Vue.set( target, propertyName/index, value )参数：{Object | Array} target{string | number} propertyName/index{any} value**返回值：**设置的值。用法：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的
2020-08-11 17:46:03
110
原创 3-2-16-Vue.js 源码阅读-响应式原理-Watcher
响应式原理-WatcherWatcher 分为三种类型，Computed Watcher、用户 Watcher（侦听器）、渲染 Watcher首次渲染的 Watcher首先是首次渲染的时候创建 Watcher 的时候。// we set this to vm._watcher inside the watcher's constructor// since the watcher's initial patch may call $forceUpdate (e.g. inside child//
2020-08-11 17:45:30
140
原创 3-2-15-Vue.js 源码阅读-响应式原理-数组
响应式原理-数组在看 observer 的时候，在它的 constructor 里面是对数组有特殊的响应式处理的，下面讲解 Vue 中有关数组的响应式处理。在 observer 中通过 Array.isArray 这个方法判断当前处理的数据是否是一个数组，如果是数组进行数组相关处理。constructor (value: any) { this.value = value this.dep = new Dep() // 初始化实例的 vmCount 为 0 this.vmCount =
2020-08-11 17:44:59
118
原创 3-2-14-Vue.js 源码阅读-响应式原理-依赖收集-总结
响应式原理-依赖收集-总结本篇将通过调试的过程讲解 Vue 响应式处理中收集依赖的整个过程。通过前面的了解，收集依赖其实就是通过data 中的属性对应的 dep 对象，收集当前对应的 Component 对象对应的 watcher。具体就是将组件对应的 watcher 对象添加到属性对应的 dep 的 subs 数组中。也就是说 watcher 是基于一个组件的，当一个组件中多次用到了某一个属性，那么也只需要收集一次依赖就够了，当属性发生变化的时候，去更新整个组件。Vue2.0 开始更改每一个组件作
2020-08-11 17:44:32
82
原创 3-2-13-Vue.js 源码阅读-响应式原理-依赖收集
响应式原理-依赖收集本篇将详细讲解，在 defineReactive 的 get 中是如何给当前属性收集依赖的。收集依赖的过程就是通过属性对应的 dep 对象，收集组件对应的 watcher ，把对应的 watcher 添加到属性对应的 subs 数组中。如果模板中对相同的属性使用了两次，在添加依赖的时候只需要添加一次，只要属性发生变化，就去通知对应的 watcher 对象，让 watcher 更新视图。get: function reactiveGetter () { // 如果预定义的 get
2020-08-11 17:43:52
114
原创 3-2-12-Vue.js 源码阅读-响应式原理-defineReaactive
响应式原理-Observer本篇将详细讲解，当在 observe 中 new Observer 创建 observer 实例的过程中是如何实现数据的响应式的。/** * Observer class that is attached to each observed * object. Once attached, the observer converts the target * object's property keys into getter/setters that * collec
2020-08-11 17:42:47
238
原创 js在for循环中延时打印索引的两种方法
闭包利用闭包将每一次循环中的 i 保存起来，等待延时器回调函数获取。for(var i = 0; i < 6; i++){ setTimeout(function generatorFunc (i) { return function sonFunc () { console.log(i) } }(i), 1000)}generatorFunc 是一个立即执行函数，接受一个参数并返回一个函数 sonFunc 。sonFunc 作为延时器的回调函数。在每
2020-08-11 12:02:05
573
原创 3-2-11-Vue.js 源码阅读-响应式原理-Observer
响应式原理-Observer本篇将详细讲解，当在 observe 中 new Observer 创建 observer 实例的过程中是如何实现数据的响应式的。/** * Observer class that is attached to each observed * object. Once attached, the observer converts the target * object's property keys into getter/setters that * collec
2020-08-11 11:54:30
137
原创 3-2-10-Vue.js 源码阅读-响应式原理-入口文件
响应式原理-入口文件数据响应式和双向绑定机制是使用数据驱动开发的基石数据响应式指的是，当数据发生变化的时候自动更新视图，不需要手动操作 DOM 。几个问题：vm.msg = { count: 0 } , 重新给数据赋值，是否是响应式的？vm.arr[0] = 4 , 给数组元素赋值，视图是否会更新vm.arr.length = 0 , 修改数组的 length ，视图是否会更新vm.arr.push(4) , 视图是否会更新响应式处理的入口src/core/instance
2020-08-10 09:59:31
155
原创 3-2-09-Vue.js 源码阅读-首次渲染过程-调试
Vue 首次渲染的过程-调试初始化完成之后，本节，通过调试的方式查看 Vue 首次渲染的整个过程。Vue 实例的时候会调用 _init() 这个方法，在这个方法里面会通过调用 $mount() 方法完成 Vue 的首次渲染。$mount 方法的执行过程：获取模板：首先判断 options 中是否有 render 函数如果没有 render 函数，获取 options.template ，如果是一个元素节点，直接返回 innerHTML 作为模板；如果存在并且是一个字符串，判断字符串的第一
2020-08-10 09:58:54
135
原创 3-2-08-Vue.js 源码阅读-初始化过程-调试
Vue 初始化的过程-调试前面已经介绍了初始化过程中给 Vue 实例添加静态成员以及实例成员的过程，下面用调试的方式统筹整个流程。主要调试的文件有四个，分别是前面说过的四个导出 Vue 的文件。跟平台无关的两个导出 Vue 的文件src/core/instance/index.jssrc/core/index.js跟平台相关的两个导出 Vue 的文件src/platforms/web/runtime/index.jssrc/platforms/web/entry-runtime
2020-08-10 09:58:14
119
原创 3-2-07-Vue.js 源码阅读-初始化过程-实例成员-initState
Vue 初始化的过程-实例成员-initState这个方法中将实例中的 $options 中的 props、methods、data、computed、watch 通过对应的 init 方法进行初始化。initProps(vm, opts.props)在这个方法中通过遍历 opts.props 将所有的 prop 通过 defineReactive 将属性转换成 getter/setter 并注入到 vm._props 中，所有的成员最终都会存储在 _props 这个属性中。如果是在开发模式中去给
2020-08-10 09:57:47
109
原创 3-2-06-Vue.js 源码阅读-初始化过程-实例成员-init
Vue 初始化的过程-实例成员-init在 Vue 的构造函数中调用了 init 方法，这个方法是在 initMixin 中定义的。所以需要分析 initMixin 中的代码来分析 init。下面是 initMixin 的源代码，通过添加注释来记录阅读源码的过程。/* @flow */import config from '../config'import { initProxy } from './proxy'import { initState } from './state'impor
2020-08-10 09:57:13
108
原创 3-2-05-Vue.js 源码阅读-初始化过程-实例成员
Vue 初始化的过程-实例成员在 core/instance/index.js 中定义了 Vue 的构造函数，并且通过给 Vue 的原型挂载了一系列的成员的方式添加了一系列的实例成员。// core/instance/index.jsimport { initMixin } from './init'import { stateMixin } from './state'import { renderMixin } from './render'import { eventsMixin } fr
2020-08-10 09:56:37
106
原创 3-2-04-Vue.js 源码阅读-初始化过程-静态成员
Vue 初始化的过程-静态成员在 src/core/index.js 这个文件中调用 initGlobalAPI 这个函数中初始化了 vue 的大多数静态成员。initGlobalAPI首先在方法中通过 defineProperty 给 Vue 挂载一个 config 对象属性// configconst configDef = {}configDef.get = () => configif (process.env.NODE_ENV !== 'production') { c
2020-08-10 09:56:06
112
原创 3-2-03-Vue.js 源码阅读-初始化过程
Vue 初始化的过程四个导出 Vue 的模块src/platforms/web/entry-runtime-with-compiler.jsweb 平台相关的入口重写了平台相关的 $mount() 方法注册了 Vue.compile() 方法，传递一个 HTML 字符串返回 render 函数src/platforms/web/runtime/index.jsweb 平台相关注册和平台相关的全局指令：v-model、v-show注册和平台相关的全局组件：v-transitio
2020-08-10 09:51:41
94
原创 3-2-02-Vue.js 源码阅读-寻找入口文件
Vue.js 源码阅读-入口文件入口文件的位置查看 dist/vue.js 的构建过程通过查看 dist/vue.js 的构建过程可以找到 vue.js 的入口文件的位置。执行构建npm run dev# rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev# --environment TARGET:web-full-dev 设置环境变量 TARGET当使用 webpack 或者 ro
2020-08-10 09:51:20
252
原创 3-2-01-Vue.js 源码阅读-准备工作
Vue.js 源码阅读-准备工作distdist 是打包之后的结果， vue 打包之后会生成很多不同的版本，在 README 中会有详细的介绍。examples示例，通过示例快速的体验 vue 的使用方式。src源码目录compilercompiler 的作用是将模板转换成 render 函数，render 会帮我们创建虚拟 DOM 。corecore 是 vue 的核心，与平台无关components定义了 vue 中自带的 keep-alive 组件global-api定义了
2020-08-10 09:34:57
150
原创 JavaScript this 问题总结
this 问题总结js中的 this 问题一直自己知识体系中一个模糊的区域，所以写这篇文章来记录和厘清一下 this 指向的问题。this 的5种绑定方式默认绑定隐式绑定显式绑定new 绑定箭头函数中的 this默认绑定默认绑定的 this 在非严格模式下指向 window ，在严格模式下指向 undefined。var a = 10function foo () { console.log(this.a)}foo() // 10使用 var 创建变量的时候（不在函数里
2020-08-07 16:36:16
158
原创 phpnow安装教程
PHPnow 是什么？Win32 下绿色免费的 Apache + PHP + MySQL 环境套件包。简易安装、快速搭建支持虚拟主机的PHP环境。附带 PnCp.cmd 控制面板，帮助你快速配置你的套件，非常方便。下载地址，http://servkit.org/download。下载完成之后，将压缩包解压到一个没有中文路径的目录下然后，将 Package.7z压缩文件解压到当前目录，如图，在地址栏键入 cmd 回车在弹出的小窗口中输入 init 回车中间会选择 y/n 选择 y 回车，安装
2020-08-06 14:03:32
335
原创 window.open()打开新的标签页，不遮盖任务栏最大化显示
window.open(strUrl, strWindowName, [strWindowFeatures]);strUrl === 要在新打开的窗口中加载的URL。strWindowName === 新窗口的名称。strWindowFeatures === 一个可选参数，列出新窗口的特征(大小，位置，滚动条等)作为一个DOMString。遇到需求，打开新的窗口实现最大化，不遮挡计算机任务栏的那种。依据MDN的解释，strWindowFeature是一个可选参数。是一个字符串值，这个值列出.
2020-08-05 10:12:11
744
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人