JavaScript 小技巧

使用 css 写一个三角形

div {
	width: 0;
	height: 0;
	border: 5px solid #transparent;
}

水平垂直居中

定位

div {
	width: 100px;
	height: 100px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

flex
父级控制子集居中

.parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

css一行超出文本显示 …

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本超出显示 …

display: -webkit-box;
-webkit-box-clamp: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

IOS手机容器

overflow: auto;
-webkit-overflow-sccrolling: toucj;

修改滚动条样式

div::-webkit-scrollbar {
	display: none;
}

div::-webkit-scrollbar 滚动条整体部分
div::-webkit-scroolbar-track 滚动条内部的小方块，上下左右移动
div::-webkit-scrollbar-track 滚动条的轨道
div::-webkit-scrollbar-button 滚动条的轨道两端按钮
div::-webit-scrollbar-track-pice 内层轨道
div::-webkit-scrollbar-corner 边角，两个滚动条交汇处

隐藏页面元素

dislay: none; 元素不占用空间，在页面中不显示，子元素也不会显示。
opacity-0 元素透明度为 0，元素仍然存在，绑定事件仍旧有效可以触发执行。
visibility-hidden 元素隐藏，单元素仍然存在，占用空间，页面中无法触发该元素的事件。

contenteditable

html 中大部分标签都是不可以编辑的，但是添加了 contenteditable 属性之后，标签会变成可编辑的状态。

<div contenteditable="true"></div>

通过这个属性吧标签变为可编辑的状态之后只有 input 事件，没有 change 事件。

calc

这是一个 css 属性，可以计算 css 的值。可以计算不同单位的差值，很好用，但是不容易阅读。

div {
	width: calc(25% - 20px);
}

Date 对象

获取当前时间的毫秒值

// 方式一
Date.now();
// 方式二
new Date() - 0;
// 方式三
new Date().getTime();

创建 Date 对象有兼容问题

// window 和安卓支持。ios，mac不支持
new Date('2020-11-26')
// window和安卓支持ios和mac不支持
new Date('2020/11/26')

解析 get 参数

通过 replace 方法获取 url 中的参数键值对，可以快速解析 get 参数。

const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q)

解析连接 url

可以通过创建 a 标签，给 a 标签赋值 href 属性的方式，获取 到协议，pathhname，origin 等 location 对象上的属性。

// 创建 a 标签
const aEle = document.createElement('a');
// 给 a 标签赋值 href 路径
aEle.href = 'test.html';
// 访问 aEle 中的属性
aEle.protocol; // 获取协议
aEle.pathname; // 获取 path
aEle.origin; 
aEle.host;
aEle.search;

localStorage

localStorage 是 H5 提供的永久存储空间，一般最大可存储 5M 数据，并且支持跨域隔离，他的出现极大提高了前端开发的可能性。localStorage 的使用很多人都知道的 setItem，getItem，removeItem，但他也可以直接以成员的方式操作。

// 存储
localStorage.name = 'yd';
// 获取
localStorage.name; // yd
// 删除
delete localStorage.name
// 清除全部
localStorage.clear();
// 遍历
for(let i = 0; i < localStorage.length; i++) {
	coonst key = localStorage.key(i); // 虎丘本地存储的Key
	localStorage[key]; // 获取本地存储的 value
}

localStorage 满了的情况下仍会继续存储并不会覆盖其他值，而是直接报错(QuotaExceededEror)，并且当前存储的值也会被清空。浏览器支持每个域名下存储 5M 数据。

会话 cookie

cookie 在设置的时候如果不设置过期时间，就表示是个会话 cookie，以前以为关闭浏览器会话 cookie 就消失了，然而…喜提 bug 一个。
在多数情况下 windows 系统或者安卓系统是这样的，但是在 macOS 系统或者 ios 系统中，关闭浏览器并不会清除掉会话 cookie，结束浏览器进程才行。

标签模板字符串

模板字符串支持在前面添加一个函数，第一个参数是一个有固定的内容组成的数组，后面参数依次未传入的变量，函数返回值为模板字符串真正展示的值。

const tag = (params, ...args) => {
	return params[0] + args[0]; // 返回值为模板字符串的真实值
}
const str = tag`hello${'world'}`;