随笔分类 - 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无论
阅读全文