QinのBlog

浏览器多标签页通信浏览器标签页之间是无法直接通信的，需要找到一个中介，如浏览器存储、同一个服务器或其他共享方案。 基于浏览器存储的方案 localStorage cookie indexDB postMessage发送窗口消息。 可以跨域。 所有主流浏览器（包括IE8）都支持。 安全问题（功能越强大，越容易出现安全问题） 广播频道（Broadcast Channel）同源页面、窗口 跨项目实时通信——Broadcast Channel_橙程橙的博客-CSDN博客 Service Worker运行于浏览器后台，不受页面刷新的影响，可以监听和截拦作用域范围内所有页面的 HTTP 请求。 https://mp.weixin.qq.com/s/3Ep5pJULvP7WHJvVJNDV-g Shared Worker共享线程，在该线程中进行数据缓存，即可共享数据。 vue:sharedWorker共享工作者线程的使用 - 简书 websocket需要与服务器建立连接，成本高。 参考穿越标签页的通信魔法：揭秘跨标签页通信的神奇力量| 技术创作特训营第一期-腾讯云开发者社区-腾讯云

前端缓存分为两种： 浏览器缓存：cookie、localStore 等，存储少量信息 HTTP缓存：存储文件副本 一、浏览器缓存存储少量信息 cookie local store sessionStorage 二、HTTP缓存针对静态资源的缓存，遵循 HTTP 缓存规则，通过响应头进行缓存。 可分为两种缓存： 强制缓存 协商缓存 浏览器中，Ajax 的缓存和 HTTP 的缓存基本是一样的，根据响应头自动进行处理。 强制缓存客户端自己判断是否读取缓存，不向服务端发送请求 基于 Expires 实现（废弃） expire：期满，失效 响应时，给文件设置一个失效期。 1Expires: Tue, 03 Jul 2001 06:00:00 GMT 问题：过度依赖本地时间，如果本地时间与服务器不同步，就会出现资源无法被缓存或者资源永远被缓存的情况。 基于 Cache-control 实现代替 Expires 方案，使用时长代替时间点。 Cache-control 的可用属性： max-age：浏览器缓存时长 s-maxage：代理服务器缓存时长 no-ca ...

JavaScript异步编程同步：按顺序执行代码，当前代码执行完毕才会执行后续。 异步：执行到异步代码时，把异步代码打包成任务放入任务队列后，就继续执行后续代码，不会等待异步代码执行完毕。 实现异步的四种方法： 回调函数 Promise：ES6 Generator：ES6 async/await：ES7，终极方案 （1）回调函数略 （2）PromisePromise 是 ES6 加入的。 1234567891011// 1. 创建Promise对象let promise = new Promise((resolve) => { let data = doSomething(); // 传回数据 resolve(data); });// 2. 通过promise.then()获取数据promise.then((data)=>{}) （3）GeneratorGenerator 用于更方便的创建 iterator（迭代器）。 Generator 相当于 ES6 的协程。 协程：可暂停执行过程的函数 ...

DOM交互事件事件是浏览器或文档交互的瞬间，如点击事件，是 JS 与 HTML 交互的桥梁。 事件流有两种： 事件捕获：事件从根节点向下传递，最终到达具体节点。 事件冒泡：事件从最底层的节点向父级节点传递。 事件模型 DOM0 级模型 IE 事件模型 DOM2 级模型 DOM0 级模型又称“原始事件模型”，此时还没有事件流的概念。所有浏览器都支持。 绑定事件 （1）在 HTML 中绑定 1<input type="button" onclick="fun"/> （2）通过 JS 绑定 1234var btn = document.getElementById('btn');btn.onclick = fun;// 移除监听函数btn.onclick = null; IE 事件模型支持事件流。 有两个过程： 事件处理阶段（target phase）：事件到达目标节点后，触发事件监听 事件冒泡阶段（bubbling phase）：目标节点处理完事件后，事件向上冒泡，检查上级节点有没有设置监听函数 ...

JavaScript作用域链编程语言中的作用域可分为： 词法作用域：大多数 动态作用域 JS 中只支持词法作用域， this 机制某种程度上很像动态作用域。 词法域所见即所得，易于理解。 闭包是基于词法域书写代码时产生的自然结果。 词法作用域书写位置决定作用域。 欺骗词法：在运行时修改作用域。 eval：运行时植入JS代码。 with：运行时指定作用域。 闭包是基于词法作用域 作用域（scope）作用域指的是 变量 的作用域。作用是隔离变量，限制一个变量的影响范围。 变量的作用域是在定义时就确定的，对代码进行静态分析就可以确定。 词法作用域：定义在词法阶段的作用域，也叫做静态作用域。 动态作用域：不关心定义，只关心调用，运行时确定，作用域链基于调用栈。 ES5 作用域： 全局作用域 函数作用域：function 块级作用域 全局作用域 在全局声明 未声明直接使用 函数作用域在函数内部声明的变量 块级作用域隐形块级作用域 with catch 子句 ES6 开始正式支持： let const 作用域链（Scope Chain）在 Java ...

