- 博客(90)
- 收藏
- 关注
RSS订阅原创 Vue中computed原理
computed是vue中的计算属性，在依赖的值发生变化的时候进行重新计算，否则使用缓存。而在面试中常被问及computed原理，这篇文章主要作为我学习computed源码的笔记。前面说到computed只有在依赖发生变化才会重新计算，那么如何得知computed的值发生了变化呢这主要是Watcher中的dirty属性，dirty属性为true时，说明computed中的值需要重新计算，dirty为false时，则说明依赖没有变化，不需要重新计算当计算属性的值发生变化时，计算属性的watch
2022-03-14 15:40:34
6361
原创 React Native环境搭建（windows）
React Native需要的环境1.Java环境2.NodeJS环境这两个网上都有很多配置，不写了环境变量配置:用户变量中添加ANDROID_HOME:(默认在这个位置）C:\Users\admin\AppData\Local\Android\SdkPath中添加四个路径，分别是platform-tools、emulator、tools、tools/binIDE: vscode ， Android Studio1.vscode 安装插件React N..
2021-11-03 21:42:14
1995
原创 vm.$nexttick实现原理
1.nexttick用法nexttick接受一个回调函数作为参数，它的作用是将回调延迟到下个DOM更新周期之后执行。它与全局方法Vue.nexttick一样，不同的是回调的this自动绑定到调用它的实例上。如果没有提供回调且在支持Promise的环境中。则返回一个Promise下个DOM更新周期的含义在Vue中，当状态发生变化时，watcher会得到通知，然后触发虚拟DOM的渲染流程，而watcher触发渲染是异步的，每当需要渲染时，会将watcher推送到这个队列中，在下一次事件循环中再让wa
2021-08-24 21:01:04
387
原创 BFC的创建规则及其作用
创建规则： 根元素 浮动元素（ float 不取值为 none ） 绝对定位元素（ position 取值为 absolute 或 fixed ） display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、 inline-flex 之⼀的元素 overflow 不取值为 visible 的元素 作⽤：可以包含浮动元素 不被浮动元素覆盖 阻⽌⽗⼦元素的 margin 折叠 ...
2021-08-24 17:12:02
197
原创 vue变化相关API实现原理（vm.$watch, vm.$set,vm.$delete）
1.vm.$setvm.$set(target, key, value)处理target是数组的情况export function set(target, key, val) { //处理数组 if(Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1,
2021-08-22 21:28:22
294
原创 vue双向数据绑定
vue中数组与对象采用了不同的绑定方式1.vue对象数据绑定（1）数据侦测在js中，我们使用Object.defineProperty()和ES6的proxy来对对象进行侦测在vue2.x中使用的是Object.defineProperty()来对对象进行数据侦测，我们首先对Object.defineProperty进行封装，有如下的代码：function defineReactive(data, key, val){ let dep = new Dep(); Obje
2021-05-15 20:17:17
315
3
原创 vue虚拟DOM详解
1.虚拟DOM的概念虚拟DOM的概念是通过状态生成一个虚拟节点树，然后使用虚拟节点数进行渲染。在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分2.vue中的虚拟DOMvue中状态变化时，只能通知到组件，组件内部的变化需要通过虚拟DOM去进行比对与渲染在vue中，我们使用模板来描述状态与DOM之间的映射关系。vue通过编译将模板转换成渲染函数，执行渲染函数就可以得到一个虚拟节点树，使用虚拟节点数就可以渲染页面虚拟DOM在vue中主要提供与真实节点对应的虚拟
2021-05-02 15:51:02
9157
1
原创 如何在页面上实现一个圆形可点击区域
3种方式，html，css, js1.html客户器端图像映射<img src="https://www.w3school.com.cn/i/eg_planets.jpg" alt="太阳" usemap="#Map"> <map name="Map"> <area shape="circle" coords="100,100,50" href="https://www.baidu.com" alt="百度"> </map>
2021-01-22 16:43:29
337
原创 Eventloop
众所周知JS是门非阻塞单线程语言，因为最初JS就是为了和浏览器交互而诞生的。如果JS是门多线程的语言的话，我们在多个线程中处理DOM就可能会发生问题JS在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码，会被挂起并加入的Task队列中...
2021-01-22 12:25:17
132
原创 简单promise的实现
在实现promise之前，先简单的回顾一下promisePromise 对象有以下两个特点:1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。2、一旦状态改变，就不.
2021-01-21 16:46:25
299
原创 js的几种继承方式
首先先来讲下，其实在JS中并不存在类，class只是语法糖，本质还是函数class Person {}Person instanceof Function // true组合继承function Parent(value) { this.val = value}parent.prototype.getValue = function() { console.log(this.val);}function Child(value) { Parent.cal
2021-01-16 20:18:18
188
原创 CSS值和单位
1.关键字有时，值用一个词表示，这叫关键字。none是一个非常常见的关键字，若想移除HTML文档中链接的下划线，可以这样写a:link, a:visited { text-decoration: none;}//去掉下划线a:link, a:visited{ text-decoration: underline;}//加上下划线全局关键字inherit initial unsetinherit继承 initial改为初始值 unset是inherit和in.
2021-01-13 10:29:10
195
原创 特指度和层叠
1.特指度如果有多个CSS规则作用于同一个元素上，那么特指度最高的声明将胜出特指度值的计算方法选择符的每个ID属性值 0，1，0，0选择符的每个类属性值，属性选择 或伪类加 0，0，1，0选择符中的每个元素和伪元素加 0，0，0，1连结符和通用选择符不增加特指度下面将列举一些例子h1 { color: red;}// 0 , 0 , 0 , 1body h1 { color: green;}// 0 , 0, 0 , 2 上面第二个特指度更大
2021-01-12 21:25:16
106
原创 CSS选择符
1.元素选择符元素选择符通常是HTML元素h1 { color: black;}声明和关键字声明块中有一个或多个声明p { font: medium; color: red;}2.群组群组选择符即把几个元素选择符集中在一起h1 , h2, h3 { color: black;}通用选择符* { color: red;}在旧浏览器中使用新元素 使用DOM操作生成元素，浏览器就会把他们当成元素来对待d
2021-01-12 18:25:31
129
原创 css基础
1.元素元素通常有两种形式：置换元素和非置换元素置换元素指用来置换元素内容的部分不由文档内容直接表示，在HTML中，最常见的置换元素要属img,它的内容由文档之外的图像文件替换。如不指向外部内容，这个元素什么也表示不了。input元素类似，根据类型的不同，会替换成单选按钮，复选钮和文本输入框非置换元素 HTML元素大部分是非替换元素，即元素的内容由用户代理在元素自身生成的框中显示块级元素与行内元素块级元素独占一行，HTML中最常见的块级元素是p和div行内元素在一行内生成元素框，
2021-01-10 13:05:44
127
原创 深浅拷贝
1.数据类型数据分为基本数据类型（String,Number,Boolean,Null,Undefined, Symbol）和对象数据类型基本数据类型的特点：直接存储在栈中对象数据类型的特点:存储的是该对象在栈中的引用，真实的数据存放在堆内存中（栈中只存在对象的引用，真正的对象在堆中）2.浅拷贝与深拷贝的区别浅拷贝只复制某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存深拷贝复制完整的对象，不共享内存空间1.浅拷贝方法一：Object.assign()let
2021-01-07 21:14:25
88
原创 自己实现js中的new 和 instanceof
new的作用新⽣成了⼀个对象 链接到构造函数的原型 绑定 this 返回新对象function new() { let obj = new Object(); let Con = [].shift.call(arguments); obj.__proto__ = Con.prototype let result = Con.apply(obj,arguments); return typeof result === 'object' ? resu.
2020-09-24 09:00:03
141
原创 js 原型
每个函数都有 prototype 属性，除了 Function.prototype.bind() ，该属性指向原 型每个对象都有 __proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指 向了 [[prototype]] ，但是 [[prototype]] 是内部属性，我们并不能访问到，所以使 ⽤ _proto_ 来访问对象可以通过 __proto__ 来寻找不属于该对象的属性， __proto__ 将对象连接起来组 成了原型链 ...
2020-09-24 08:31:53
145
原创 异步： 现在与将来
回调函数ajax请求ajax("http://some.url.1", function myCallbackFunction(data) { console.log( data );});事件循环var eventLoop = [ ];var event;while(true) { //一次tick if(eventLoop.length > 0){ event = eventloop.shift(); tr..
2020-09-22 17:57:26
121
原创 ES6 解构
ES6引入了一个新的语法特性，名为解构，把这个功能看作是一个结构话赋值方法，可能会容易理解一些以下代码就展示了手动的解构赋值function foo() { return [1,2,3];}var tmp = foo(), a = tmp[0], b = tmp[1], c = tmp[2];console.lof( a, b, c ); // 1,2,3...
2020-09-20 10:56:03
144
原创 ES6 ... 运算符
ES6引入了一个新的运算符 ... 通常称为spread/rest（展开或收集）运算符，取决于它在哪使用function foo(x,y,z) { console.log( x, y, z );}foo( ...[1,2,3] ); 当 ... 用在数组之前时（实际上是任何 iterable （可迭代的）），它会把这个变量展开为各个独立的值。var a = [2,3,4];var b = [ 1, ...a, 5]console.log( b ); //[1,...
2020-09-19 19:36:01
167
原创 牛客 Js43 获取指定字符串
给定字符串 str，检查其是否包含 连续3个数字1、如果包含，返回最先出现的 3 个数字的字符串2、如果不包含，返回 false这道题是一道正则表达式的题，但其中的一些js语法却让我觉得收获颇多function captureThreeNumbers(str) { var reg = /(\d{3})/; var arr = str.match(reg); return (arr && arr[0]) || false;}reg 时正则表达式.
2020-08-18 21:43:08
169
原创 javascript中的 || 和 &&
在其他的语言中 || 和 && 返回的是bool值，但在js中他们的返回值却是两个操作数中的其中一个var a = 42;var b = "abc";var c = null;a || b; //42a && b; //"abc"c || b; //"abc"c && b; //null对于 || 来说，如果条件判断结果为 true就返回第一个操作数，false的话就返回第二个操作数b的值。对于 &&
2020-08-10 11:08:13
226
原创 js对旧版本支持的两种方法polyfilling 与 transpiling
polyfill这个单词表示根据新特性的定义，创建一段与之等价但能在旧的js环境中运行的代码。举例来说，ES6定义了一个名为Number.isNaN(..) 的工具，用于提供一个精准无bug的NaN值检查，取代原来的isNaN(..)if(!Number.isNaN) { //如果Number没有isNaN的话，那么下面就会进行Number.isNaN的定义 Number.isNaN = function isNaN(x) { return x !== x; }
2020-08-03 15:41:59
688
原创 React与DOM
React将React涉及DOM操作的部分剥离开，目的是为了抽象React,同时使用于Web端和移动端。ReactDOM的关注点在DOM上，因此只适用于Web端。
2020-07-15 11:37:22
237
原创 React生命周期
React组件的生命周期根据定义描述，可以分为挂载，渲染和渲染这几个阶段。当渲染后的组件需要更新时，我们会重新去渲染组件，直至卸载。1.组件的挂载这个过程主要做组件状态的初始化import React, {Component, PropTypes} from 'React';class App extends Component { static propTypes = { }; static defaultProps = {
2020-07-14 17:19:30
187
原创 react数据流
在React中，数据是自顶向下流动的，即从父组件到子组件。这条原则让组件之间的关系变得简单且可预测。state与props是React组件中最重要的概念。如果顶层组件初始化props,那么React会向下遍历整棵组件树，重新渲染相关的子组件。而state只关心每个组件自己内部的状态，这些状态只能在组件内改变。把组件看成一个函数，那么它接受了props作为参数，内部由state作为函数的内部参数，返回Virtual DOM的实现。1.statestate是用来管理组件自身内部状态的。当组件内部
2020-07-13 22:20:17
368
原创 react组件
狭义上的组件与广义上的组件狭义上的组件又称为UI组件，组件主要围绕在交互动作上的抽象广义上的组件即带有业务含义和数据的UI组件组合。这类组件不仅有交互动作，更重要的是有数据与界面的交互以常用的tabs组件为例 分别用html（结构），css（样式），js（交互行为）HTML<div id="tab-demo"> <div class="tabs-bar" role="tablist"> <ul class="tabs-nav">
2020-07-13 10:50:30
172
原创 数组扁平化处理
数组扁平化：多维数组转成一维数组function flatten(arr) { var result = [] for (var i = 0; i < arr.length; i++){ console.log(arr[i]); if(Array.isArray(arr[i])) { //如果是数组的话 result = result.concat(flatten(arr[i])) //递归 } el
2020-07-12 16:29:31
228
原创 Saas详解
1. 特色功能 (Features)完全兼容 CSS3 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能 通过函数进行颜色值与属性值的运算 提供控制指令 (control directives)等高级功能 自定义输出格式2. 语法格式 (Syntax)Sass有SCSS和Sass这两种语法格式，扩展名分别是.scss 和.sass3.安装npm install -g sass4.语法规则1.嵌套规则scss代码#main p
2020-07-12 11:59:38
1357
原创 react基础
react简介react是Facebook在2013年开源在github上的javascript库。react把用户界面抽象成一个一个组件，如按钮组件Button，对话框组件Dialog，日期组件Calendar。开发者通过组合这些组件，最终得到功能丰富，可交互的页面。通过引入JSX语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象...
2020-07-08 22:41:17
178
原创 js强制类型转换
1.值类型转换var a = 42;var b = a + ""; //隐式强制类型转换var c = String( a ); //显式强制类型转换2.抽象值操作1.ToString(),负责处理非字符串的强制类型转换基本类型值的字符串化规则为： null转换为"null",undefined转换为"undefined",true转化为”true",数字的字符串化则遵循通用规则var a = 1.07 * 1000 * 1000 * 1000 * 1000 * 100.
2020-07-06 22:06:46
244
原创 javascript原生函数
常用的内建函数：String（）Number（）Boolean()Array()Object()Function()RegExp()Date()Error()Symbol()构造函数创建出来的是封装了基本类型值的封装对象var a = new String( "abc" );typeof a; //"object"a instanceof String; //trueObject.prototype.toString.cal
2020-07-05 10:22:15
419
原创 javascript中的内置值类型
1.数组var a = [ 1, "2" , [3]];a.length; //3a[0] === 1; //truea[2][0] === 3; //true创建稀疏矩阵，中间会留有一些空白单元，值为undefinedvar a = [ ];a["13"] = 42;a.length; //14从0到12的值都为undefined类数组function foo() { var arr = Array.prototype.sl
2020-07-04 16:09:32
881
原创 行为委托
1.委托理论委托行为意味着某些对象在找不到属性或方法引用时会把这个请求委托给另外一个对象。这是一种极其强大的设计模式，和父类，子类，继承，多态等概念完全不同，这种模式不是由父类到子类的垂直关系所组织的，而是由可以向任意方向委托并联组织的...
2020-07-03 11:41:29
195
原创 javascript中原型的理解
1.[[prototype]]var anotherObject = { a:2};var myObject = Object.create(anotherObject);myObject.a; //2Object.create(...)会创建一个关联到anotherObject的对象，尽管myObject中并没有a属性，但是顺着原型链找到了anotherObject的a属性属性的遍历...
2020-07-01 11:25:12
139
原创 javascript中的对象
1.语法对象可以通过两种形式定义：声明形式和构造形式声明形式var myObj = { key: value};构造形式var myObj = new Object();myObj.key = value;2.类型stringnumberbooleannullundefinedobject3.内置对象StringNumberBooleanObjectFunctionArrayDate （日期）RegExp..
2020-06-27 22:57:12
154
原创 javascript中的this的理解
每个函数的this是在调用时被绑定的，完全取决于函数调用的位置！！！！1.this的绑定规则（1）默认绑定function foo(){ console.log( this.a );}var a = 2;foo();函数没有任何修饰进行调用的，所以在默认情况下会直接将this绑定到全局空间。但这只是在非严格模式下是这样的，严格模式下，this将会是undefined(2)隐式绑定function foo() { console.log(this.a);.
2020-06-26 14:19:26
210
原创 闭包的理解
function foo() { var a = 2; function bar() { console.log( a )；} return bar;}var baz = foo();baz();在foo执行完毕后，将返回值bar赋值给baz,使得bar能在自己的词法作用域之外执行。通常情况下，foo执行后，引擎会考虑释放foo的内存空间，但因为bar在foo内部，所以该作用域可以存活，bar()依然拥有该作用域的引用，而这个引用就叫做闭包。.
2020-06-25 15:30:05
169
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人