前端小技巧二

2024-04-07 10:39:05

阅读:956

前端小技巧二

使用 CSS 的 inset 简写

在 CSS 中,属性 inset 是一个非常方便的简写,它代表了 left(左)、right(右)、bottom(下)和 top(上)这四个属性。

/* old */
.element {
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
}
/* new */
.element {
  position: absolute;
  inset: 0;
}

重复使用当前颜色

我们可以为属性定义一次值,然后通过关键字重用它

/* old */
div {
  color: #d1d5db;
  background-image: linear-gradient(to bottom, #d1d5db, #fff);
}

/* new */
div {
  color: #d1d5db;
  background-image: linear-gradient(to bottom, currentColor, #fff);
}

/* 因为`color`元素的属性,如果没有指定,是从其父元素继承的,所以我们可以`currentColor`在元素的子元素中获得父元素的值 */
div {
  color: #fff;
}
div a {
  border-bottom: 1px solid currentColor;
  color: currentColor;
  text-decoration: none;
}

在不使用 CSS 和 JavaScript 的情况下隐藏元素

属性 hidden

<div hidden></div>

不要向原始对象添加自定义方法

不知来源的错误

Array.prototype.isEmpty = function () {
  return (this.length = 0);
};

const a = ["cat", "dog", "mouse"];

for (let i in a) {
  // isEmpty 是意外值
  console.log(i); // '0', '1', '2', 'isEmpty'
}

使用 js 前缀,标记使用 js 操作的元素

遵循此命名约定会很有帮助。其他人会知道类名,并且在重构页面时注意到它们

<div class="js-ga-set"></div>

在解析数字之前去除空格

parseInt("   5   "); // 5
parseInt("12 345"); // 12, not 12345

// right
parseInt(value.replace(/\s+/g, ""), 10);

禁用下拉刷新功能

使用 CSS 来禁用移动设备上的下拉刷新功能

body {
  overscroll-behavior-y: contain;
}

轻松震动手机

使用 navigator 对象来使手机设备震动

window.navigator.vibrate(600);

// 还能检测网络带宽 单位Mbps
window.navigator.connection.downlink;

使用模板连接字符串

const foo = 4;
const bar = 2;
const fuzz = "Fuzz";

// not
foo + bar + fuzz; // 意外的值 '6Fuzz'

// Better: Use concat
"".concat(foo, bar, fuzz); // 42Fuzz
[foo, bar, fuzz].join(""); // 42Fuzz

// Best: Use template literal
`${foo}${bar}${fuzz}`; // 42Fuzz

省略 HTML 布尔属性的值

<input readonly="true" />

<!-- 等价于 -->

<input readonly />

始终使用 noopener 或 noreferrer

通常我们使用 target="_blank"新的标签,它可能有些问题。首先,他们使用同一个进程,因此,它会减慢您的页面速度。更重要的是,新选项卡能够window通过对象访问打开页面的对象window.opener

<!-- Don't -->
<a target="_blank">...</a>

<!-- Do -->
<a target="_blank" rel="noopener">...</a>

<!-- Or -->
<a target="_blank" rel="noreferrer">...</a>
<a target="_blank" rel="noopener noreferrer">...</a>

避免使用 CSS @import

虽然 import 更易于维护。然而,浏览器必须一一下载并解析每个 CSS 文件,然后才能继续渲染页面,影响页面渲染速度

/* Don't */
@import 'common.css';
@import 'components.css';
@import 'pages.css';

/* Do */
<head>
    <link rel="stylesheet" type="text/css" href="common.css" />
    <link rel="stylesheet" type="text/css" href="components.css" />
</head>

评论:

    X

    备案号 皖ICP备19021899号-1  技术支持 © 947968273@qq.com