![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 82
关于0318
这个作者很懒,什么都没留下…
展开
-
现代 js 使用笔记(es6 之后)
目录历史包袱向前看Array.prototype.includes()指数运算符async/awaitObject.values()Object.entrys()String.prototype.padStart() & String.prototype.padEnd()Object.getOwnPropertyDescriptors()SharedArrayBuffer & Atomicsfor awaitPromise.prototype.finally()正则表达式之“对捕获组命名”原创 2021-05-04 16:48:00 · 413 阅读 · 2 评论 -
给 setTimeout、setInterval 配备 await 写法
setTimeout、setInterval 是两个常用的异步函数。但作为异步函数,他们不支持 Promise或者 async/await写法。代码写起来:setTimeout(() => { console.log('执行一些操作') setTimeout(() => { console.log('执行另一些操作') // setTimeout ... }, 3000)}, 1000)不好看!尽管经过简单的封装,可以达到目的,但每次用到都封装一次——重原创 2021-04-23 10:36:58 · 3163 阅读 · 1 评论 -
JS笑话
有的代码,很搞笑。以下,博诸君一笑欢迎在留言区写下,您看到的搞笑案例使用 Promise 解决回调地狱let userId = xxx;getUser(userId).then( user => { getSchool(user.schoolId).then( school => { getCity(school.cityId).then( city => { getProvince(city.provinceId).then( country =>原创 2020-12-22 11:00:14 · 1061 阅读 · 1 评论 -
不常见的css选择器的实用场景
:nth-child()选择同级的,第 n 个元素。例子<div class="container"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div></div><style>.container :nth-child(2){ color: red;}</style>原创 2020-09-17 13:09:00 · 137 阅读 · 0 评论 -
新出炉的国产 node web 框架 - 筷子
一、起步筷子是一个后端框架,用来写接口(接收 http 请求,响应数据)。如果你没接触过 node,请先了解一下 node。环境准备装个 node 就可以了。撸起袖子,开始干!初始化项目mkdir kuaizi-go # 创建一个叫 kuaizi-go 的文件夹(当然是用来存放项目了)cd kuaizi-go # 进入这个文件夹npm init -y # 初始化 node 项目npm install kuaizi # 安装筷子hello-world依国际惯例,先问候一下全世界。新建原创 2020-07-02 09:43:15 · 306 阅读 · 0 评论 -
筷子·自序
也许 js 算不上一个顶尖的“优秀设计”的编程语言。但是 js 有一个其他语言目前无法比肩的优势:浏览器支持。这导致,网站开发者,几乎必须学习 js。那何不顺便使用 js,把后端也写了。go、java、php、python是很优秀,但是对于前端来说,不是还得另花时间学习吗?而且,js 并没糟糕到“不可使用”的地步。实际上 js 很优秀,而且由于用户群体这么大,将来也会更加优秀。Express、Koa 等框架,都很优秀,然而我还是自己写了个叫“筷子”的简单的框架。自夸不是我擅长的东西,你用不用原创 2020-06-17 12:58:41 · 975 阅读 · 0 评论 -
响应式布局的几种思路
响应式布局是什么,为什么?最简单的方法(固定内容区宽度)同比例缩放(rem)rem 简介是什么,为什么?电脑显示器有很多种尺寸,常见的有,1366px(宽度)、1980px(宽度),高级点,还有 2k 屏、4k 屏、5k 屏。如果再考虑平板和手机的话,就更多了。远古时期,大多数网站是不会考虑这个问题的,一般只会对特别流行的一个尺寸进行设计。这时候,屏幕特别小,或者特别大时,看着就很不舒服。...原创 2020-05-04 20:06:13 · 7570 阅读 · 2 评论 -
rem 简介
rem 是网页上的一种长度单位。如果根节点(html 节点)的字体大小是 16px,那么:2rem 就等同于 32px;3rem 就等同于 48px;1.5rem 就等同于 24px;也就是:html{ font-size: 14px;}.target{ width: 2rem; /* 28px */ }有时为了方便计算,会把根节点的字体设置成 10 的倍数,比如...原创 2020-05-03 23:38:52 · 3122 阅读 · 0 评论 -
typeof、instanceof、constructor 的联系、区别、应用场景(js 类型判断)
联系这三者都可以用来判断一个对象的类型let now = new Date()now instanceof Date // 输出: truenow.constructor == Date // 输出: truetypeof 'hello' // 输出: stringtypeof('hello') // 高版本的 js 支持这种写法。输出: string看起来是这样的:typeo...原创 2020-03-25 17:31:04 · 1308 阅读 · 0 评论 -
快速切换npm源
为什么要切换npm 可以用来安装 js 模块,像:npm install vue速度太慢但是有时候安装起来特别慢,既是你家是电信100M宽带。原因有很多种,其中一个重要的因素是,你安装的模块来自国外——国外的东西,“自然”都很慢。所以如果可以直接从国内的某个地方下载资源,那安装速度会快很多很多。手动切换太麻烦也许,“换源”只是从百度上搜一个淘宝的源,然后复制到命令行,回车。其实如果...原创 2020-03-13 11:51:34 · 2897 阅读 · 1 评论 -
我只想要一杯白开水
写在之前如果你已经在用 typescript,那么本篇的内容可能对你就没什么帮助了当初我放弃 Java 选择 js 的一个重要的原因就是 js 很灵活。弱类型和动态类型使我喜欢上了这个语言。这一年多来,我只跟 js 打交道(当然也有 html 和 css),围城现象早就出现了,我有点渴望有一个限制的工具来规范我的代码、提示一些函数的参数类型Typescript 的火热不是一天两天了,基本...原创 2020-02-28 15:31:34 · 333 阅读 · 0 评论 -
JS.Array.reduse 方法的一个应用场景
js 中 Array 对象上有很多提高开发效率的方法,reduce 是我之前用的最少的,今天看到一篇文章,讲到了 reduce 的一种应用场景,码者发挥了下想象力,翻译之余增加了点内容。基本用法reduce 在我之前的认知中,就是用来做累加或者累乘之类的操作的。比如下面求和的例子:let arr = [1,2,3,4];let sum = arr.reduce( (a, b) => ...原创 2019-07-12 14:31:17 · 808 阅读 · 0 评论 -
CSS3 中的动画(animation 篇)
一些解释CSS3 时代,动画不再必须依赖 js,变得更加简单、高效。首先介绍一个常用动画库 animate.css,这里是它的 github 仓库看看效果先通过 cdn 方式引入<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"&...原创 2019-05-30 11:28:33 · 1454 阅读 · 0 评论 -
onmoseover 和 onmouseenter 的区别示例
onmouseenter 对应 onmouseleaveonmouseover 对应 onmouseout助记:enter 和 leave 是动词,且比较长相同点在于,鼠标进入元素时,会触发 mouseenter 和 mouseover 事件区别发生在进入子元素时如果没有子元素,则没有区别给红色长方形注册 onmouseover/onmouseout 事件,鼠标延绿色箭头...原创 2019-02-18 16:18:36 · 594 阅读 · 0 评论 -
关于移动端网页里的像素
可能你也看到过px,dp,dip,sp,设备独立像素、虚拟像素……这些单位或概念吧,如果你对它们很了解,那本篇对你可能就没什么用了,当然本文并不试图解释这些东西的意思,而是尽可能通过解释这些东西产生的原因,记录一下自己对这些东西的理解。虚拟像素最初的最初,一个px单位就够了,很简单纯洁啊,一个px就代表一个屏幕上的像素点。电脑的屏幕虽然尺寸也有差距,但是不大。一般开发网页可以把...原创 2018-07-12 07:23:13 · 2189 阅读 · 0 评论 -
关于浏览器里事件的捕获和冒泡及监听器执行的顺序
本文并不是一篇实用的文字,不考虑兼容性,而在于机制的理解。 关于本文的题目,不叫“js事件的捕获和冒泡”,是因为码者并不清楚这种叫法准不准确,于是用一个不那么精确的“浏览器”一词。 测试环境:Firefox Quantum 61.0.2 (64 位)发现问题(场景) 下面n段代码的输出?(代码一)基本的嵌套&lt;div onclick="outer()"...原创 2018-08-27 17:57:18 · 1386 阅读 · 2 评论 -
网页布局自适应的另一种解决方案
这里的“另一种”是相对目前(2018.10.08)较为普遍应用的栅格系统(float布局)而言。本文的观点当然不是原创,只是从码者自身出发,整理自己的所学所用。没错,就是flex布局文末有阮一峰老师的flex布局教程,不熟悉的同仁可以先跟阮老师学习一下flex的基本用法。码者认为,不同于float布局设置某标签(内容)自身的css属性,flex布局的核心是造一个容器(相当于boot...原创 2018-10-08 17:03:07 · 228 阅读 · 0 评论 -
CSS里的Counter
counter 美 [ˈkaʊntɚ] 计数器简述counter和css里的width、color一样是一个属性,但是单独使用counter是没有效果的,就像你买了一个鼠标,如果没有cpu、硬盘、内存条……的话,这个鼠标好像并没有什么用。counter的小伙伴是::before or ::after (不熟悉的同仁可以先看看css伪类)counter-resetcounter-i...原创 2018-10-09 17:52:31 · 2728 阅读 · 2 评论 -
认识正则表达式(上)
本片介绍 javascript 里的正则表达式是什么遇到不认识的事物时,人们第一想到的可能是想知道这个东西,是什么?但是,实际上定义一个东西很难,即使是较为恰当的描述,也可能是晦涩难懂的。本篇选择直接略过这个问题。而正则表达式作为一个“工具”,更为直接的描述方式是,这个东西能用来干什么,以及怎么使用它。功能正则表达式可以用来描述一个字符串。比如:以字母 A 开头的字符串不包含...原创 2018-12-11 17:33:58 · 199 阅读 · 0 评论 -
在 ubuntu 上安装最新的 node
安装过程安装之前请先删除已有的node,以免发生不可预期的异常。更新软件源sudo apt update安装 npmsudo apt install npm安装 n 模块注:n 模块是用来安装各种版本的 node 的一个工具。参数 -g 表示全局安装sudo npm install n -g安装最新长期支持版 nodesudo n lts检验node -v...原创 2019-01-06 17:42:44 · 21969 阅读 · 0 评论 -
nth-child 实用技巧
nth-child 是 CSS 里,一个不太注目、但在某些场景下很实用的选择器,本文记录码者搬砖过程中使用 nth-child 的一些案例。选择器是什么类似:#container 选择页面上 id 为 container 的元素.wrapper 选择别面上 class 为 wrapper 的元素p 选择页面上所有 p 元素…nth-child 同以上这些一样,只不过没那么常见...原创 2019-01-16 18:45:33 · 6464 阅读 · 1 评论 -
html 里固定表头(vue)
本文记录通过 vue 的指令来实现的一种固定表头的方法原理通过 vue 的指令直接操作 dom给 table 包裹一个 div(wrapper) 并设置固定高度,让 table 在里面滚动监听 wrapper 的滚动事件,并在 handler 里获取其 scrollTop,并设置 thead 的 style transform: translateY( scrollTop )co...原创 2019-02-15 11:14:59 · 1314 阅读 · 0 评论