forteenBrother-CSDN博客

原创 Taro 项目怎么获取元素的高度和视口高度

最近做小程序，用的Taro，需要设置空状态居中显示，因为空状态出现的地方不一样，所以需要动态设置，那么就需要获取元素的高度来计算文档翻了一遍也没有找到，原生js获取高度得到的是null，百度了下一下Taro 怎么获取元素的高度，教程里全都是用原生js，不知道他们怎么得到的查不到的时候就要想到了强大的chatgpt4，然后去问了一下，果真问到了。

2023-05-26 15:47:25 2596

原创获取元素到body顶部的距离，offsetTop和offsetParent，getBoundingClientRect

使用offset获取元素到顶部的距离的时候，可以发现function offSet(curEle) { var totalLeft = null; var totalTop = null; var par = curEle.offsetParent; //首先把自己本身的相加 totalLeft += curEle.offsetLeft; totalTop += curEle.offsetTop; //现在开始一级一级往上查找，只要没有遇到body

2022-03-09 14:22:57 3657

转载无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本

无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本@TOC链接: https://blog.csdn.net/dujyong/article/details/106359483.

2021-10-12 23:11:42 564

原创解决Mixed Content:the page at‘https://‘ was loaded over HTTPS,but requested an insecure resource ‘http

解决Mixed Content:the page at‘https://’ was loaded over HTTPS,but requested an insecure resource ‘http://’问题：在Vue项目中使用axios访问了一个http协议的接口，报错如下查资料后发现原因是在https中请求http接口或引入http资源都会被直接blocked（阻止），浏览器默认此行为不安全，会拦截。解决办法：<meta http-equiv="Content-Security-Po

2021-08-11 16:49:39 25004 10

原创 vue项目中配置了二级域名启动报“Invalid Host header”

vue项目中配置了二级域名启动报“Invalid Host header”解决因为后台配置了访问权限，在本地开发的时候用二级域名代理localhost访问请求，打开之后报Invalid Host header解决修改webpack.dev.conf.js，在devServer对中加入disableHostCheck: true,属性然后重新启动就ok了参考链接：https://blog.csdn.net/xr510002594/article/details/100007908...

2021-07-14 18:55:40 296

原创 Http

代理表现在应用层，既可以表现得透明，又可以不透明，代理主要有如下几种作用：缓存（可以是公开的也可以是私有的，像浏览器的缓存）过滤（像反病毒扫描，家长控制...）负载均衡（让多个服务器服务不同的请求）认证（对不同资源进行权限管理）日志记录（允许存储历史信息）HTTP 的基本性质简单可扩展：HTTP headers让协议扩展变得非常容易。只要服务端和客户端就新 headers 达成语义一致，新功能就可以被轻松加入进来。无状态、有会话：在同一个连接中，两个执行成功的请求之间.

2021-05-01 14:11:19 116

原创 echarts中legend的文本换行

UI要求是这样的，但是出来的legend的text是在同一行开始想用</ br>，但是未生效，后来改成了\n换行符，就搞定了 legend: { left: 'right', width: '60%', top: 'center', itemWidth: 16, itemHeight: 10, ..

2021-04-25 16:11:09 11610 5

原创 Vue 在进入某个路由之前刷新页面

暴力解决一个前端问题在进入页面之前，先判断本地存储是不是有标记，如果没有标记的话，就刷新，然后打上标记存在本地，在离开页面的时候，移除标记，并且在每次打开项目的时候，移除本标记 beforeRouteEnter(to, from, next) { next(vm => { let hasLoaded = localStorage.getItem("hasLoaded"); if (!hasLoaded &&

2021-03-23 19:52:22 861

原创如何在高德地图windowInfo弹窗中使用VUE组件

项目中，使用高德地图的API，有个需求是在点击marker标记的时候，需要弹出windowInfo弹窗，然后弹窗中还有操作等分析：windowInfo中的content接口一组html字符串，但是如果有操作的话，还要动态的操作dom，写起来费劲不说，还很容易出bug但是在vue.js 的API中有个el选项，可以获取到vue的dom等有了这个属性，就可以使用vue组件加入到windowInfo中，然后弹窗方法和内容都写在弹窗组件中就可以了，方法如下import BaseDevi

2020-10-31 14:08:42 2389 1

原创 html2canvas导出带滚动条截取不到超出部分的bug解决

看网上说设置高度，但是我设置了高度是变化了，但是导出来的图片还是只有两个是这个样子的方法1 ：动态设置高度，但是子元素不能为百分比，不然截取到的还是原来方法2：外框再加一层div包裹 <div class="compare_charts">   <div id="..

2020-10-31 13:47:16 2951 5

原创盘点一些项目中的不知道为什么的坑

const AXIOS_INSTANCE_CHECK = Axios.create({ timeout: 100000, baseURL: BASE_URL_CHECK});// 请求拦截器AXIOS_INSTANCE_CHECK.interceptors.request.use( (config) => { // 在发送之前做些什么 config.headers.uid = cookie.getCookie('hs_uid'); .

2020-10-31 13:17:04 138

原创 css中的position定位

position属性用于指定一个元素在文档中的定位方式。定位属性：top right bottom left 决定了元素的最终显示位置。

2020-07-31 15:08:00 495

原创 Typescript中的命名空间

命名空间内部模块称为命名空间，主要用于组织代码，避免命名冲突。一个模块里可以包含多个命名空间。namespace A{ export class Animal{ name:string; constructor(name){ this.name = name; } }}namespace B{ export class Animal{ name:string; co

2020-06-28 21:25:26 170

原创 Typescript中的模块

模块的概念在Typescript1.5里术语发生了变化，“内部模块”现在称为“命名空间”，“外部模块”现在简称模块。模块在其自身的作用域里执行，而不是在全局作用域里。这意味着定义在一个模块里的变量，函数，类等，在模块外部是不可见的，除非你明确地使用export形式之一导出他们。相反，如果想使用其他模块导出的变量，函数，类，接口等的时候，必须要使用import的形式之一导入他们。其实也是就把一些公共的功能单独抽离成一个文件来作为一个模块在模块里面的变量，函数，类等都是默认私有的，如果需要在外部

2020-06-28 21:12:25 141

原创 Typescript类型、接口、类、泛型综合使用

功能：定义一个操作数据库的库，支持Mysql Mssql MongDb要求：Mysql Mssql MongoDb功能一样都有add update delete get方法注意：约束统一规范，代码复用解决方案：用接口约束规范用泛型实现复用interface DBI<T>{ add(info: T):boolean; delete(id: number):boolean; update(info: T, id: number): boolean

2020-06-28 20:35:59 191

原创 Typescript中的泛型

1. 泛型是什么软件工程中，我么不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。像在C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户就可以以自己的数据类型来使用组件。泛型就是解决类、接口、方法的复用性、以及对不特定数据类型的支持。...

2020-06-28 20:15:30 129

原创 Typescript中的接口

1. 接口的作用在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用，接口定义了某一批类所需要遵守的规范吗，接口不关心这些类的内部状态数据，也不关心这些类里面的方法的实现细节，它只规定这批类里面必须提供某些方法，提供这些方法的类就可以满足实际需要。typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。2. 接口的分类属性类接口函数类接口可索引接口类类型接口接口扩展2.1

2020-06-27 10:27:41 199

原创 Typescript中的类

1. es5中的类function Person(){ this.name = "张三"; // 属性 this.age = 20; this.showName = function(){ // 实例方法 console.log(this.name); }}// 原型链上的属性会被多个实例共享，构造函数不会Person.prototype.sex = "男";Person.prototype.work =

2020-06-25 13:49:45 961

原创 Typescript中的函数

1. 函数的定义// es5中定义函数的方法// 函数声明法function run() { return 123;}// 匿名函数let run1 = function(){ return 123;}// typescript中定义函数的方法// 函数声明法function run():string { return 'run';}// 匿名函数let run1 = function():number { return 123;}

2020-06-23 00:34:11 162

原创 Typescript 中的数据类型

1. typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验，在定义变量的时候需要指定变量的类型，在typescript中主要提供了布尔类型 boolean 数字类型 number 字符串类型 string 数组类型 array 元组类型 tuple 枚举类型 enum 任意类型 any null undefined void类型 never类型1. 布尔类型let flag:boolean = true;只能为true 或者 false，否则编译出错

2020-06-22 22:43:19 210

原创 Typescript初识

1. 安装npm install -g typescript cnpm install -g typescript yarn add global typescript验证安装成功：重新打开命令终端输入tsc -v2. 运行typescripttsc greeter.ts会生成相应的es5js代码3. 使用vscode自动编译.ts文件tsc --init 生成tsconfig.json 将tsconfig.json中的outDir路径改成需要的路径，我改成了“

2020-06-22 21:51:22 176

原创前端性能优化 - 浏览器存储

localstorage cookie sessionStorage indexdbpwa service workerCookie设计初衷：因为http无状态，所以需要cookie去维持客户端的状态解决登录信息，用户信息的维护问题用途用于浏览器端和服务器端的交互客户端自身的数据Js 可以通过document.cookie 读写cookie...

2020-05-10 17:32:46 263

原创 AXIOS的post请求报错uest header field Content-Type is not allowed by Access-Control-Allow-Headers in pref

1. 遇到的问题在提交表单的时候，需要验证登录身份状态，如果状态不通过，不允许操作，但是在post请求时，往往会报一个身份验证不通过的错误，但是用户确实已经登录。2. 问题分析由于restful接口需要在头部header传递两个字段：Content-Type: application/jsonAccess-Token: 84c6635800b14e0eba4f7ece65e095a1post请求在发送请求时，会先发送一个预请求，即options请求，预请求通过之后，才会继续发送正式po

2020-05-10 14:10:17 309

转载 10个Vue开发技巧

路由参数解耦一般在组件内使用路由参数，大多数人会这样做：export default { methods: { getParamsId() { return this.$route.params.id } }}在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用...

2020-04-27 22:19:05 258

原创一行代码实现网页变灰效果

4月4日，几乎所有的网站都变成了灰色，百度，B站，腾讯视频，爱奇艺视频大家可以看到，所有的元素都变成了灰色，包括图片。起先我最想想到的是可能加了一个蒙版，但很快就放弃了这个愚蠢的想法，因为加了蒙版之后，元素都会变的不可点击。给所有的元素添加css样式不太可能，毕竟如果项目很大的话，这可是一个不小的工作量，那到底是如何实现的呢。其实，只需要几行代码就搞定了。filter: gray...

2020-04-26 22:30:18 320

转载 nginx.conf各参数的意义

搬运+翻译至http://qiita.com/syou007/items/3e2d410bbe65a364b603/etc/nginx/nginx.conf记录各个参数的意义useruser nginx;nginx开启后会启动3个进程master process，worker process，cache manager process。本参数指定了master pr...

2020-04-23 11:50:09 400

原创前端性能优化 - 减少重绘与回流

Css性能让js变慢回流当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，就称为回流。页面布局和几何属性改变时就需要回流重绘当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，不会影响布局，比如bg-color6.3 避免重绘和回流的两种方式1.盒模型相关的属性会触发重新布局，会触发页面回流Wi...

2020-04-20 23:26:54 969

原创 vue监听window.resize

1.问题今天在项目中遇到一个问题，使用eCharts图表时，在窗口改变大小时，需要重新渲染图表，我将eCharts封装成了组件，在组件中监听window.onresize，但是效果却不与预期相符，一个页面中有多个eChart组件，但是只有最后一个组件的监听生效，其他的都没有生效。但是这个插件是我从之前的项目中直接拿过来用的，唯一不同的地方是，之前的项目引入了jQquary，监听使用$(wi...

2020-04-19 23:46:42 1649

原创 element-ui树形控件隐藏某些指定的节点

UI今天给了一张图，需要树形控件通过自定义节点内容实现。需要显示父节点，不显示子节点，点击父节点拿到子节点的数据，显示在表格中。如下图，就长这样。实现定义节点<template> <div id="operatePush" class="operate_push"> <el-tree :data="treeData" ...

2020-04-19 23:34:39 10288 3

原创前端性能优化 - 懒加载与预加载

1.什么是懒加载懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。2.为什么要用懒加载能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片...

2020-04-19 19:27:32 389

转载前端性能优化 - 图片的优化

Google Web Fundamentals的说法：图片优化既是一门艺术，也是一门科学，图片优化是一门艺术，是因为单个图片的压缩不存在最好的特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。1. 图片格式我们经常听到的词语包括矢量图、标量图、SVG、...

2020-04-19 19:18:06 340

原创前端性能优化-资源的合并与压缩

1资源的合并与压缩资源合并 => 减少http的请求数量资源压缩 => 减少请求资源的大小2. 压缩2.1 Html压缩HTML代码压缩就是压缩这些在文本文件中有意义（编辑代码时有意义），但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。2.2 Css压缩无效代码删除Css语义合...

2020-04-19 18:42:06 324

转载前端性能优化

性能优化1. 说到前端性能优化，看了许多文章，无非就是两大类：浏览器层面和http层面。其中包括：资源：资源合并压缩图片：图片压缩与优化 css与js的装载与执行懒加载与预加载重绘与回流浏览器存储 http缓存服务端优化2. 前端的本质前端的本质实际上就是一个GUI软件3.前端性能的本质性能问题多种多样：瓶颈可能出现在网络传输过过程，造成前端数据...

2020-04-19 16:47:58 404

翻译 JavaScript 内存管理和垃圾回收

像C语言这样的底层语言一般都有底层的内存管理接口，比如 malloc()和free()。相反，JavaScript具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存，在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放，释放的过程称为垃圾回收。这种垃圾收集的机制很简单，找出那些不在继续使用的变量，然后释放其占用的存。为此，垃圾收集器就会按照固定的时间间隔（...

2020-04-06 22:35:28 249

forteenBrother的博客