随笔分类 - Web前端
摘要：上一篇我介绍了如何在VSCode Webview中实现点击链接下载图片或文件，本文介绍如何在默认浏览器中打开一个新的页面。 在浏览器中，如果要实现打开一个新的页面有许多种不同的方法，例如： window.open("https://www.cnblogs.com/jaxu", "_blank");
阅读全文
摘要：众所周知，在一个普通的HTML页面中，如果要实现一个链接点击后下载图片，只需要在页面上放一个<a>标签，然后将属性href的值指向图片的URL或者Base64字符串就可以了。或者按照stackoverflow上提供的方法动态创建<a>标签来完成图片的下载动作。不过原理都是相同的。 但是这个方法在VS
阅读全文
摘要：今天早上打开电脑，更新了日常工作的github仓库，然后就是习惯性地执行了"npm install"，发现报了下面这个错误： Error: error:0308010C:digital envelope routines::unsupported 顺便看了一下错误堆栈，发现是一个Node的内核文件抛
阅读全文
摘要：参考sapui5 TreeTable控件的示例，我们发现所有的可展开列（即所谓的hierarchical data column）默认都在第一列，而且API中并没有给出对应的属性或方法来重新指定可展开列在table中的位置。 我们可以编写一个自定义控件，使其继承sapui5的TreeTable控件，
阅读全文
摘要：前段时间在用Promise.all执行一个非常大批量的操作时遇到一个奇怪的问题。 这个Promise.all需要遍历一个指定目录中的所有文件，并以异步的方式读取文件内容并进行后续操作。由于目录中的文件数目比较多（大约8000+），Promise.all在执行的过程中有许多文件读取失败，但是如果指定一
阅读全文
摘要：JavaScript使用符号三个点（...）作为剩余运算符和展开运算符，不过这两个运算符是有区别的。 最主要的区别就是，剩余运算符将用户提供的某些特定值的其余部分放入JavaScript数组中，而展开运算符则将可迭代的对象展开为单个元素。 例如下面这段代码，其中使用了剩余运算符将部分值存放到数组中：
阅读全文
摘要：今天发现一个可以通过CSS使DIV的垂直滚动条保持在底部的方法，记录一下！ .container { height: 100px; overflow: auto; display: flex; flex-direction: column-reverse; } 在线查看例子：https://code
阅读全文
摘要：看到标题你可能会想，如此简单的问题值得去探究吗？如果我有一个json object，只需下面简单的几行代码就可以完成： var obj = { "_id": "5078c3a803ff4197dc81fbfb", "email": "user1@gmail.com", "image": "some_
阅读全文
摘要：最近在执行一个gulp任务时遇到下面这个错误： Google的结果是说这个是gulp 3在Node 12.x上的一个bug。解决的办法有两个：要么通过nvm将node版本降到12以下，要么将gulp升级到4。由于我工作的电脑上还有其它的项目需要依赖node 12.x版本，所以只能采用第二种办法，将g
阅读全文
摘要：众所周知，jQuery提供了css方法，用来给指定的元素设置css样式，或者返回一个或多个样式属性，具体的介绍可以参考W3school上的说明。 不过，通过这种方式给元素设置样式时，!important标记会被忽略掉。例如下面的代码： $("p").css("min-height", "calc(1
阅读全文
摘要：我们在使用git初始化一个项目时，尤其是通过git submodule update --init --remote初始化子模块时，可能会遇到下面这个错误： 这是由于当你通过HTTPS访问Git远程仓库的时候，如果服务器上的SSL证书未经过第三方机构认证，git就会报错。原因是因为未知的没有签署过的
阅读全文
摘要：提高网站性能最简单的方式之一是合并压缩JavaScript和CSS文件。但是当你需要调试这些压缩文件中的代码时，那将会是一场噩梦。不过也不用担心，souce maps将会帮你解决这一问题。 Source map提供了一种方式，能够将压缩文件中的代码映射回源文件中对应的位置。这意味着，你可以借助一些软
阅读全文
摘要：在Web页面上，如果想模拟对话框效果，一般会给div元素添加position:fixed的样式来实现，然后给背景添加一个半透明的遮罩。如： HTML代码： 这种结构在大部分浏览器和移动设备上显示都没有问题，但是在苹果手机（safari mobile）上，当底部的键盘或者选择器（日期选择，下拉列表选择
阅读全文
摘要：我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法，例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值和最小值等等，我们需要在相应的地方给出提示信息。如果用户修正了数据，我们还要将提示信息隐藏起来。 有一些现成的插件可以让你非常方便地实现这一功能，如
阅读全文
摘要：问题描述：服务器系统架构采用的是koa（并非koa2），客户端富文本编辑器采用的是百度的ueditor控件。现在需要ueditor支持将图片直接上传到七牛云。 前提：百度的ueditor需要在本地配置为可用，图片上传相关的配置可以参考官方文档的描述。由于服务器用的node.js，因此ueditor目
阅读全文
摘要：通过JQuery的.html()函数我们可以非常方便地加载一段HTML到指定的元素中，例如给<div></div>中放入一组图片。问题是JQuery的.html()函数是同步的，如果我们想知道HTML被加载之后容器的高，例如获取容器的offsetHeight或scrollHeight属性的值，必须要
阅读全文
摘要：网页中的select下拉列表，文字太长的话在iOS的Safari浏览器里会被自动截断，显示成下面这种： 安卓版的浏览器则没有这个问题。 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢？答案是使用<optgroup></optgroup>标签。有关optgroup标签的作用可以查看w3
阅读全文
摘要：在交互式可视化中，有一个词叫reactive，指的是以可视化的方式来响应用户的行为，帮助用户进行可视化并理解其结果。这个很有用。那如何来实现这种交互呢？通过动画。 如果处理得当，动画可以展现出不错的可视化交互数据... 是怎样的呢？ 交互可以有效地提供用户的反馈。我们可以知道自上次用户操作之后发生了
阅读全文
摘要：JavaScript是一个无class的面向对象语言，它使用原型继承而非类继承。这会让那些使用传统面向对象语言如C++和Java的程序员们感到困惑。正如我们所看到的，JavaScript的原型继承比类继承具有更强的表现力。 但首先，要搞清楚我们为什么如此关注继承？主要有两个原因。首先是方便类型的转换
阅读全文
摘要：要求实现一个轻量级的在客户端筛选的combobox，支持大数据量（超过1000个items），能快速检索内容，并支持数据的设置和活动等基本操作。在这之前尝试过使用Jquery UI的Autocomplete，但是当数据量太大时客户端检索速度太慢（甚至会导致浏览器卡死）。索性干脆基于JQuery自己写
阅读全文