前端社会成长之路
关注
分享
扫一扫
文章平均质量分 73
程序员的脱发之路
在脱发的路上越走越远
展开
-
js获取元素内的文本（不包含子元素文本）
获取一个元素内的第一层文本，比如将一个div标签作为输入框时，我们可能会在里面插入一些元素，但这些元素只是作为标注使用，并不会作为用户输入的内容，这时候我们就不能获取标注元素内部的内容。成功的获取到了内容，因为是我们手动写的html标签，并不是用户输入的内容，默认会带上空格和换行，如果想要去除需要单独处理（如果是用户输入的内容，不建议对换行和空格进行单独处理）遍历所有的子节点，判断如果是text节点，就获取节点中的内容，将所有text节点内容拼接就得到了我们要的结果。// 获取所有text节点的内容。原创 2024-01-24 16:27:32 · 1187 阅读 · 0 评论 -
前端获取用户粘贴的字符串
如果我们需要获取到用户粘贴的字符串并进行相应的处理时。例如根据用户复制的多行字符串生成多行数据。原创 2023-02-15 16:40:37 · 426 阅读 · 1 评论 -
js实现复制功能
js实现复制功能一、具体场景二、实现方式1. document.execCommand（1）具体实现（2）方法特点2.navigator.clipboard.writeText（1）具体实现（2）方法特点一、具体场景前端有时需要实现点击按钮复制的功能，这个时候就不能让用户去手动选择内容右键复制了。二、实现方式1. document.execCommand（1）具体实现复制时，先选中文本，然后调用document.execCommand(‘copy’)，选中的文本就会进入剪贴板。这就需要借助输入框原创 2022-04-12 15:50:21 · 15283 阅读 · 0 评论 -
textarea文本框的placeholder文字换行
textarea文本框的placeholder文字换行一、问题描述二、原生实现三、vue中实现一、问题描述textarea为前端常用的文本输入框，有时候需要placeholder的文字提示更加友好，那样提示文字可能就需要换行。二、原生实现原生textarea的实现方式如下：<textarea rows="6" style="width: 300px;padding: 0;" placeholder="标题 正文 结尾"></textar原创 2022-01-13 15:19:26 · 6675 阅读 · 8 评论 -
vue-router偶现返回失效
vue-router偶现返回失效问题描述解决方式问题描述vue-router 动态addRoute 后 router.back和router.go(-1) 失效，点击返回之后仅仅是路由改变，页面不刷新解决方式在调用 $addRoutes 动态添加方法时，调用一下 router.history.setupListeners()for (let i = 0; i < arr.length; i++) { router.addRoute(arr[i]); // arr 登录后传进的有权原创 2021-12-31 09:25:30 · 2380 阅读 · 0 评论 -
marked.js读取markdown文件，图片实现点击放大
使用marked解析markdown文件并实现图片点击放大效果原创 2021-12-14 15:00:46 · 7391 阅读 · 6 评论 -
按钮focus解决方法
按钮focus（点击按钮后，键盘的空格键和enter键会再次触发按钮点击事件）一、问题描述二、解决方式1.替换标签2.阻止键盘的默认事件一、问题描述当我们在浏览器点击按钮之后，再次按键盘的空格键或者enter键均会再次触发此按钮的点击事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&原创 2021-09-01 15:18:38 · 2413 阅读 · 1 评论 -
github使用ssh链接-配置SSH keys配置
github使用ssh链接一、问题描述二、SSH链接本地配置1.移除之前的远程git库（1）查看本地远程git库（2）修改本地远程git库三、github配置1.配置SSH keys2.centos生成SSH keys（1）首先检查是否已生成SSH keys2.生成SSH keys3.查询SSH keys一、问题描述当我们使用https链接github时，每次push或者pull都需要填写用户名密码，很不方便。特别是自动化部署的时候，更加不便利了。我们可以通过SSH链接，就不需要输入用户名密码了。二、原创 2021-03-31 17:57:24 · 670 阅读 · 0 评论 -
ES6字符串匹配函数
ES6字符串匹配函数一、三个匹配函数1. Arrary.includes()2. Arrary.startsWith()3. Arrary.endsWith()二、具体使用1. Arrary.includes()2. Arrary.startsWith()3. Arrary.endsWith()三、拓展使用一、三个匹配函数1. Arrary.includes()includes(searchString,options)：字符串是否包含指定值。searchString：要搜索的字串（字符串类型）p原创 2021-03-19 10:37:06 · 1025 阅读 · 0 评论 -
本地图片转为file类型
本地图片转为file类型一、场景描述二、解决思路三、具体实现1.相对路径转base642.base64转blob一、场景描述类似我们页面中有一些图片，当用户点击页面上对应图片时，我们需要将图片上传到后台服务器（以file类型的形式）二、解决思路因为图片时放在项目中，所以我们前端只有图片的相对路径。所以我们需要先从相对路径中获取到当前图片的base64编码（通过canvas实现），之后再将其转换为blob格式（file其实是blob数据类型的延伸），最后将blob转换为file类型即可三、具体实现原创 2021-03-18 16:27:54 · 4369 阅读 · 0 评论 -
移动端布局-px转vw、vh
移动端布局长度单位转换一、场景描述二、实现方式1.安装2.配置3.其他配置三、多规则配置一、场景描述一般我们做移动端网页开发时，设计稿一般都是固定的宽高的（比如750*1334）。但是实际上手机的屏幕大小千奇百怪，各种各样都有。这就要求我们开发人员很好的去处理兼容性问题。一般做长度兼容有两种方式，一种是使用rem，一种是使用vw、vh。这里就说一下将px转换为vw、vh。二、实现方式众所周知，vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth。实现这个转换转载 2021-03-01 10:57:37 · 2513 阅读 · 0 评论 -
Javascript对象-Arrary对象
Arrary对象一、Arrary对象简介1.Arrary对象创建二、Arrary对象属性1. length（1）属性描述（2）具体演示三、Arrary对象方法1. push()、pop()2.unshift()、shift()3. toString()、join()4. concat()、splice()5. reverse()、sort()6.slice()一、Arrary对象简介Array 对象用于在单个的变量中存储多个值。1.Arrary对象创建new Array()：新建一个数组对象，数组里原创 2021-02-25 15:23:53 · 746 阅读 · 1 评论 -
vue打包报错UnhandledPromiseRejectionWarning: CssSyntaxError:
记一次vue-cli2 build报错一、错误描述二、解决方式一、错误描述build之后出现如下错误二、解决方式首先注释掉/bulid/webpack.prod.conf.js中的new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true }原创 2021-02-25 15:17:51 · 988 阅读 · 0 评论 -
Web前端-Javascript对象
Javascript对象一、简介二、主要对象1. Arrary2. Boolean3. Date4. Math5. Number6. String7. RegExp8. Functions9. Events10. 自定义对象一、简介JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。二、主要对象Javascript现有对象主要有九个，当然我们也可以自定义对象1. ArraryArray 对象用于在单个的变量中存储多个值。2. Bo原创 2021-02-24 10:34:11 · 110 阅读 · 0 评论 -
Web前端-BOM之Location对象
Location对象一、Location对象简介二、Location对象属性1. hash（1）属性介绍（2）具体演示2. host、hostname、port（1）属性介绍（2）具体演示3. href（1）属性介绍（2）具体演示4. protocol、pathname、search（1）属性介绍（2）具体演示三、Location对象方法1. assign()2. reload()3. replace()四、Location对象描述一、Location对象简介Location 对象包含有关当前 URL原创 2021-02-23 17:30:38 · 638 阅读 · 0 评论 -
Web前端-BOM之History对象
History对象一、History对象简介二、History对象属性1. length（1）属性介绍（2）具体演示三、History对象方法1. back()（1）方法介绍（2）具体演示2. forward()（1）方法介绍（2）具体演示3. go()（1）方法介绍（2）具体演示三、History对象描述一、History对象简介History 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。原创 2021-02-23 15:24:41 · 275 阅读 · 0 评论 -
Web前端-BOM之Navigator对象
Navigator对象一、Navigator对象简介二、Navigator对象集合三、Navigator对象属性1. appCodeName、appName、appVersion（1）属性介绍（2）具体演示2. cookieEnabled、onLine（1）属性介绍（2）具体演示3. platform、userAgent（1）属性介绍（2）具体演示四、Navigator对象方法1. javaEnabled()五、Navigator对象描述一、Navigator对象简介Navigator 对象包含有关浏览原创 2021-02-23 14:01:40 · 1224 阅读 · 0 评论 -
Nginx负载均衡
Nginx HTTP 负载均衡负载均衡反向代理三、常见的WEB负载均衡方法1. 用户手工选择方式2. DNS轮询方式3. 四/七层负载均衡设备四、Nginx的负载均衡1. 轮询模式2. 加权轮询：Weight模式3. ip hash模式4. Fair模式（第三方插件）5. cookie sticky模式（第三方插件）负载均衡负载均衡是由多台服务器以对称的方式组成一个服务器稽核，每台服务器都具有等价的地位，都可以对外提供服务而无须其他服务器的辅助。通过某种负载分担技术，将外部发送过来的请求均匀分配到原创 2021-02-19 14:28:10 · 432 阅读 · 0 评论 -
Local Storage学习笔记
Local Storage学习笔记一、什么是Local Storage二、Local Storage的优势与局限1.优势2.局限三、Local Storage的使用1.Local Storage的浏览器支持情况2.Local Storage的写入3.Local Storage的读取4.Local Storage的修改5.Local Storage的删除（1）删除键值对（2）清除所有内容6.Local Storage键的获取一、什么是Local Storage在HTML5中，新加入了一个Local Sto原创 2021-02-07 10:06:54 · 1728 阅读 · 0 评论 -
ESLint学习笔记
ESLint学习笔记一、简介二、规则配置1.创建配置文件：.eslintrc.js2.忽略文件夹配置：.eslintignore2.ESLint的规则一、简介eslint的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：· ESLint 使用 Espress 解析 JavaScript。· ESLint 使用 AST 去分析代码中的模式· ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。二、规则配置原创 2021-02-06 16:14:21 · 610 阅读 · 0 评论 -
Moment.js学习笔记
Moment.js学习笔记一、简介二、获取时间1.获取当前时间2.获取开始时间（1）获取今天0时0分0秒（2）获取本周第一天(周日)0时0分0秒（3）获取本周周一0时0分0秒（4）获取当前月第一天0时0分0秒3.获取结束时间（1）获取今天23时59分59秒（2）获取本周最后一天(周六)23时59分59秒（3）获取本周周日23时59分59秒（4）获取当前月最后一天23时59分59秒4.获取当前月的总天数5.get Time分别获取当前年月时分三、日期时间格式化1.格式化日期2.格式化时间一、简介Momen原创 2021-02-06 15:42:16 · 622 阅读 · 0 评论 -
Nginx学习笔记（一）
这里写目录标题一、Nginx简介二、正向代理1.概念2.用途三、反向代理1.概念2.作用四、负载均衡五、Nginx 支持的负载均衡调度算法1.weight 轮询（默认）2.ip_hash六、Nginx常用命令一、Nginx简介Nginx(“engine x”)是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。Nginx 可以作为一个 HTTP 服务器进行网站的发布处理，另外 Nginx 可以作为反向代理进行负原创 2021-02-06 14:55:45 · 336 阅读 · 2 评论 -
Web前端-BOM之Screen对象
Screen对象Screen对象简介Screen对象属性1.width、height（1）属性介绍：（2）具体演示：2.availWidth、availHeight（1）属性介绍：（2）具体演示：3.colorDepth（1）属性介绍：（2）具体演示：4.pixelDepth（1）属性介绍：（2）具体演示：5.orientation（1）属性介绍：（2）具体演示：Screen对象描述Screen对象简介Screen 对象包含有关客户端显示屏幕的信息。详细文档请见：w3school之Screen对象Sc原创 2021-02-03 15:49:13 · 718 阅读 · 0 评论 -
Web前端-BOM之Window对象（二）
Window对象（二）-对象方法及对象描述一、对象方法1.提示框 alert()、confirm()、prompt()2.定时器 setTimeout()、setInterval()、clearTimeout()、clearInterval()3.窗口操作 open()、close()4.滚动操作 scrollBy()、scrollTo()二、对象描述一、对象方法1.提示框 alert()、confirm()、prompt()alert()：alert(message)方法显示带有一段消息和一个确认原创 2021-01-28 16:31:32 · 316 阅读 · 0 评论 -
Web前端-BOM之Window对象（一）
Window对象（一）一、Window 对象简介二、Window 对象集合三、Window 对象属性1.closed（1）属性介绍：（2）具体演示：2.defaultStatus（1）属性介绍：（2）具体演示：3.document对象（1）属性介绍：（2）具体演示：4.history对象（1）属性介绍：（2）具体演示：5.innerheight、innerwidth（1）属性介绍：（2）具体演示：6.location对象（1）属性介绍：（2）具体演示：7.name（1）属性介绍：（2）具体演示：8.Navi原创 2021-01-27 15:24:26 · 1171 阅读 · 1 评论 -
Web前端-BOM
BOM一、简介二、对象三、window对象一、简介所谓 BOM 指的就是浏览器对象模型 Browser Object Model，它的核心就是浏览器。它使JavaScript可以和浏览器进行交互。二、对象BOM的核心对象是window对象，它表示浏览器的一个实例。它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，因此网页中所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。三、window对象window对象下面包含几个重要原创 2021-01-27 10:36:13 · 418 阅读 · 0 评论 -
前端图片懒加载
前端图片懒加载两种实现方式一、问题描述二、jquery.lazyload.js1.使用方法：2.参数详细设置：3.具体实现：三、echo.js1.使用方法：2.具体实现：3.源码修改：4.完整源码：一、问题描述在开发页面的时候肯定会遇到图片比较多的时候，虽然我们可能有图片分布式的服务器，但是在客户端还是会有很大的性能开销。为了用户体验，特别是对首屏加载速度要求很高的，通常我们会考虑图片延时加载，lazyloading这款插件已经能很好地实现这一功能，可是是基于jQuery，对于移动端可能不太实用。移动原创 2021-01-26 17:38:58 · 418 阅读 · 0 评论 -
前端性能优化（二）
前端性能优化一、文件懒加载与预加载1.懒加载2.预加载二、重绘与回流三、浏览器缓存四、HTTP缓存1.强制缓存2.协商缓存一、文件懒加载与预加载1.懒加载图片进入可视区域之后请求图片资源对于电商等图片很多，页面很长的业务场景适用减少无效资源的加载并发加载的资源过多会阻塞js的加载，影响网站的正常使用2.预加载图片等静态资源在使用之前的提前请求资源使用到时能从缓存中加载，提升用户体验页面展示的依赖关系维护二、重绘与回流前端性能优化与重绘与回流有关系的原因是：频繁的触发重绘与回流，会导致原创 2021-01-26 14:50:42 · 126 阅读 · 0 评论 -
前端性能优化（一）
前端性能优化性能优化HTML优化CSS优化JS优化图片优化性能优化前端页面渲染过程：用户首先在浏览器中输入一个url，浏览器中的核心代码会将url进行拆分解析。浏览器会将domain发送到dns服务器，dns服务器会根据domain查询对应的ip地址，同时将ip地址返回给浏览器，浏览器在持有ip地址之后，就会知道这个请求要发送的地址，就跟随协议，将ip地址打在协议中，并且请求相关的参数都携带，发送到我们的网络中，经过局域网、交换机、路由器、主干网络，之后请求会到达我们的服务端，服务端是MVC架构，请原创 2021-01-26 10:16:53 · 234 阅读 · 2 评论 -
第一次创建git仓库之后与本地合并
第一次创建git仓库之后与本地合并操作步骤1.git init //初始化仓库2.git add .(文件name) //添加文件到本地仓库3.git commit -m “first commit” //添加文件描述信息4.git remote add origin + 远程仓库地址 //链接远程仓库，创建主分支5.git pull origin master // 把本地仓库的变化连接到远程仓库主分支如果此时出现： Updates were rejected because the ti原创 2020-12-30 17:25:09 · 396 阅读 · 0 评论 -
webstorm使用postcss的Autoprefixer模块解决css浏览器兼容问题
使用postcss的Autoprefixer模块解决css浏览器兼容问题一、插件安装二、具体配置三、使用一、插件安装1、安装Autoprefixer打开cmd控制台，输入下面一行npm命令，安装Autoprefixer模块：-g是全局安装，如果不加会安装在当前目录。npm install autoprefixer -g2、安装postcss-cliAutoprefixer其实是postcss的插件npm install postcss-cli -g3、安装 postcssnpm ins原创 2020-12-28 16:50:50 · 753 阅读 · 3 评论 -
云服务器（centOS）安装配置redis
云服务器上redis安装与配置一、前期准备1.下载安装包2.上传安装包3.解压压缩包二、安装1.编译三、安装三、部署1.启动服务2.配置（1）将常用命令文件统一管理一、前期准备1.下载安装包进入redis官网 https://redis.io/download 下载对应的安装包2.上传安装包将安装包上传到自己云服务器对应的文件夹下使用WinSCP或者xftp直接托上去即可3.解压压缩包使用xshell或者finalshell连接云服务器，进入对应文件夹，输入解压命令：tar -zxf原创 2020-12-18 14:52:24 · 504 阅读 · 0 评论 -
nodejs获取与设置cookie
nodejs获取与设置cookie一、获取cookie1.插件下载获取cookie二、设置cookie1.基础设置2.设置过期时间-maxAge3.设置域名-domain4.设置路径-path5.设置httpOnly一、获取cookie1.插件下载在nodejs下不太好直接获取到request里面的cookie，需要安装cookie-parser插件来获取安装：npm install cookie-parser --save使用：const express = require('expres原创 2020-12-17 16:40:49 · 10211 阅读 · 6 评论 -
vue-cli 3.0生产环境中去除console
vue-cli 3.0生产环境中去除console一、问题描述二、具体插件1.babel-plugin-transform-remove-console（1）安装（2）配置2.terser-webpack-plugin（1）安装（2）配置一、问题描述当我们在开发环境是，可能会打很多console来调试，但是发布到生产环境后，这些console就会很不美观而且影响性能还容易暴露部分信息。但是要一个一个删除太过麻烦，并且可能后续开发还要使用。这里就推荐一些插件来解决这些问题二、具体插件1.babel-p原创 2020-12-15 15:38:09 · 883 阅读 · 0 评论 -
Sequelize——时间戳timestamps
时间戳timestamps一、简介二、开启与关闭1.开启时间戳2.关闭时间戳3.自定义关闭一个二、自定义时间戳字段三、时区设置一、简介默认情况下，Sequelize 使用数据类型 DataTypes.DATE 自动向每个模型添加 createdAt 和 updatedAt 字段。 这些字段会自动进行管理 - 每当你使用Sequelize 创建或更新内容时，这些字段都会被自动设置.。createdAt 字段将包含代表创建时刻的时间戳,而 updatedAt 字段将包含最新更新的时间戳。注意：只有使用Se原创 2020-12-14 14:45:48 · 9259 阅读 · 0 评论 -
node-schedule定时器（一）Cron方式实现
Cron方式实现一、node-schedule简介二、Cron方式用法1.基本使用：（1）代码实现（2）参数详解2.事件范围（1）代码写法（2）参数详解3.多个时间点（1）代码写法（2）参数详解一、node-schedule简介npm官方网址： https://www.npmjs.com/package/node-schedulenode-schedule可以用来在nodejs中实现定时器，虽然我们可以通过setTimeInterval实现，但是使用node-schedule可以更加方便的实现在具体的原创 2020-12-09 11:16:19 · 1859 阅读 · 0 评论 -
js阻止函数连续执行
js阻止函数连续执行一、问题描述二、实现思路三、代码实现1.不需要传递参数2.传递参数一、问题描述当一些情况下时，我们不希望我们的js方法被连续的执行，比如说登录按钮的点击事件，我们不希望用户恶意的点击出现一些意外情况。还有一些vue中的自定义事件传值函数，我们希望其不被连续触发，而是接收其最后一次触发的值二、实现思路我们可以在每次事件触发时将我们的方法增加一个定时器，当然增加之前要进行一个判断，如果已有定时器说明已经处在执行队列中，清除其定时器，让其继续等待执行。当定时器结束时在执行需要触发的方法原创 2020-12-01 17:54:38 · 1807 阅读 · 0 评论 -
async函数（一）——初识async
初识asyncasync概述1.简介2.语法3.返回值async概述1.简介async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。2.语法async function name([param[, param[, … param]]]) { statements }name: 函数名称。param: 要传递给函数的参数的名称。statements: 函数体语句。基础写法：async function demo(name) {原创 2020-11-30 10:30:40 · 547 阅读 · 0 评论 -
react在定义DOM时的两种注释方式
background-attachment一、属性介绍二、属性值三、详细介绍1.scroll：背景图滚动2.local：滚动元素背景图滚动3.fixed：背景图固定一、属性介绍background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。默认值:scrollJavaScript 语法:object object.style.backgroundAttachment=“fixed”版本:CSS1继承:no二、属性值值描述原创 2020-11-18 17:26:31 · 729 阅读 · 0 评论 -
js数字操作之tofixed()+parseInt()+parseFloat()
tofixed+parseInt+parseFloat一、数字toFixed()1.toFixed()2.缺点二、parseInt()三、parseFloat()一、数字toFixed()1.toFixed()方法可把 Number 四舍五入为指定小数位数的数字。但需要注意的是，它的返回值其实是个字符串它的入参须是一个正整数，而且只能作用于number类型否则会报错 let a = 1.111111 let b = a.toFixed(2); console.log(b); cons原创 2020-11-16 11:30:03 · 2674 阅读 · 0 评论