笔记
关注
分享
扫一扫
文章平均质量分 57
@皮皮榴
一个前端开发的小菜鸟，分享一些小知识，一起进步~
展开
-
JavaScript命名规范
对于js命名应遵循 简洁、语义化 的原则转载 2021-11-09 11:19:38 · 3238 阅读 · 0 评论 -
JS中的Promise、理解Promise
准备工作用Promise创建一个ajaxpromise的本质Promise的本质就也是使用回调函数定义的异步任务结束后所需要执行的任务，只不过这里的回调函数是通过 then 方法传递进去的。还有Promise将回调函数分为了两种，一种是成功的回调onFulfiled和失败的回调onRejected。误区嵌套使用的方式是使用Promise最常见的错误，借助于Promise then 方法链式调用的特点，尽量保证异步任务扁平化。then方法then方法就是为Promise对象添加状态明确后的回调原创 2021-08-23 21:47:51 · 2543 阅读 · 0 评论 -
Snabbdom 基本使用、了解Vue 虚拟DOM实现使用的Snabbdom
前言首先最好了解一下Vue中的虚拟DOMSnabbdom模拟虚拟DOM实现原理Snabbdom 基本使用Snabbdom 中的模块模块的作用Snabbdom 的核心库并不能处理 DOM 元素的属性/样式/事件等，可以通过注册 Snabbdom 默认提供的模块来实现Snabbdom 中的模块可以用来扩展 Snabbdom的功能Snabbdom 中的模块的实现是通过注册全局的钩子函数来实现的官方提供的模块attributes设置VNode对应的DOM元素的属性内部使用的是DOM原创 2021-08-12 21:02:28 · 359 阅读 · 0 评论 -
Vue 模拟源码实现响应式原理——实现双向绑定（最终部分）
前言前面研究过了Vue响应式原理的实现，其实也是在做最后的双向绑定实现的铺垫（这个铺垫有点长。。。）。双向绑定作为最后来讲，因为表单的双向绑定原理的实现也就是基于响应式原理的，并且它的实现真的不复杂。所以想要真的了解Vue的双向绑定原理，需要先了解Vue响应式是怎样实现的。目录Vue 响应式原理——vue.js（第1部分）Vue 响应式原理——observer.js（第2部分）Vue 响应式原理——compiler.js（第3部分）Vue 响应式原理——dep.js（第4部分）Vue 响应原创 2021-08-08 17:13:56 · 165 阅读 · 0 评论 -
Vue 响应式原理、双向绑定——代码完整版
文件结构HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-08-08 17:13:23 · 299 阅读 · 0 评论 -
Vue 模拟源码实现响应式原理——实现watcher.js（第5部分）
实现Vue响应式原理 之 watcher.js部分响应式流程图Watcher功能1.当数据变化触发依赖， dep 通知所有的 Watcher 实例更新视图2.自身实例化的时候往 dep 对象中添加自己Watcher结构代码实现class Watcher { constructor(vm, key, cb) { this.vm = vm // data 中的属性名称 this.key = key // 回调函数负责更原创 2021-08-08 16:38:18 · 264 阅读 · 0 评论 -
Vue 模拟源码实现响应式原理——实现dep.js（第4部分）
实现Vue响应式原理 之 dep.js部分整体流程结构回顾Dep功能1.收集依赖，添加观察者(watcher)2.通知所有观察者Dep结构代码实现前分析使用Dep类，这个类的作用是收集依赖和发送通知，我们需要为每一个响应式数据创建一个Dep对象，在使用响应式数据时收集依赖（也就是创建观察者对象）。在数据变化的时候去通知所有的观察者，并调用观察者的update方法来更新视图。所以，要在Observer中创建Dep对象。代码实现class Dep { constructor(原创 2021-08-08 15:43:16 · 418 阅读 · 0 评论 -
Vue 模拟源码实现响应式原理——实现compiler.js（第3部分）
实现Vue响应式原理 之 compiler.js部分Compiler功能1.负责编译模板，解析指令/插值表达式2.负责页面的首次渲染3.当数据变化后重新渲染视图Compiler结构代码实现// 负责解析指令/插值表达式class Compiler { constructor(vm) { this.vm = vm this.el = vm.$el // 立即编译模板 this.compile(this.el)原创 2021-08-08 13:06:23 · 280 阅读 · 0 评论 -
Vue 模拟源码实现响应式原理——实现observer.js（第2部分）
实现Vue响应式原理 之 observer.js部分Observer功能概括的说Observer作用就是数据劫持，也就是监听data中属性的变化并做出处理。1.负责把 data 选项中的属性转换成响应式数据（getter/setter）2.data 中的某个属性也是对象，把该属性转换成响应式数据3.数据变化发送通知（结合观察者模式来实现）Observer结构代码实现observer.js// 负责数据劫持// 把 $data 中的成员转换成 getter/setterclass原创 2021-08-07 17:52:16 · 174 阅读 · 0 评论 -
Vue 模拟源码实现响应式原理——实现vue.js（第1部分）
实现Vue响应式原理index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2021-08-07 16:39:31 · 153 阅读 · 0 评论 -
Vue 响应式原理、模拟实现Vue响应式原理（模拟源码实现）
Vue 基本结构Vue的基本结构原创 2021-08-07 16:33:59 · 147 阅读 · 0 评论 -
Vue 观察者模式、模拟实现观察者模式、观察者模式与发布/订阅模式的区别
观察者模式观察者(订阅者) – Watcherupdate()：当事件发生时，具体要做的事情目标(发布者) – Depsubs 数组：存储所有的观察者addSub()：添加观察者notify()：当事件发生，调用所有观察者的 update() 方法没有事件中心模拟实现观察者模式简单分析内部有有什么发布者内部需要一个属性去记录所有的订阅者，也就是所该属性是一个数组还需要一个方法去添加所有的订阅者到数组中存储起来还需要一个方法当事件发生时去通知所有订阅者执行update原创 2021-08-07 15:15:04 · 276 阅读 · 0 评论 -
Vue 发布订阅模式、Vue中自定义事件的实现机制
发布订阅模式和观察者模式发布/订阅模式发布/订阅模式订阅者发布者信号中心我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”（publish）一个信号，其他任务可以向信号中心“订阅”（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”（publish-subscribe patten）Vue中的自定义事件、Node中的事件机制都是基于发布/订阅模式的。Vue的自定义事件·- 通过$on注册事件，在特定的时间通过$em原创 2021-08-06 20:57:54 · 655 阅读 · 0 评论 -
Vue 3.x响应式原理
Vue 3.x中响应式原理与Vue2.x响应式原理比较使用ES6中新增的Proxy代理对象实现直接监听对象，而非属性 （不需要循环，性能提升）ES6中新增，IE不支持，性能由浏览器优化实现原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&原创 2021-08-05 20:56:23 · 277 阅读 · 0 评论 -
vue生命周期、简要理一下vue生命周期
初始化vue初始化事件、生命周期，触发beforeCreate钩子函数然后把props、data、methods等这些成员注入到vue的实例上然后触发created钩子函数，这时在created可以访问到props、data、methods等这些成员，到此vue创建完毕模板=>渲染函数$mount方法实际上就是把el转化为template（模板）接下来要把模板编译成render函数4.1 判断是否有template，如果没有就会把el外部的HTML作为template编译4原创 2021-08-02 20:38:54 · 614 阅读 · 3 评论 -
JS中的Date对象、获取日期、日期的计算
获取一个日期对象 日期的构造函数var d = new Date();如果Date()没有参数 得到的是当前日期 获取的日期格式：中国标准时间格式如果Date()有参数：接收一个日期格式的字符串，则以该日期为准var d = new Date("1990-10-11 06:8:8"); <=> var d = new Date("1990/10/11 06:8:8");var d = new Date(1990); //1970...不识别一个参数如果Date()有原创 2021-08-01 20:43:11 · 1177 阅读 · 0 评论 -
JS对象标识及相等判定（检查超过两个值是否相等）
ES6—Object.is（JS中的两等、三等比较）小知识console.log(0 == false); // trueconsole.log(0 === false); // fasleconsole.log(+0 === -0); // trueconsole.log(NaN === NaN); // fasle// ES6中的比较console.log(Object.is(+0, -0)); // falseconsole.log(Object.is(NaN, NaN)); // tr原创 2021-08-01 11:49:04 · 388 阅读 · 0 评论 -
ES6对象字面量增强小知识（给对象添加随机的属性名）
ES6对象字面量增强小知识ES6之前对象属性赋值const bar = '345';const obj = { foo: 123, bar: bar // 给bar属性赋值}ES6简化const bar = '345';const obj = { foo: 123, bar // ES6赋值}ES6对象属性函数写法const bar = '345';const obj = { foo: 123, bar, meth原创 2021-08-01 11:23:56 · 134 阅读 · 0 评论 -
js中的this到底指向谁？
作用域：全局作用域每个JS文件就是一个全局的作用域，它有且只有一个局部作用域每个独立的函数就是：局部作用域，平级的局部作用域不可相互访问词法作用域在函数内部可以访问的上级的作用域就是：词法作用域闭包：闭包是有权访问另一个函数作用域中变量的函数，举个栗子function robot() { var name = '小仙女' return function() { console.log(`我是${name}，喵 ~`)}}var kitty = robot()注转载 2021-07-31 18:20:18 · 294 阅读 · 0 评论 -
ES6字符串扩展方法（startsWith、endsWith、includes）
ES6字符串扩展方法startsWith：判断字符串开头是否包含某个字符endsWith：判断字符串结尾是否包含某个字符includes：判断字符串中是否包含某个字符const message = 'Error: foo is not defined';console.log(message.startsWith('Error')); // trueconsole.log(message.endsWith('defined')); // trueconsole.log(message.in原创 2021-07-31 17:28:10 · 214 阅读 · 0 评论 -
ES6带标签的模板字符串
ES6带标签的模板字符串定义一个函数，函数的第一个参数strings接收到的是一个数组，这个数组是myTagFunc后面紧接着的模板字符串按照表达式（${} ）分割后得到的数组该函数还可以接收到所有在模板字符串中出现的表达式的返回值，即myTagFunc可以接收到${name}、${gender}这个函数内部的返回值，就是带标签的模板字符串的返回值正常使用应该有的返回值带标签的模板字符串的应用标签函数的作用实际就是对模板字符串进行加工，可以在函数内部处理一些业务逻辑、文本翻译成中文 o原创 2021-07-31 17:25:07 · 290 阅读 · 0 评论 -
ES6对象的解构小知识
ES6对象的解构小知识用对象中的键名做匹配，name是键名，提取的是name对应的值其他特性与数组解构相同，即没有匹配上的属性为undefined，属性可赋默认值注意，解构的变量名同时也是用来匹配被解构对象中属性名的，所以当当前作用域当中有同名的变量名时就会产生冲突使用重命名的方式去解决上面的问题重命名 + 设置默认值实际应用场景对象解构的实际应用场景就很多了，比如调用接口返回数据之后拿响应的状态、data等，一般返回体数据对象写为reslet { status, data, m原创 2021-07-31 13:18:53 · 131 阅读 · 0 评论 -
ES6数组的解构赋值小知识
ES6数组的解构赋值小知识按顺序对应位置依次赋值只赋值数组中的某一个成员的值对应位置保留（占位）用逗号隔开，这样就能提取到指定位置的成员rest（…语法），第一个成员之后所有成员放到一个数组中如果解构成员的成员个数小于被解构数组长度，按照从前到后顺序去提取如果解构成员的成员个数大于被解构数组长度，则超出的解构成员undefined，相当于数组索引越界（访问一个不存在的数组下标）给提取的成员设置默认值，如果解构（提取）不到则会用默认值，就不会出现undefined的情况举个栗子原创 2021-07-31 12:59:23 · 194 阅读 · 0 评论 -
var、let、const小知识
var、let小知识let 定义的变量是没有变量提升的，使用var定义的变量会有变量提升，提升到代码最开始的地方使用var定义变量，如下所示，打印出来是undefined使用let定义变量，如下，会报错const小知识常常说const定义的是常量/恒量，是不可再修改的，因此const定义常量时声明与赋值要同时进行，不能像var一样可以先声明再赋值但是，真的“不可修改”吗？其实const声明的成员不允许再修改是指在声明了过后不允许再重新指向一个新的内存地址，并不是不可以修改恒量中原创 2021-07-31 12:30:00 · 81 阅读 · 0 评论 -
手写loader参考
前置手写loader分为上下（手写打包器）我们可以认为手写loader就是手写打包器webpack打包流程（手写简易的打包器->js模块的打包工作）在整个工作流中有一个环节（loader来实现不同类型的文件都按模块处理）手写loader上（配置 使用 语法 常见的loader手写）手写loader下（将loader和打包器结合起来）plugin（插件）tapable插件实现，执行时机，自定义插件自己实现一个打包流程 + 自己写的loader + 自己写的插件 =&g原创 2021-07-31 12:06:18 · 610 阅读 · 0 评论 -
for循环小知识（for循环其实有两层嵌套作用域）
for循环执行for循环拆解，相当于下面代码，每次循环都有if判断的代码块原创 2021-07-31 11:51:55 · 618 阅读 · 0 评论 -
事件委托机制解决循环添加事件的问题、底层执行分析
图示1 - 初始化图示2 - 与闭包、自定义属性方式比较相比闭包思想、自定义属性，使用事件委托不需要开辟很多内存空间图示3 - 明细原创 2021-07-25 19:24:32 · 108 阅读 · 0 评论 -
循环添加事件底层执行分析、原理分析，闭包及其可能的负面影响、自定义属性思想解决
底层分析浏览器运行F12效果原始代码图解分析，为何打印结果都为3？原始代码var aButtons = document.querySelectorAll('button');for (var i = 0; i < aButtons.length; i++) { aButtons[i].onclick = function() { // 下面的this 就是触发onclick事件的dom对象，即aButtons[i] console.log(`原创 2021-07-25 18:47:30 · 135 阅读 · 0 评论 -
Axios请求配置
Axios请求配置这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。{ // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // 默认是 get // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的原创 2021-07-21 21:01:14 · 687 阅读 · 0 评论 -
解决axios请求处理拦截器里回调函数的异步执行
axios请求处理拦截器里回调函数的异步执行，导致获取token刷新失败的方法// 添加请求拦截器https.interceptors.request.use(config => { if (判断token是否过期) { let promisefresh = new Promise(function (resolve, reject) { //刷新token的方法 WebViewJavascriptBridge.callHan转载 2021-07-21 20:54:45 · 1752 阅读 · 0 评论 -
axios 请求拦截器&响应拦截器
拦截器介绍一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。请求拦截器在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装；响应拦截器同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。Axios实例创建axios实例// 引入axiosimport axios from 'axios'// 创建实例let ins转载 2021-07-21 20:46:13 · 610 阅读 · 0 评论 -
深入学习Axios源码（构建配置）
前言axios是我们日常代码中常用的一个http库，它可以用来在浏览器或者node.js中发起http请求；它强大的功能和简单易用的API受到了广大前端童鞋们的青睐；那么它内部是如何来实现的呢，让我们走进它的源码世界一探究竟。axios特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRFaxios大致处理流程Axios多种转载 2021-07-20 21:30:14 · 290 阅读 · 0 评论 -
Performance工具？内存管理？浏览器任务管理器
Performance为什么使用Performance通过Performance时刻监控内存Performance使用步骤Edge浏览器模拟Performance使用内存问题的外在表现界定内存问题的标准内存膨胀：当前应用程序本身（比如当前界面）为了达到最优的效果，会需要很大的内存空间，所以它会去申请这个需要的空间，但是这个空间的大小远超过了设备本身所能提供的大小，这个时候就会感受到持续性的糟糕的性能体验。所以内存膨胀也许是因为当前设备硬件不支持，需要在多台（用户常用的）设备上去进行原创 2021-07-19 20:49:23 · 638 阅读 · 0 评论 -
简单了解V8引擎
认识V8Chrome浏览器、node这样的平台都在采用V8去（高效）执行JS代码及时编译—之前的JS执行引擎需要先将源码转成字节码然后才能去执行，而对于V8来说可以直接将源码翻译成可执行的机器码内存空间设置了数值，对于64位操作系统来说不超过1.5G，对于32位操作系统来说不超过800M—V8是针对浏览器来使用的，对于现有的网页来说这样的大小足够用了；V8内部使用的垃圾回收机制决定了它使用这样的内存限制是合理的，官方做的测试：当垃圾内存达到1.5G时，如果V8采用增量标记算法回收只要消耗50ms,原创 2021-07-18 16:32:57 · 908 阅读 · 0 评论 -
简单了解javaScript中的构造函数constructor、prototype属性、__proto__
实例方法、属性： 只能实例调用原型方法: 实例、prototype都可调用静态方法: 只能类调用类的原型属性: 只能类调用constructor为类的默认方法，通过new的调用可以执行这个方法，给实例属性赋值每个类都必须要有这个方法，如果没有显示定义，则默认一个空的constructor被添加到类里面。constructor方法默认返回实例对象。原创 2021-07-13 21:04:51 · 124 阅读 · 0 评论