随笔分类 -  JavaScript

前端操作剪切板不完全指北
摘要：由于浏览器隐私协议限制，以前浏览器是不允许直接访问剪切板的，最近几年，随着web应用兴起，W3C也在逐渐拓宽JavaScript应用范围，现在前端也能直接操作剪切板。文中按照访问方式，分为间接访问和直接访问。 间接访问 交互事件 用户交互事件，如paste（复制）、cut（剪切）、dragstart 阅读全文
posted @ 2020-12-26 21:09 Gerryli 阅读(595) 评论(0) 推荐(0)
Fullscreen API与DOM监听API
摘要：前言 以下几个API，在web开发中可以简化我们一部分交互操作。 Fullscreen API 有时候我们想要全屏预览的效果，比如类似于图片预览、幻灯片播放等。全屏API是一个很好的选择。 基本用法 打开全屏 element.requestFullscreen().then(() => { // 成 阅读全文
posted @ 2020-10-14 14:45 Gerryli 阅读(388) 评论(0) 推荐(0)
前端读取Blob内容
摘要：简述 前端由于安全方面的因素，不能直接对文件进行写操作。但是在实际的业务需求中，难免会遇到各种各样文件的下载、预览。 如果服务端下载文件是以流的形式传递到前端，前端通常是将流转换为 ,借用 标签的 属性，进行文件下载。但是有时候会遇到下载文件处理失败的场景，这样服务端消息的返回格式不再是流，而是 ， 阅读全文
posted @ 2020-03-02 21:08 Gerryli 阅读(9925) 评论(0) 推荐(2)
一文入门富文本编辑器
摘要：简介 富文本编辑器，能够使 页面像 一样，实现对文本的编辑，通常应用在一些文本处理比较多的系统中。现在业界有很多成熟的富文本编辑器，比如功能齐全啊 "TinyMCE" 、轻量高效的 "wangEditor" 、百度出品的 "UEditor" 等。富文本编辑器很多，但是却很少思考如何从零开始，实现一个 阅读全文
posted @ 2020-01-20 16:05 Gerryli 阅读(1339) 评论(0) 推荐(3)
JavaScript正则表达式入门
摘要：工作中，正则表达式用的可能不是很多，一般使用的时候网上都有现成的实例，很少缺乏比较全面的理解。本文主要以匹配HTML标签为例，简述下正则表达式常用的功能点。匹配HTML片段如下： let str = ` <div id="app"> <div>21</div> <h1> <span>hello</s 阅读全文
posted @ 2019-12-26 20:18 Gerryli 阅读(481) 评论(2) 推荐(2)
富文本粘贴文本去除默认格式
摘要：在我们开发过程中，经常用到的文本输入框，常用的是input/textarea。然而在有些情况下，input/textarea可能满足不了我们的业务需求，textarea/input大部分是处理纯文本，不能附加一些自定义样式，文本域内业务操作空间也不怎么大，但是富文本，即可以编辑的HTML，可以针对输 阅读全文
posted @ 2019-11-07 18:18 Gerryli 阅读(4419) 评论(0) 推荐(1)
textarea中文本高亮选中
摘要：最近在实现原文/译文句段高亮对比显示，和有道翻译类似，如下图所示： 最初的解决方案是采用富文本编辑器，把所有句段信息都用HTML标签包裹，操作空间比较大，页面上需要的功能几乎都可以实现，但是由此带来了许多的弊端，比如： 1.复制文本存在原始格式 2.复制大量文本存在性能问题（富文本编辑器的通病，复制 阅读全文
posted @ 2019-10-23 14:28 Gerryli 阅读(4178) 评论(0) 推荐(1)
vue中使用web worker
摘要：众所周知，JavaScript是单线程的，一些复杂比较耗时的操作，会阻塞页面的渲染交互，引起页面卡顿，影响用户体验。web worker是html5的新特性之一，主要就是用来解决此类问题，为页面额外开启一个线程，用来处理一些比较耗时操作，不影响主线程的进行。 在实际vue项目的开发使用过程中，还是遇 阅读全文
posted @ 2019-09-03 22:07 Gerryli 阅读(20742) 评论(25) 推荐(1)
手动实现Promise
摘要：Promise对大家来说并不是很陌生，它是一个异步编程的解决方案，主要解决了前端回调地域问题。用阮老师的话说，它“就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果”。 Promise有三种状态：pending(初始状态)、fulfilled(成功)、reject(失败)，初 阅读全文
posted @ 2019-04-17 09:05 Gerryli 阅读(1213) 评论(0) 推荐(1)
JavaScript之扑朔迷离的this
摘要：JavaScript这门语言中，最令人迷惑的地方有三个，闭包、this、原型。针对大多数人，可以利用词法作用域等避开this的坑，但是我们不能一直生活在舒适区，要敢于打破砂锅问到底，对我们来说也是一种提升。 一、一般对this关键字的误解： 1、this指向函数自身 2、this指向函数声明的词法作 阅读全文
posted @ 2019-03-17 13:54 Gerryli 阅读(614) 评论(1) 推荐(1)
浅析js闭包
摘要：闭包是一个老生常谈的问题，简单概括下闭包的形成的两个条件： 1、定义在函数内部 2、函数内部引用父层作用域变量 举一个最简单的例子： 以上代码会在控制台输出“1”。这是什么为什么呢？函数内部变量在调用结束后一般都会销毁，以上代码在test方法调用结束后并没有被销毁，这是由于js语言本身垃圾回收导致的 阅读全文
posted @ 2019-03-10 21:34 Gerryli 阅读(539) 评论(0) 推荐(1)
浏览器操作剪切板
摘要：在工作中，有时候会有需求操作剪切板内容（复制、粘贴），看了很多种方法，js高程中推荐以下写法： 实际应用中，也可以借助浏览器的document.execCommand 命令，兼容性如下所示： 基本用法： MDN：https://developer.mozilla.org/zh-CN/docs/Web 阅读全文
posted @ 2019-01-10 08:58 Gerryli 阅读(1350) 评论(0) 推荐(1)
javascript设计模式之发布订阅模式
摘要：发布-订阅设计模式对大家来说并不是很陌生，举一个最简单的例子，在前端开发过程中，事件的绑定就是其实际的应用。首先我们先了解下什么是发布-订阅模式。 基本概念：发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都得到通知。在前端开发中，我们一 阅读全文
posted @ 2019-01-08 21:16 Gerryli 阅读(991) 评论(0) 推荐(1)