- 博客(47)
- 收藏
- 关注
RSS订阅原创 虚拟DOM，和diff算法
虚拟DOM： 它是一个Object对象模型，用来模拟真实dom节点的结构作用用来高效的渲染页面，减少不必要的DOM操作 提高渲染效率diff 算法 ：作用：用来做比对两次vdom结构1.用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 通知视图进行更新...
2020-10-27 10:32:22
185
原创 uni-app生命周期
App.vue中定义的应用生命周期页面内常用生命周期页面内生命周期执行顺序beforeCreate => onLoad => onShow => created => beforeMount => onReady=> mounted刷新后beforeUpdate => updated
2020-10-26 21:05:22
193
原创 微信小程序生命周期
全局生命周期onLaunch监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）onShow监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShowonHide监听小程序隐藏 当小程序从前台进入后台，会触发 onHideonError错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息,其他 Any 开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问
2020-10-26 20:09:18
344
转载 在微信开发程序中点击执行“构建npm“报错
一、官网给的文档写的不够充分，需要你充分理解npm的使用方法，才能明白的；二、开始步骤： 1、第一步：npm init 2、第二步：npm install --production 3、第三步： npm i vant-weapp -S --production三、还要注意一点就是微信开发者工具要更新到最新版本，不然点击工具没有构建npm这一栏，原文：https://blog.csdn.net/zfeng816/article/details/85095885...
2020-09-25 11:45:02
447
原创 项目优化
图片在网页中，往往存在大量的图片资源，这些资源或大或小。当我们页面中DOM中存在大量的图片时，难免不会碰到一些加载缓慢的问题，导致图片出现加载失败的问题。网络上大部分都在使用 懒加载 的使用方式，只有当 存在图片的DOM 出现在页面上才会进行图片的加载，无形中起到了分流的作用UI框架使用方式确保在使用UI框架，如， Element UI框架的时候，都使用官方给暴露出来的按需加载组件。只有真正用到它的时候时候才会加载当前UI框架的组件，而不是一开始就将整个组件库给加载出来import { But
2020-09-24 22:42:58
101
原创 Cannot find module ‘body-parser‘
node_modules下模块缺失解决方案：npm install --save body-parser
2020-09-24 14:35:27
3680
原创 vue项目打包
vue打包（简化版）首先在原项目中执行打包命令 npm run build执行npm init，建立package.json文件执行cnpm intall express，建立node框架建立app.js文件const express = require("express");const app = express();app.use(express.static("./dist"));app.listen(8080, () => { console.log("serv
2020-09-24 14:31:55
363
转载 vue常用指令
v-model 多用于表单元素实现双向数据绑定v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或jsonv-show 显示内容 ,通过display=block/none来控制元素隐藏出现v-hide 隐藏内容 同上v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）v-else-if 必须和v-if连用v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误v-bind 动态绑定 作.
2020-09-16 21:31:30
130
原创 v-show与v-else的区别
一、相同点都可以动态控制着dom元素的显示隐藏二、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;v-show: 控制DOM 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的三、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗四、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；当组件中某块内容只会显示或隐藏不会被再次改变显示状态，此时用v-if更加合适，例如请
2020-09-15 21:36:35
2005
原创 vue生命周期
1、创建vue实例2、在vue实例初始化之后，el和data并未初始化，无法访问methods，data，computed等方法和数据，调用beforeCreate2、实例创建完成后调用created，完成数据观测、属性和方法的运算，完成data数据的初始化，el没有3、编译模板，把data里面的数据和模板生成html，完成data和el初始化，但是此时并未挂载到html页面4、编译模板后调用beforeMount，挂载开始前5、挂载完成后，模板中的HTML渲染到HTML页面中，调用mounted
2020-09-15 20:04:16
70
原创 设计模式
设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化项目中合理地运用设计模式可以完美地解决很多问题，每种模式在现实中都有相应的原理来与之对应，每种模式都描述了一个在我们周围不断重复发生的问题，以及该问题的核心解决方案，这也是设计模式能被广泛应用的原因。什么是 GOF（四人帮，全拼 Gang of Four）在 1994 年，由 Eri
2020-09-13 17:11:57
688
原创 垃圾回收于内存泄漏
内存泄漏程序的运行需要内存，只要程序提出要求，操作系统或者运行是就必须供给内存。对于持续运行的服务进程，必须及时释放内存，否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏。有些语言（比如c语言）必须手动释放内存，程序员负责内存管理。这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"。javascript垃圾回收机制原理：解决内存的泄露，垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），然后释放其
2020-09-13 16:53:44
225
原创 事件监听
一、传统事件绑定方法我们在学习的时候，最初接触的事件绑定方式大多是传统事件绑定方法。传统事件绑定方法事例如下：window.onload=function(){ alert("页面加载完毕");}document.getElementById("btn").onclick=function(){ alert("按钮被点击");}document.onmousemove=function(){ console.log("鼠标在移动");}传统事件绑定方法的特点如
2020-09-13 16:00:09
79
原创 js事件模型
事件模型事件模型三种：1. 原始事件模型在原始事件模型中（也有说DOM0级），事件发生后没有传播的概念，没有事件流。事件发生，马上处理，完事，就这么简单。监听函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器// 1. html代码中直接绑定<input type = "button" onclick = "fun()"> // 2. 通过js代码指定属性值var btn = document.getElementById('btn');btn.onclick =
2020-09-13 15:46:00
97
原创 事件委托
事件委托，顾名思义，就是将本来需要 A 处理的事情，委托给 B 来处理事件委托在JavaScript中:比如要给一个dom节点添加一个点击事件,但是现在事件不加在该dom节点本身,而是加在它的父节点身上,利用它父节点触发事件,给该dom节点实现事件效果实现原理:事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件 举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一
2020-09-11 00:27:39
115
原创 数据扁平化
数组的扁平化，就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。一、递归循环数组元素，如果还是一个数组，就递归调用该方法 var arr = [1, [2, [3, 4]]]; function flatten(arr) { var result = []; for (var i = 0, len = arr.length; i < len; i++) { if (Array.isArray(arr[i])) {
2020-09-11 00:13:17
782
原创 javascript数组排序
1、冒泡排序法将数组中的相邻两个元素进行比较，将比较大（较小）的数通过两两比较移动到数组末尾（开始），执行一遍内层循环，确定一个最大（最小）的数，外层循环从数组末尾（开始）遍历到开始（末尾）function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>arr[j
2020-09-09 22:58:13
168
原创 javascript数组去重
1、利用ES6setvar array = [4, 3, 5, 4, 3, 6, 4, 3, 6, 3, 4, 6, 2, 5, 7, 6, 5, 5, 8]// set转化 set为无序，不能有重复的元素var set = new Set(array)var result = Array.from(set)console.log(result);2、利用for嵌套for循环，splice去重for (var i=0; i<array.length; i++) { for
2020-09-09 21:55:41
70
转载 数组(array)ES5方法
Array是JavaScript的内置对象，同时也是一个构造函数，可以用它生成新的数组，用于在变量中存储多个值var cars = ["Saab", "Volvo", "BMW"];第一个数组元素的索引值为 0，第二个索引值为 1，以此类推注意，如果参数是一个正整数，返回数组的成员都是空位。虽然读取的时候返回undefined，但实际上该位置没有任何值。虽然可以取到length属性，但是取不到键名数组属性属性描述constructor返回创建数组对象的原型函数。l
2020-09-08 22:55:38
423
原创 promise
promise是什么？1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果3、可以在对象之间传递和操作promise，帮助我们处理队列promisepromise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据代码风格，容易理解，便于维护多个异步等待合并便于解决promise详解new Promise( function (resolve, r
2020-09-06 19:34:22
63
原创 generator
Generator 是一个迭代器生成函数，其返回值是一个迭代器（Iterator），，可用于异步调用function* g() { yield 'a'; yield 'b'; yield 'c'; return 'ending';}var gen = g();gen.next(); // 返回Object {value: "a", done: false}gen.next();//返回object {value:”b”,done:false}gen.next();
2020-09-06 19:26:44
114
原创 var、let、const区别
var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。<script type="text/javascript"> // 块作用域 { var a = 1; let b = 2; const c = 3; // c = 4; // 报.
2020-09-06 19:06:46
87
原创 async,await
1、Async是异步的简写，await是asyncwait的简写，async是用于声明一个function是异步的，所以await用于等待一个异步方法执行2、Async函数返回的是一个promise对象，await等待的是async函数的返回值,所以await等待的也是promise对象，而且也可是普通函数调用（await是运算符，用于组成表达式）如果await等到promise对象，await会阻塞后面代码，然后promise对象resolve后，得到值，这就是await的运算结果3、Async函数调
2020-09-06 18:50:05
585
原创 vuex
VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想，就是前面所说的单向数据流。下图就是Vuex实现单向数据流的示意图Vuex 的目的是为了管理共享状态，为了达到这个目的，它制定了一系列的规则，比如修改数据源 state、触发 actions 等等，都需要遵循它的规则，以此来达到让项目结构更加清晰且易于维护的目的state：state 定义了应用状态的数据结构，同样可以在这里设置默认的初始状态Vuex 中 Store 的模板化定义如下：import V
2020-09-03 22:29:30
67
原创 原型及原型链
1、原型的概念JavaScript 的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型JavaScript 的函数对象，除了原型 [proto] 之外，还有 prototype 属性，当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [proto]2、原型链的概念当一个对象调用自身不存在的属性/方法时，就会去自己 [proto] 关联的前辈 prototype 对象上去找，如果没找到，就会去该 prototype 原型 [pr
2020-09-02 23:22:01
95
原创 js继承方法
继承就是子类继承父类的特征和行为，避免重复代码提高代码复用性JS的继承的原理就是用原型链ES5 有 6 种方式可以实现继承：原型链继承构造函数式继承组合式继承原型式继承寄生式继承寄生组合式继承原型链继承原型链继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法子类继承的是父类实例的属性方法和实例的原型对象，同时如果子类本身就有名称相同的属性和方法，优先自身的缺点：1、通过原型来实现继承时，原型会变成另一个类型的实例，原先的实例属性变成了现在的原型属性，该原
2020-09-02 22:30:56
104
原创 this指向、call、apply、bind
js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，就是改变this指向call和apply区别是接受参数的方式不一样，调用时会直接触发函数，call()是apply()的语法糖，call接收的是逗号分隔的参数。apply接收的是参数列表。bind也可以改变函数的上下文对象，接收的是逗号分隔的参数，但是不会立刻触发函数，只会创建一个新的函数，在调用时设置this关键字为提供的值apply()使用 apply， 你可以继
2020-09-01 20:49:37
65
原创 JavaScript this关键字（this详解）
JavaScript this关键字面向对象语言中的this表示当前对象得到一个引用但在JavaScript中的this不是固定的不变的，会随着执行环境的改变而改变在方法中，this 表示该方法所属的对象。在对象方法中， this 指向调用它所在方法的对象。var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.first
2020-09-01 20:31:33
168
原创 js数据类型判断方法
js数据类型判断js的数据类型大体上可以分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；而基本数据类型细化可以分为undefined、null、number、boolean、string而js的引用数据类型也就是对象类型Object，比如：Object、array、function、data等typeoftypeof是用来判断原始类型，即基本数据类型，返回值是字符串另也可判断引用数据类型中的特殊类型array，但这时返回值是一个object对象instanceof
2020-08-31 23:58:35
521
原创 js数据类型小结
js数据类型JavaScript的数据类型分为八种：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol、对象(Object)、BigInt基本数据类型1. String 类型String 类型用于处理文本（字符串）字符串是不可变的，一旦创建，值就不能改变要改变某个变量保存的字符串，首先要销毁原来的字符串，然后于用另一个包含的字符串填充该变量通过引号定义的（单引号、双引号），而且单引号、双引号没有区别2、Nu
2020-08-31 23:31:18
149
原创 [Vue warn]：Cannot read property ‘avatar‘ of undefined
起因是我在templa中写的赋给img标签的参数这段赋给img标签的参数，数据结构是这样的我在data中获取这段的时候，是直接获取的整段数据然后就产生了错误解决办法就是data中的数据结构，将这段获取参数的数据结构拆开...
2020-08-31 10:33:42
1764
原创 清楚浮动四种常用方法
清楚浮动是为了解决子元素浮动后父元素高度塌陷问题，清楚浮动后，父元素的高度就会恢复在页面原有的高度，而非0空标签在浮动元素的末尾加一个空的标签.clear{ clear:both}overflow:hidden给父标签加 overflow:hidden 属性通过触发BFC方式，实现清除浮动伪元素使用after伪元素清除浮动.clear:after{ clear:both; display:block}.clear{ zoom:1 /*ie6清除浮动的方式 *号只有
2020-08-31 00:02:03
263
原创 BFC模型
BFCBFC 全称为 块格式化上下文 (Block Formatting Context)BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列BFC的布局规则内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子（块盒与行盒）的margin box的左边，与包含块borderbox的
2020-08-30 23:33:12
793
原创 CSS3动画小结
CSS动画动画是使元素从一种样式逐渐变化为另一种样式的效果CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果CSS3动画可以改变任意多的样式任意多的次数，可以用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%，0% 是动画的开始，100% 是动画的完成CSS3动画属性animation所有动画属性的简写属性不同于transition只能定义首尾两个状态，animation可以定义任意多的关键帧，
2020-08-30 20:45:12
238
原创 H5新特性小结
H5HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 <!DOCTYPE><!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:<!DOCTYPE html>注意：对于中文网页需要使用 声明编码，否则会出现乱码。H5新特性H5多媒体视频Video和音频Radio标签很多站点都会使用到视频. HTML5 提供了展示视频的标准
2020-08-30 19:58:24
159
转载 css水平、垂直居中
水平居中行内元素首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;<style> #father { width: 500px; height: 300px; background-color: skyblue; text-align: center; } </style> <div id="father">
2020-08-28 00:02:16
73
原创 flex是什么及flex布局语法
Flex布局Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，自由的操作容器中元素(项目)的排列方式任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; }行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; }Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /*
2020-08-26 16:01:29
853
原创 CSS盒子模型（标准盒、怪异盒模型）
CSS盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下图为盒子模型图：margin(外边距) - 清除边框外的区域，外边距是透明的。border(边框) - 围绕在内边距和内容外的边框。padding(内边距) - 清除内容周围的区域，内边距是透明的。conte
2020-08-26 01:26:05
550
原创 git命令、本地分支与远程分支关联、断开
gitgit 是一个版本管理系统（VCS），可以在任何时间点，将文档的状态作为一份更新记录保存起来，并且在任意的时间点，恢复更新记录#版本管理版本管理是一种记录文件变化的方式，方便查阅特定版本号的文件内容人为维护文档版本问题1、文档数量紊多，命名不清晰，导致文档版本混乱2、每次编译文档需要赋值，不方便3、多人同时编辑一个文档，容易产生覆盖git使用在使用git前，需要全局配置git提交用户名 - git config --global user.name “用户名”提交邮箱
2020-08-24 19:57:06
2668
原创 display与overflow 同时使用失效
display与overflow 同时使用失效在写导航滚动的时候，display浮动与overflow的scroll同时设置，但是overflow却无效了解决方案：给子元素设置一个 flex-shirk:0 就可以了
2020-08-20 09:11:37
455
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人