![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
sylvia_0815
这个作者很懒,什么都没留下…
展开
-
vue + iframe + xterm iframe传值传不通刷新后可获取值
bug背景:我们需要做控制台,本来是以接口形式做的,但是后端觉得太捞就用了他推荐的原生 xterm.js + websocket模式。我是vue 包着 iframe ,iframe的url为静态的页面做的。结构如下:vue代码:<template> <div class="webSSH"> <iframe v-if="url" id="iframe" ref="iframe" :src="url" frameborder="0" style原创 2022-01-06 16:57:52 · 942 阅读 · 0 评论 -
从网上down下来 angular 代码 This version of CLI is only compatible with Angular versions ^13. 本地run报错 (已解决)
背景:全局已安装好了angularCli,也install完成,本以为能跑起来,结果没想到报错按道理讲,angular版本是最新的,应该是没有问题的,但是偏偏报错。所以先卸载了全局的angularnpm uninstall @angular/cli -g然后清除缓存npm cache verify // 也有些人是 npm cache clean先查一下 angular 是否还存在ng version // 有些人是 ng -v 或者 ng ...原创 2021-12-29 16:55:03 · 1527 阅读 · 0 评论 -
页面打印以及预览指定区域《超实用的JavaScript代码段》笔记
<!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"> <title>页面打印以及预览指定.原创 2021-12-15 16:09:09 · 628 阅读 · 0 评论 -
网页将不能被另存为《超实用的JavaScript代码段》笔记
<!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"> <title>网页将不能被另存为&.原创 2021-12-15 14:20:10 · 826 阅读 · 5 评论 -
屏蔽右键《超实用的JavaScript代码段》笔记
<!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"> <title>屏蔽右键</t.原创 2021-12-15 13:45:24 · 511 阅读 · 0 评论 -
删除时弹出确认对话框《超实用的JavaScript代码段》笔记
<!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"> <title>删除时弹出确认对话框.原创 2021-12-15 13:38:50 · 765 阅读 · 0 评论 -
修改浏览器title《超实用的JavaScript代码段》笔记
<!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"> <title>修改浏览器title.原创 2021-12-15 13:10:38 · 524 阅读 · 0 评论 -
tab选项卡切换《超实用的JavaScript代码段》笔记
<!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"> <title>tab选项卡切换&l.原创 2021-12-15 13:03:43 · 742 阅读 · 0 评论 -
让层可以随意拖动《超实用的JavaScript代码段》笔记
<!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"> <title>让层可以随意拖动&l.原创 2021-12-15 11:34:08 · 97 阅读 · 0 评论 -
隐藏层《超实用的JavaScript代码段》笔记
<!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"> <title>隐藏层</ti.原创 2021-12-14 15:25:15 · 221 阅读 · 0 评论 -
表格内容的展开和折叠效果《超实用的JavaScript代码段》笔记
<!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"> <title>表格内容的展开和折.原创 2021-12-14 11:32:59 · 968 阅读 · 0 评论 -
动态插入和删除单元行 《超实用的JavaScript代码段》笔记
<!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"> <title>动态插入和删除单元行.原创 2021-12-14 11:09:42 · 80 阅读 · 0 评论 -
js 对文本内容进行关键词过滤 《超实用的JavaScript代码段》笔记
<!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"> <title>对文本内容进行关键词.原创 2021-12-07 14:47:55 · 748 阅读 · 0 评论 -
js 禁止复制与粘贴 《超实用的JavaScript代码段》笔记
<!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"> <title>禁止复制与粘贴 &l.原创 2021-12-07 14:32:24 · 530 阅读 · 0 评论 -
js 光标停留在文字后面 《超实用的JavaScript代码段》笔记
<!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"> <title>测试光标停留在文字后.原创 2021-12-07 14:24:06 · 524 阅读 · 0 评论 -
前端 实现继承的方法
方法编号 方法名称 代码示例 所属模式 技术注解 1 2 3 4 5 6 7 8 9 10 11原创 2021-12-06 16:46:29 · 294 阅读 · 0 评论 -
正则表达式 必须由小写字母、数字字符“-”或“.”组成,并且必须以字母数字字符开头和结尾
var pattern = /^[a-z0-9][a-z0-9-\.]+[a-z0-9]$/;str = '';console.log(pattern.test(str));细节分析:^[a-z0-9] 是指以字母数字字符开头[a-z0-9]$是指以字母数字字符结尾[a-z0-9-\.]+是指 中间字符可以是a-z0-9、-和. 这四种字符任意书写...原创 2021-12-03 15:16:43 · 3710 阅读 · 0 评论 -
BFC 块级格式上下文
是指一个独立的块级渲染区域。只有Block-level Box 参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。举一个没有BFC的例子:·一个盒子在不设置高度的时候,内容子元素都浮动时,该父级盒子是无法撑起自身的。所以说这个盒子没有形成BFC。如何创建BFC?1.float的值不是none2.position的值不是static 或者 relative3.display的值是inline-block、flex或者inline-flex4.overfl.原创 2021-11-24 16:15:18 · 178 阅读 · 0 评论 -
jsonp原生写法与vue写法
原生通常为了减轻web服务器的负载,我们把js、css,img等静态资源分离到另一台独立域名的服务器上,在html页面中再通过相应的标签从不同域名下加载静态资源,而被浏览器允许。即页面中的链接、重定向、表单提交不受同源策略限制。基于此原理,我们可以用 src 和 href 两个属性跨域访问。例如,通过动态创建script,再请求一个带参网址实现跨域通信。var script = document.createElement('script');script.type = 'text/javascri原创 2021-10-28 16:16:01 · 352 阅读 · 0 评论 -
浅析 广度优先遍历(BFS)和深度优先遍历(DFS)
想要了解广度优先遍历(BFS)和深度优先遍历(DFS)我们需要先了解图的概念。图的定义:图在数据结构中是中一对多的关系,一般分为有向图、无向图和权重图。常用 邻接矩阵 或者 邻接链表 来表示图中结点的关系有向图(Directed Graph):有向图中的相连线是有方向的。无向图(Undirected Graph):在无向图中,每个顶点和其他顶点通过相连线连接。权重图(Weighted Graph):在权重图中,每条相连线有各自的权重。...原创 2021-10-28 11:15:55 · 2927 阅读 · 0 评论 -
export 和 export default 的区别
// 第一组export default function moren() { // 输出 // ...}import moren from 'moren'; // 输入// 第二组export function bumoren() { // 输出 // ...};import {bumoren} from 'bumoren'; // 输入上面代码的两组写法,第一组是使用export default时,对应的import语句不需要使用大括号;第二组是不使用export de原创 2021-10-21 15:18:41 · 176 阅读 · 0 评论 -
只执行一次的函数
<!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"> <title>只执行一次的程序<原创 2021-09-15 14:14:30 · 379 阅读 · 0 评论 -
浅析 耦合 紧耦合 松耦合 解耦
耦合指模块之间的依赖关系,包括控制关系、调用关系、数据传递关系。模块间联系越多,其耦合性越强,同时表明其独立性越差。软件设计中通常用耦合度和内聚度作为衡量模块独立程度的标准。划分模块的一个准则就是高内聚低耦合。内聚内聚性是对一个模块内部各个组成元素之间相互结合的紧密程度的度量指标。模块中组成元素结合的越紧密,模块的内聚性就越高,模块的独立性也就越高。理想的内聚性要求模块的功能应明确、单一,即一个模块只做一件事情。模块的内聚性和耦合性是两个相互对立且又密切相关的概念。紧耦合紧耦合架构本质是.原创 2021-09-14 14:12:07 · 1928 阅读 · 0 评论 -
浅析 vue mvvm 中 观察者模式和订阅者模式
总结从表面上看:观察者模式里,只有两个角色 —— 观察者 + 被观察者而发布订阅模式里,却不仅仅只有发布者和订阅者两个角色,还有一个经常被我们忽略的 —— 经纪人Broker往更深层次讲:观察者和被观察者,是松耦合的关系发布者和订阅者,则完全不存在耦合从使用层面上讲:观察者模式,多用于单个应用内部发布订阅模式,则更多的是一种跨应用的模式(cross-application pattern),比如我们常用的消息中间件鸣谢https://zhuanlan.zhihu.com/p/5135.原创 2021-09-13 17:38:30 · 774 阅读 · 0 评论 -
浅析 vue mvvm模式中 采用的 Object.defineProperty() 方法
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。需要在直接在 Object 构造器对象上调用此方法。虽然直接修改属性也是ok但是denfineProperty 方法是不会被修改的。关于这点api是这样写的:该方法允许精确地添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的,在枚举对象属性时会被枚举到(for…in 或 Object.keys 方法),可以改变这些属性的值,也可以删除这些属性。这个方法允许修改默认.原创 2021-09-13 14:36:09 · 127 阅读 · 0 评论 -
append和appendTo的区别浅析
二者差别并不大!在jq文档中,显示二者不同之处在于:内容的位置和选择器。示例如下:append的写法为:(要插入的对象).append(插入什么内容)appendTo的写法为:(插入什么内容).appendTo(要插入的对象)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte原创 2021-09-13 09:52:36 · 718 阅读 · 0 评论 -
ts 入门笔记 webpack打包
在终端输入 npm init -y 初始化一个package.json 配置文件输入 npm i -D webpack webpack-cli typescript ts-loaderwebpack-cli :webpack 的命令行工具,可以通过命令行来使用webpack ts-loader: webpack的加载器可以整合webpack和typescript...原创 2021-09-03 15:42:12 · 207 阅读 · 0 评论 -
ts 入门笔记 选项篇
{ // tsc xxx.ts 把某一个ts文件编译 // tsc xxx.ts -w 在当前终端未关闭情况下,可一直监听xxx.ts 文件,发生变化便编译 // tsc 可以把当前目录下的所有ts文件统统编译 // tsc -w 监听当前目录下所有ts文件,发生变化便编译 /* tsconfig.json 是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译 */ /*包含,用来指定那些ts文件需要被编译*/ "include": [原创 2021-08-17 16:19:33 · 305 阅读 · 0 评论 -
ts 入门笔记 类型篇
let a:number;a = 20;// a = 'testA' 该行代码会报错 因为变量a的类型是number,不能赋值为字符串let b = '字符串';// b = 20; 如果变量和赋值是同时进行的,TS可以自动对变量进行类型判断let c = 10;function sum (a, b) { return a + b;}console.log(sum(100, 20)); // 120console.log(sum(100, '20')); // 1002原创 2021-08-17 15:06:11 · 94 阅读 · 0 评论 -
js正则表达式 只有小写字母和数字 不允许全数字
let str = '123456aaa';let reg= /^(?!^[0-9]*$)^([a-z0-9]{8,16}$)/;console.log(reg.test(str));原创 2021-08-04 18:07:45 · 1988 阅读 · 0 评论 -
js/vue 下载二进制文件流
简单来说下载二进制文件流就是将二进制文件流存在 Blob 对象中,再将其转为 url 对象,最后通过 a 标签下载。//封装下载export function downLoadFetch(url, params = {}, config={}) { //取消 const downSource = axios.CancelToken.source(); document.getElementById('downAnimate').style.display = 'block';原创 2021-07-28 14:38:04 · 2537 阅读 · 0 评论 -
公众号引用js sdk ios兼容问题 报 permission value is offline verifying
项目场景:神兔侠公众号引用js sdk ios兼容问题 报 permission value is offline verifying问题描述:当需要获取权限时,安卓可以随时获取,但ios不可以。会出现无论是 选择拍照还是获取地理位置都报 **permission value is offline verifying** 问题。 原因分析:授权的概念:a页面需要授权,授权是要b页面,授权后是要更改a页面的某些参数的,但是苹果不会更改。安卓会自动更改。解决方案:import {原创 2021-06-30 19:16:03 · 566 阅读 · 0 评论 -
IndexDB 小白使用体验
1.IndexDB的概述现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小不超过 4KB,且每次请求都会发送回服务器;LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能,不能建立自定义的索引。所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景。通俗地说,IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalSto原创 2021-06-30 19:04:47 · 1500 阅读 · 2 评论 -
vue 本地访问局域网内(网关)接口 报错跨域 Access to XMLHttpRequest
报错如下:如上所示,其他后端可以随便链接,但该同事无论如何修改就是无法链接我的代码如下:这个里封装了请求 在这里要修改这个 baseURL一般都是如下:(引入: https://blog.csdn.net/weixin_45264991/article/details/104182742)所以 我的baseURL 是这样的代理的话 也就是要把这个baseURL改变成 /api 的形式那么 我们在vue.config.js 中需要...原创 2021-05-26 20:44:41 · 1720 阅读 · 2 评论 -
关于vue3.0 多入口 打包后 提示 Uncaught SyntaxError: Unexpected token <
仅代表我遇到的情况vue项目 报Uncaught SyntaxError: Unexpected token < 错误,一般是本来script src里应该是.js脚本资源,但是服务器却返回了.html 资源,出现这种情况很可能是新项目构建完后,用户还是访问老的缓存页面,老的缓存页面里的script src 引用的资源是服务器返回的404 html文件页面或者是被运维设置( try_files $uri $uri/ /index.html;)成跳转首页的html 文件(因为老的缓存页面里的scr原创 2021-05-06 16:47:50 · 1678 阅读 · 0 评论 -
浅析浏览器缓存机制
目录1.浏览器缓存到底在哪2.浏览器缓存过程1.浏览器缓存到底在哪首先了解内存缓存(frommemorycache)和硬盘缓存(fromdiskcache)的区别。a)内存缓存(frommemorycache):具有快速读取和时效性。 快速读取:内存缓存会将编译解析后的文件直接存入该进程的内存中,占据该进程的一定的内存资源,以方便下次运行使用时的快速读取。 时效性:一旦该进程关闭,则该进程的内存则会清空。b)硬盘缓存(fromdis......原创 2021-04-26 10:29:48 · 842 阅读 · 0 评论 -
渐显解析 tcp 三次握手四次挥手 socket
抓包显示三次握手 四次挥手 以及传输过程三次握手都是0字节,因为都是内核在运行。传输过程中无论是服务端还是客户端,只要有一方向另一方发送了数据,另一方必须返回ack确认四次挥手...原创 2021-03-30 14:46:02 · 75 阅读 · 0 评论 -
浅析 promise
关于promise可以先浅显的理解为我去便利蜂买关东煮(返回关东煮就是resolve),如果关东煮没了,我买包子也可以(返回包子就是reject),最后返回的都是吃饱了。 var flag = true; var promise = new Promise( (resolve, reject) => { if (flag) { resolve( '关东煮' ) } else { reject( '包子' ) }原创 2021-03-16 18:11:05 · 163 阅读 · 0 评论 -
JS事件冒泡和事件代理
1. 事件冒泡当触发(点击或者触摸之类的做法)有父元素的子元素的时候,子元素会把接受到的触发事件传给父级,一直会传到window。传递的只是触发事件,而不传递绑定的事件函数,如果父级没有绑定事件函数,就算传递了触发事件也不会看得出来,但是传递的行为确实是做了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c原创 2021-03-15 15:39:07 · 249 阅读 · 0 评论 -
浅显分析 浏览器的 EventLoop 机制
浏览器中的EventLoop是由 主线程 、执行栈和队列共同构成。其中执行栈中的代码时提供给主线程调用的,而队列里面的代码是等待放入执行栈中的。将队列中的代码放到执行栈再被主线程执行的过程就是Event Loop。任务执行的过程当然是有先后顺序的,主要分为两种:宏任务、微任务。宏任务:script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)微任务:Promis原创 2021-03-04 15:24:16 · 267 阅读 · 1 评论