04 2021 档案
摘要：先说总结： 1.当一个组件需要多次派发事件时 2.跨组件共享数据、跨页面共享数据 Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 官方是这么介绍的 为什么要判断什么时候使用Vu
阅读全文
摘要：Vue中对watch的理解（尤其是immediate和deep属性） computed vue 不 触发_vue中watch,computed,mehtod执行顺序 Vue 的计算属性如何实现缓存？
阅读全文
摘要：总结一下跨域的几种情况 在网站开发中，经常会遇到跨域问题，下面总结一下集中常见的跨域问题。 1. 不同域名属于跨域，如：www.a.com 和www.b.com，另外www.a.com 和www.a.com.cn也属于不同域名。 2. 主域名和子域名（二级域名、三级域名等）跨域，如：www.a.co
阅读全文
摘要：一、什么是单页应用？从字面上来理解：单页面应用（SPA single page application），一个web项目只有一个页面（即一个HTML文件）；一个项目的所有页面的所有内容被分成了很多的小块（即组件），可以重复利用的，可以任意调整的组件，每个组件就是一个独立的部分（包括html，css和
阅读全文
摘要：1）意外的全局变量引起的内存泄露 function leak(){ leak= "xxx"; //leak成为一个全局变量，不会被回收 } 2）闭包引起的内存泄露 function bindEvent(){ var obj= document.createElement( "XXX"); obj.ο
阅读全文
摘要：CSS中的继承 继承：子元素继承父元素的样式，但是并不是所有属性都是默认继承的。 通过文档中的 inherited：yes 来判断属性是否可以继承，关于继承可以参见css的继承关键字： 一、无继承性的属性 1、display：规定元素应该生成的框的类型 2、文本属性： vertical-align：
阅读全文
摘要：data此时是一个对象，里面存放着很多数据，都是指向同一个地址。 此时如果重复的使用相同的当前组件，每一个组件用的值都是从这个data:{}对象中取得（也就是说都是从同一个地址中取值），就对组件之间造成了相互干扰。 同理，我们就可以知道组件中的data使用函数然后返回一个对象的话，就不会存在这个问题
阅读全文
摘要：比如说，当我一个元素需要位移，比如我需要居中，但是当父元素没有相对定位，它又不能定位居中，设置margin-left:50%也会出现本身宽度的一半的偏差，还得在偏回来，麻烦。 所以这里给大家介绍一个计算属性： calc(百分比 - 像素) 百分比减掉像素值 // 需要居中的盒子.box{ width
阅读全文
摘要：此demo为大于1M对图片进行压缩上传 若小于1M则原图上传，可以根据自己实际需求更改。 demo源码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script
阅读全文
摘要：Vue响应式原理解析（Vue2.x和3.x及区别）
阅读全文
摘要：@https 真的安全吗，可以抓包吗，如何防止抓包吗
阅读全文
摘要：一、死锁的定义：死锁是指两个或两个以上的进程在执行过程中，由于资源竞争或者由于彼此通信而造成的一种阻塞现象，若无外力作用，他们都将无法推进下去，此时称系统处于死锁状态，这些永远在互相等待的进程称为死锁进程。 二、死锁的原因：（1）因为系统资源不足；（2）进程运行推进的循序不合适；（3）资源分配不当；
阅读全文
摘要：微信小程序线程运行机制（双线程通信+线程与生命周期）
阅读全文
摘要：【浏览器】HTML、CSS和JS如何变成页面的？
阅读全文
摘要：Babel的包构成 核心包 babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。 babylon：js的词法解析器 babel-traverse
阅读全文
摘要：WebSocket是很民主的，啥都要协商！建立连接时需要握手协议，连断开连接都需要双方共同完成！其实断开连接直接断开TCP连接就可以了，但是这有点暴力。文明点的方法是发个请求，让对方自己断开。客户端要主动断开就必须向服务器发送8这个操作码。 首先是服务器主导断开的情况，最简单的方法是直接把TCP连接
阅读全文
摘要：在使用websocket的过程中，有时候会遇到网络断开的情况，但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳，
阅读全文
摘要：1.jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 传统 Ajax 指的是 XMLHttpR
阅读全文
摘要：方法2：display:flex 1 2 3 4 5 .box2{ display: flex; justify-content:center; align-items:Center; } 方法3：绝对定位和负边距 .box3{position:relative;} .box3 span{ posi
阅读全文
摘要：官方文档： 也就是说Vue实例中的data和methods已经可以使用了。但是还没有挂载到页面上。可以在created里面去后端获取数据。 当进入mounted这个生命周期函数。此时页面已经渲染出来，可以进行dom操作。 总而言之。created生命周期函数，可以去后端异步获取数据，并保存到data
阅读全文
摘要：我们首先带着这 4 个问题，来了解浏览器垃圾回收的过程，后面会逐一解答： 浏览器怎么进行垃圾回收？ 浏览器中不同类型变量的内存都是何时释放？ 哪些情况会导致内存泄露？如何避免？ weakMap weakSet 和 Map Set 有什么区别？ ok, let's go！ 什么是垃圾数据? 生活中你买
阅读全文
摘要：在一个页面中把内容写入cookie中，在另一个页面中获得并显示在页面中（在safari和firefox上可以但在chrome 上不可以，不知道为什么。） 第一个页面：点击按钮把表单内容写入cookie， <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
阅读全文
摘要：简介 在 vue 文件中的 style 标签上，有一个特殊的属性：scoped 。当一个 style 标签拥有 scoped 属性时，它的 CSS 样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有 style 标签
阅读全文
摘要：JS 作用域及作用域链 一、作用域 在 Javascript 中，作用域分为 全局作用域 和 函数作用域 全局作用域： 代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。 函数作用域： 在固定的代码片段才能被访问 例子： 作用域有上下级关系，上下级关系的确定就看函数是在哪
阅读全文
摘要：作者：匿名用户链接：https://www.zhihu.com/question/20177988/answer/219695812来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 由于JavaScript并不存在方法重载，并且在继承方面也与传统的接口/类不同，所以在J
阅读全文
摘要：HTTP请求是指从客户端到服务器端的请求消息。包括：消息首行中，对资源的请求方法、资源的标识符及使用的协议。从客户端到服务器端的请求消息包括，消息首行中，对资源的请求方法、资源的标识符及使用的协议。HTTP请求信息由3部分组成：l 请求方法URI协议/版本l 请求头(Request Header)l
阅读全文
摘要：前端 UI 设计里面有一个经常需要用到的实时搜索场景： 当用户在 inpu 里面键入新的内容后，不依赖于用户触发(如点击按钮)，立即自动向后端发起 ajax 查询并展示结果。 这一需求有多种实现方案，典型的是可以设置一个定时器轮询 input 中的内容是否发生变化，若变化了则立即发起后端查询。这种方
阅读全文
摘要：Vue.nextTick 的原理和用途 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 总结 以上就是vue的nextTick方法的实现原理了，总结一下就是： vue用异步队列的方式来控制DOM更新和nextTick回调先后执行 microtas
阅读全文
摘要：一、new操作中发生了什么？ 比较直观的感觉，当我们new一个构造函数，得到的实例继承了构造器的构造属性(this.name这些)以及原型上的属性。 在《JavaScript模式》这本书中，new的过程说的比较直白，当我们new一个构造器，主要有三步： • 创建一个空对象，将它的引用赋给 this，
阅读全文
摘要：一、从功能作用的角度区分：1、loader： loader从字面的意思理解，是 加载 的意思。 由于webpack 本身只能打包commonjs规范的js文件，所以，针对css，图片等格式的文件没法打包，就需要引入第三方的模块进行打包。 loader虽然是扩展了 webpack ，但是它只专注于转化
阅读全文
摘要：一、默认使用uni-app创建的css 有个默认引用的css（uni.css），里面是一些uni- 标签用到的默认css； 其中有个 view{ font-size:32upx; line-height:1.4}这个line-height的默认会在某些特殊情况下影响你的样式，记得删掉或者是在我们的v
阅读全文
摘要：简洁：异步编程的最高境界就是不关心它是否是异步。async、await很好的解决了这一点，将异步强行转换为同步处理。async/await与promise不存在谁代替谁的说法，因为async/await是寄生于Promise，Generater的语法糖。 错误捕获如果是reject状态，可以用try
阅读全文
摘要：回调地狱与回调地狱解决方法 什么是回调地狱(函数作为参数层层嵌套) 什么是回调函数(一个函数作为参数需要依赖另一个函数执行调用) 如何解决回调地狱 保持你的代码简短(给函数取有意义的名字,见名知意,而非匿名函数,写成一大坨) 模块化(函数封装,打包，每个功能独立,可以单独的定义一个js文件Vue,r
阅读全文
摘要：第一步:安装 cnpm install vue-router --save 路由配置基本语法 router下index.js引入 import Vue from "vue"; import Router from "vue-router"; import HelloWorld from "@/com
阅读全文
摘要：深拷贝 浅拷贝 手写闭包 computed 和 watch Vue中的computed属性和watch settimeout和事件循环等等 事件循环题目 session Vue的异步更新实现原理 首页加载优化 scss 简易聊天室 argument webpack 微信小程序开发周期 webpack
阅读全文
摘要：1、static（静态定位）： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。 2、relative（相对定位）： 定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对
阅读全文
摘要：前言 JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。 JS继承的实现方式 既然要实现继承，那么首先我们得有一个父类，代码如下： // 定义一个动物类 function Animal (name) { // 属性 this.name = nam
阅读全文
摘要：https://www.cnblogs.com/pssp/p/5216085.html
阅读全文
摘要：方法一：let块级作用域 for(let i=0;i<5;i++){ setTimeout(function(){ console.log(i) },1000*i)}方法二：闭包 for(var i=0;i<5;i++){ (function(i){ setTimeout(function(){ c
阅读全文
摘要：1.根据id获取标签元素 element.getElementById("元素ID"); <div id="box1"></div> var box1=document.getElementById("box1"); //获取ID为 box1 的元素 console.log(box1); 2.根据标
阅读全文
摘要：1. position: relative;相对定位 1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性） 2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置） 3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移） 4>提升层级（用z-index
阅读全文
摘要：语义化意味着顾名思义，HTML5的语义化指的是合理使用语义化的标签来创建页面结构，如header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。 语义化的优点有: 代码结构清晰，易于阅读，利于开发和维护 提高用于体验，在样式加载失败时，页面结构清晰 方便其他设备解析
阅读全文
摘要：div与span区别div占用的位置是一行，span占用的是内容有多宽就占用多宽的空间距离
阅读全文
摘要：使用indexOf()验证数组中是否存在某个元素，这时需要根据返回值是否为-1来判断： let arr = ['react', 'angular', 'vue']; if (arr.indexOf('react') !== -1) { console.log('react存在'); } 复制代码 使
阅读全文
摘要：壹 ❀ 引 如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。 此篇文章中也会简单阐述到栈堆，基本数据类型与引用数据类型，因为这些概念能更好的让你理解深拷贝与浅拷贝。 我们来举个浅拷
阅读全文
摘要：1、什么是Webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 2、为什要使用WebPack 今的很多网页其实可以看做是功
阅读全文
摘要：addEventListener 有三个参数： 事件名称；事件处理函数；捕获还是冒泡。 事件处理函数不一定是函数，也可以是个JavaScript具有handleEvent方法的对象，看下例子： var o = { handleEvent: event => console.log(event) }
阅读全文
摘要：怎么从一个实例对象找到它的构造函数，（原型对象的constructor属性) constructor 属性返回对创建此对象的数组函数的引用。
阅读全文
摘要：1、行内元素 （a）—— 标签定义链接（b）—— 字体加粗（br）—— 换行（i）—— 斜体文本效果（img）—— 在网页中嵌入图片（input）—— 输入框（span）—— 组合文档中的行内元素（small）——呈现小号字体效果（big）——呈现大号字体效果（sub）—— 定义下标文本（sup）—
阅读全文
摘要：ES6第七种数据类型 Symbol 已经有的6种数据类型: Undefined,Null,布尔值,字符串,数值,对象，现在ES6新加入一种数据类型——Symbol. 我们先来看看它的最大特点: 独一无二。 // 没有参数的情况 var s1 = Symbol(); var s2 = Symbol()
阅读全文
摘要：TCP与UDP区别总结： 1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接 2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付 3、TCP面向字节流，实际上是TCP把数
阅读全文
摘要：1、第一步：组件初始化的时候，先给每一个Data属性都注册getter，setter，也就是reactive化。然后再new 一个自己的Watcher对象，此时watcher会立即调用组件的render函数去生成虚拟DOM。在调用render的时候，就会需要用到data的属性值，此时会触发gette
阅读全文
摘要：渐进式代表的含义是：没有多做职责之外的事，vue.js只提供了vue-cli生态中最核心的组件系统和双向数据绑定，就好像 vuex、vue-router都属于围绕vue.js开发的库。示例：使用Angular，必须接受以下东西：1、必须使用它的模块机制。2、必须使用它的依赖注入。3、必须使用它的特殊
阅读全文
摘要：https://www.cnblogs.com/lauzhishuai/p/10953608.html
阅读全文
摘要：box-sizing属性在默认情况下，width属性设置的是元素内容的宽度，而任何一个被绘制到屏幕上的元素的盒子宽度和高度都需要加上border和padding的值，所以当你调整一个元素宽度和高度的时候都需要考虑到border和padding的值，box-sizing可以用来调整这个问题： cont
阅读全文
摘要：浏览器渲染页面的原理及流程 浏览器将域名通过网络通信从服务器拿到html文件后，如何渲染页面呢？ 1.根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。 2.构建渲染树（Rend
阅读全文
摘要：闭包的应用场景 1.使用闭包代替全局变量 2.函数外或在其他函数中访问某一函数内部的参数 3.在函数执行之前为要执行的函数提供具体参数 4.在函数执行之前为函数提供只有在函数执行或引用时才能知道的具体参数 5.为节点循环绑定click事件，在事件函数中使用当次循环的值或节点，而不是最后一次循环的值或
阅读全文
摘要：Vue2.X通过Object.defineProperty()来劫持各个属性的setter，getter，新版本通过Proxy劫持属性 Proxy优势 支持数组，其实还不止 Object.defineProperty() 的问题主要有三个： 不能监听数组的变化 必须遍历对象的每个属性 必须深层遍历嵌
阅读全文
摘要：转载https://blog.csdn.net/weixin_42798473/article/details/105319353
阅读全文
摘要：对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。 props和$emit(常用) $attrs和$listeners 中央事件总线（非父子组件间通信） v-model provide和inject $parent和$children vuex 1.prop
阅读全文
摘要：js 监听URL的hash变化 if( ("onhashchange" in window) && ((typeof document.documentMode "undefined") || document.documentMode==8)) { // 浏览器支持onhashchange事件 w
阅读全文
摘要：编写 Loader Loader就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。 以处理SCSS文件为例： SCSS源代码会先交给sass-loader把SCSS转换成CSS； 把sass-loader输出的CSS交给css-loader处理，找出CS
阅读全文
摘要：参考链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
阅读全文
摘要：样式缩放 最省事的适配方法，直接用px为单位按视觉进行开发，然后通过计算屏幕与网页的宽高比，用transform:scale来对网页进行全局缩放。 不过此方法会有一个小问题，就是如果网页内有动画的话，缩放后会稍微降低页面性能，在低配的安卓机器上表现的比较明显，iOS上没发现有性能问题。 Rem缩放
阅读全文
摘要：我们需要牢记两点： ①__proto__和constructor属性是对象所独有的； ② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。 __proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，
阅读全文
摘要：事件委托其实就是，通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度 JavaScript 事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个上级元素上，这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的上级
阅读全文
摘要：1.背景介绍 浏览器的事件发生顺序 浏览器的事件发生顺序分为事件冒泡与事件捕获 事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。 因此在事件冒泡的概念下在p元素上发生click事件的顺序应该是p -
阅读全文
浙公网安备 33010602011771号