随笔分类 - JavaScript
摘要：大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。 全文阅读大概需要8分钟，建议先收藏后看。 以下正文： 今天看到有人在群里提问说，有一个业务场景，用户上传图片后，图片要回显，不依赖后端，刷新浏览器后也会显示，我是存放在localStorage里面，如果图片超过
阅读全文
摘要：大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。 以下正文： 2021 年 6 月 22 日，第 121 届 Ecma 国际（Ecma International）大会以远程会议形式召开。正式通过了ES2021标准，ECMAScript 2021
阅读全文
摘要：大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。 以下正文： textarea使我们常用的表单元素。一般用于多行文字的输入。在绝大多数情况下，都可以满足我们的要求。 但是它有一个缺点是，它的高度是固定了，如果文本内容超出了它设定的高度时，就会显示出
阅读全文
摘要：1、什么是面向对象编程 面向对象编程，是一种通过对象的方式，把现实世界映射到计算机模型的一种编程方法。OOP围绕对象而不是功能和逻辑来设计软件架构。可以将对象定义为具有唯一属性和方法的一种数据类型。 2、面向对象发展历史 在现代意义上的面向对象程序设计中，使用术语“对象”和“面向对象”的术语在195
阅读全文
摘要：问题描述 今天在做页面UI改版的时候发现，我之前使用的是dom.scrollIntoView(); 使得点击右侧题目编号的时候，让左侧题目滚动到页面可视区域。 如果不知道 scrollIntoView 如果使用，我有篇文章专门写了 scrollIntoView 的简单使用：scrollIntoVie
阅读全文
摘要：最开始就有这个问题，但是一直没有管他。这次因为概况页面UI改版，所以开始着手处理。 最开始以为是参数设置的问题，于是就找到了官方示例代码，把官方的一些参数加入到之前的代码里面发现不起作用。 于是就把整个官方代码原封不动拷贝到项目中进行尝试，然后发现还是没有显示极地图中间的线条。 然后我怀疑是版本的问
阅读全文
摘要：问题描述 根据业务需求，需要有一个批量添加题目的功能。 如上图所示，左边是纯文本输入的题目，右边需要解析成一个个对应的题目。 右边的题目就是一个组件，根据不同的类型进行显示，这个组件这里不做谈论。这里要做的就是根据左边的文本内容，解析成一个个对象的形式，传入右边的组件进行渲染。 这篇文章，就是如何把
阅读全文
摘要：问题描述 有些需要填写用户信息的界面，当用户点击返回，或者刷新界面，关闭界面的时候，需要及时提醒用户当前的页面填写了内容，如果返回或者刷新的话，会导致内容丢失。然后让用户自行决定后续的操作。 解决办法 beforeunload事件就可以帮你做到这件事。 当浏览器窗口关闭或者刷新时，会触发before
阅读全文
摘要：1、正则表达式 正则表达式(regular expression)是一个描述字符规则的对象。 2、正则表达式的作用 前端往往有大量的表单数据校验的工作，采用正则表达式会使得数据校验的工作量大大减轻，如邮箱验证，手机号码，等等。比起用字符串的函数来判断简单，易用。 3、正则表达式的定义 JS中定义正则
阅读全文
摘要：input type=text 只能输入数字(去掉e和小数点)： <input type="number" onkeydown="return event.keyCode !== 69" /> <input type="text" onkeydown="return ( event.ctrlKey
阅读全文
摘要：js字符串/数组常用方法 字符串 charAt str.charAt(index); 从一个字符串中获取索引为index的字符。 startsWith, endsWith str.endsWith(searchString[, length]) length 可选。作为 str 的长度。默认值为 s
阅读全文
摘要：最近工作中用到了jQuery UI中排序和拖拽功能，花了大概一天的时间，搞清楚了大概的参数配置，以及遇到的一些问题，总结如下。 sortable 简单的配置如下： $('#subs-box').sortable({ axis: 'y', cursor: 'ns-resize', placeholde
阅读全文
摘要：什么是图片懒加载 图片的懒加载就是在页面打开的时候，不要一次性全部显示页面所有的图片，而是只显示当前视口内的图片，一般在移动端使用（PC端主要是前端分页或者后端分页）。 为什么需要懒加载 对于一个页面加载速度影响最大的因素之一就是图片资源，如果一个页面图片太多（比如某宝，某东等），整个页面的图片大小
阅读全文
摘要：问题描述 今天在处理一个 数字的格式显示 问题时，遇到下面的一些需求： 可以显示千分符 可以显示百分比 可以显示小数位数 如下图，如果勾选的话就使能该项设置。 百分比和小数位数比较好解决，百分比只需要在源数字后面加两个零再加上百分号；小数只需要在小数点后面加零即可。最主要的是千分符的处理，好，就来说
阅读全文
摘要：问题描述 示例对象数组如下，每个对象中都有一个时间戳，现在要求将每个对象按照其中的时间戳对应的天数进行排列，如何实现？ 需求分析 示例代码如下： 1、数组排序 首先，需要先 将上面的对象数组按照时间戳有小到大排好序 。排序函数： 排好序的对象数组如下： 2、封装函数 首先将第一个时间戳转化成日期，然
阅读全文
摘要：我们知道 TypeScript 2.3 以后的版本支持使用 对`.js`文件进行类型检查和错误提示。 但是由于 JavaScript 是弱类型语言，在编写代码的时候，是无法检测变量的类型的。 因此每次运行代码类型报错的时候，我心中都会冒出来一个强烈的愿望：要是 JavaScript是强类型的多好！
阅读全文
摘要：```js window.open('/app/dashbuilder.html?' + group.id, '_blank'); // 一般_self不会被拦截 // 改为 let newTab = window.open('about:blank', '_blank'); newTab.location.href = "/app/dashbuilder.html?" + group.id; `
阅读全文
摘要：blur与change事件在绝大部分的情况下表现都非常相似，输入结束后，离开输入框，会 先后触发change与blur ，唯有两点例外。 1、没有进行任何输入时，不会触发change 在这种情况下失焦后，输入框并不会触发change事件，但一定会触发blur事件。在判断表单的修改状态时，这种差异会非
阅读全文
摘要：（题图：梵高 橄榄树） 提出需求 因为工作原因，现在有一个需求就是需要用户使用QQ或者微信复制一张截图后，在div中直接粘贴这张图片，而不是采用上传的方式。类似我们在使用QQ微信时直接粘贴截图的操作，这个要怎么用js来实现呢？ 实现原理 我们可以利用 这个接口API 来实现。 根据在MDN上的定义，
阅读全文
摘要：（题图：梵高 向日葵） 我们最开始学前端的时候都会看到教程在处理外部css，js的时候会将css放在header中，js放在body的最后。为什么要这样子处理，今天参考一些资料好好分析下。 为什么外链css为什么要放头部？ 首先整个页面展示给用户会经过html 的解析与渲染过程。 而 外链css无论
阅读全文