sylvia_0815-CSDN博客

原创 angular 学习使用笔记-修改端口

创建后的angular端口，默认是4200更改了端口命令为：ng serve --port 1000当我在直接输出上述命令时：所以我们可以直接改造package.json文件 "dev": "ng serve --port 1020",

2022-01-26 15:56:56 1266

原创 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 887

原创从网上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 1460

原创页面打印以及预览指定区域《超实用的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 597

原创网页将不能被另存为《超实用的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 753 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 478

原创删除时弹出确认对话框《超实用的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 721

原创修改浏览器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 498

原创 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 729

原创让层可以随意拖动《超实用的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 61

原创隐藏层《超实用的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 201

原创表格内容的展开和折叠效果《超实用的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 895

原创动态插入和删除单元行《超实用的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 65

原创 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 707

原创 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 510

原创 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 503

原创前端实现继承的方法

方法编号方法名称代码示例所属模式技术注解 1 2 3 4 5 6 7 8 9 10 11

2021-12-06 16:46:29 269

原创正则表达式必须由小写字母、数字字符“-”或“.”组成，并且必须以字母数字字符开头和结尾

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 3402

原创 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 164

原创 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 311

原创浅析广度优先遍历（BFS）和深度优先遍历（DFS）

想要了解广度优先遍历（BFS）和深度优先遍历（DFS）我们需要先了解图的概念。图的定义：图在数据结构中是中一对多的关系，一般分为有向图、无向图和权重图。常用邻接矩阵或者邻接链表来表示图中结点的关系有向图（Directed Graph）：有向图中的相连线是有方向的。无向图（Undirected Graph）：在无向图中，每个顶点和其他顶点通过相连线连接。权重图（Weighted Graph）：在权重图中，每条相连线有各自的权重。...

2021-10-28 11:15:55 2859

原创 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 163

原创只执行一次的函数

<!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>只执行一次的程序&lt

2021-09-15 14:14:30 324

原创浅析耦合紧耦合松耦合解耦

耦合指模块之间的依赖关系，包括控制关系、调用关系、数据传递关系。模块间联系越多，其耦合性越强，同时表明其独立性越差。软件设计中通常用耦合度和内聚度作为衡量模块独立程度的标准。划分模块的一个准则就是高内聚低耦合。内聚内聚性是对一个模块内部各个组成元素之间相互结合的紧密程度的度量指标。模块中组成元素结合的越紧密，模块的内聚性就越高，模块的独立性也就越高。理想的内聚性要求模块的功能应明确、单一，即一个模块只做一件事情。模块的内聚性和耦合性是两个相互对立且又密切相关的概念。紧耦合紧耦合架构本质是.

2021-09-14 14:12:07 1832

原创浅析 vue mvvm 中观察者模式和订阅者模式

总结从表面上看：观察者模式里，只有两个角色 —— 观察者 + 被观察者而发布订阅模式里，却不仅仅只有发布者和订阅者两个角色，还有一个经常被我们忽略的 —— 经纪人Broker往更深层次讲：观察者和被观察者，是松耦合的关系发布者和订阅者，则完全不存在耦合从使用层面上讲：观察者模式，多用于单个应用内部发布订阅模式，则更多的是一种跨应用的模式(cross-application pattern)，比如我们常用的消息中间件鸣谢https://zhuanlan.zhihu.com/p/5135.

2021-09-13 17:38:30 704

原创浅析 vue mvvm模式中采用的 Object.defineProperty() 方法

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。需要在直接在 Object 构造器对象上调用此方法。虽然直接修改属性也是ok但是denfineProperty 方法是不会被修改的。关于这点api是这样写的：该方法允许精确地添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，在枚举对象属性时会被枚举到（for…in 或 Object.keys 方法），可以改变这些属性的值，也可以删除这些属性。这个方法允许修改默认.

2021-09-13 14:36:09 108

原创 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 668

原创 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 189

原创 vue npm i 报错 Can‘t find Python executable “python“, you can set the PYTHON env variable.

情形: 前提：公司测试环境上线流程：本地提交到 gitlab 再由 jenkis 打包。后端经理在自家更改了前端代码。只是说把element-ui的版本号提高。但是，之后我们前端的代码到测试服务器就异常，主要为样式显示不完全。本地打包后查看是完全好用的。经过多方排查，发现测试环境是提高了node和npm版本就好用了。因为环境的版本要一致那么，我们就需要升到指定版本就好。那么我们来提高node和npm吧。1. 安装指定版本的npm1.1安装淘宝镜像即 npm转cnpm 防止npm安装过慢..

2021-08-25 18:14:46 525

原创 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 265

原创 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 84

原创 js正则表达式只有小写字母和数字不允许全数字

let str = '123456aaa';let reg= /^(?!^[0-9]*$)^([a-z0-9]{8,16}$)/;console.log(reg.test(str));

2021-08-04 18:07:45 1902

原创关于scss会把css样式覆盖

需求是当值是30的时候框应该是红色的，但是还依旧是绿色，并且hover还是可以的。当屏蔽scss中的绿色边框是可以的。

2021-08-03 14:57:30 697

原创 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 2447

原创 Vue的History模式和Hash模式的区别理解

1. hash模式早期前端路由的实现就是基于location.hash来实现，也就是锚点。本质上就是改变window.location的href属性。我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新。这也就是，单页面应用嘛。hash模式有下面几种特性：URL中hash值只是客户的一种状态，也就是说当向服务器发出请求时，hash部分是不会被发送的。hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。可以

2021-07-26 15:10:34 1304

原创公众号引用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 497

原创 IndexDB 小白使用体验

1.IndexDB的概述现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalSto

2021-06-30 19:04:47 1448 2

使用webpack打包ts.zip

node-v12.14.1-win-x64.zip

queryLoop.html

Export2Excel.js

空空如也