JavaScript计时器、防抖、节流计时器方法12345678// 设置计时器，间隔一段时间循环执行setInterval(function, millisecond)// 停止计时器clearInterval(timer)// 设置计时器，延时执行一次setTimeout()// 停止计时器clearTimeout() 防抖与节流防抖（debounce）：防止短时间内多次触发事件，只触发最后一次。 节流（throttle）：防止短时间内多次触发事件，但是间隔事件内，还是需要不断触发。 通过“计时器”可以实现防抖与节流。 防抖触发事件会导致重新计时，计时走完才会执行一次操作。 会重置定时器 示例： 1234567891011let timer = null;window.onscroll = function() { if (timer !== null) { clearTimeout(timer) } timer = setTimeout(()=>{ // 需要防抖的操作 c ...

JavaScript函数匿名函数匿名函数：函数声明时不指定函数名。 匿名函数的用途：多用于封装私有变量，防止变量污染。 匿名函数自运行 123(function(){})() 包裹匿名函数的小括号把匿名函数变成了一个优先执行的表达式，表达式一定会返回结果，且结果为函数本身，再在后面加一个小括号，就等于调用函数。 所有可以把“函数声明”变为表达式的运算符都可以让匿名函数自运行，如： 1234// 使用 + 执行效率最高+function(){}() 递归函数递归函数必须有结束条件，中止递归，向上返回。 回调函数回调函数指的是函数的使用方式。 把一个函数交给别人，在合适的时候再调用。 这里面还涉及了 this 的指向问题。 构造函数是对函数的特殊调用方式。 对一个函数使用 new 关键字，返回值是一个对象。 习惯：构造函数首字母大写。 默认参数语法与 Python 类似。 123function fun(形参=默认值, ...) {} 闭包函数闭包函数：声明在一个函数中的函数。 闭包的两要素： 函数嵌套 内层函数引用外层 ...

JavaScript数据类型原始/基本数据类型（7种）： Number String Boolean Undefined：undefined Null：null Symbol（ES6） BigInt（ES10） 引用数据类型（1个）： Object JS 中万物皆对象 原始数据类型的数据直接存储在栈中，引用数据类型的数据存储在堆中，并把数据的起始地址存储在栈中。 undefined如何得到安全的 undefined？ JS 比较松散，可以定义名为 undefined 的变量，这就导致固有的 undefined 值发生变化。 可以通过 void 获取安全的 undefined 1void 0; BitIntBigInt值的定义：在一个整数字面量后面加 n 或使用构造函数。 12const theBiggestInt = 9007199254740991n;const alsoHuge = BigInt(9007199254740991); 类型检测 typeof instanceof Object.prototype.toString.call ...

问题汇总（微信小程序）自定义指令小程序不支持 Vue.directive() 自定义指令 微信webview字体闪烁问题123body { -webkit-text-size-adjust: 100% !important;} iOS Date 问题iOS微信小程序 Date.now() 只能处理 “/” 分隔的日期。 参考：https://blog.csdn.net/qq_40745143/article/details/108142314 微信小程序多层 v-for 问题当布局中存在多层 v-for 嵌套时，里层的点击事件传值会发生错乱。 2种解决方法： 将里层的 v-for 封装成组件 使用 data- 自定义特性传递参数 自定义特性 1234567<view v-for="(item, index) in list" :key="item.id" :data-params="item" @click="click">< ...

问题汇总（uniapp）主包与分包微信分包问题：主包相当于全局作用域，分包相当于局部作用域。分包可以访问主包。 启动页uni-app 会将 pages.json 配置项中的第一个页面，作为当前工程的首页（启动页）。 uniapp 打包问题打包 H5 时，最终项目包括所有内容。本地网页及相关资源（js、css等文件）必须放在 uni-app 项目的 /hybrid/html 文件夹下。 打包小程序时，只包含特定内容。 ref 问题uni-app 的 ref 属性不能用在内置组件上面，只能用在自定义组件上面。 toast 字数uni.showToast() 有图标时，最多显示7个字符；没有图标时，可以显示更多。 webview 导航栏问题小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。 uniapp兼容ipad平板配置_uniapp开发平板rpx适配_搬砖的前端的博客-CSDN博客 uni-popup 滚动穿透问题h5 平台会自动禁止滚动穿透。 微信小程序、App 平 ...