小技巧随手记：一行代码实现星级评分、同步阻塞实现sleep函数、一行代码生成随机字符串（唯一ID/Number.prototype.toString([radix])用法）、获取浏览器Cookie的值、颜色RGB转十六进制、使用数字分隔符、最快获取dom方法（ID同名变量获取dom元素）、带命名空间的事件绑定
一、一行代码实现星级评分：记下，这还是比较巧妙的
const getRate = (rate = 0) => '★★★★★☆☆☆☆☆'.slice(5 - rate, 10 - rate);
getRate(3);
二、同步阻塞法实现sleep函数
const sleep = delay => {
const start = new Date().getTime();
while (new Date().getTime() < start + delay) {
continue;
};
};
console.log(1);
sleep(3000);
console.log(2);
三、一行代码生成随机字符串（唯一ID）
也许你需要临时的唯一ID，这是一个技巧，你可以使用它生成随机字符串
const randomString = () => Math.random().toString(36).slice(2);
Math.random().toString(36) ，toString(36) 里面的36是做什么用的：
Number.prototype.toString([radix])中的 radix 指定要用于数字到字符串的转换的基数(从2到36)。如果未指定 radix 参数，则默认值为 10。所有不在范围内的基数会报错：Uncaught RangeError: toString() radix argument must be between 2 and 36
Math.random().toString(36)
// '0.8p0w72uxgjr'
先是 Math.random() 生成 [0, 1) 的数，也就是0.123312、0.982931之类的，然后调用 number 的 toString方法将其转换成36进制的，按照MDN的说法，36进制的转换应该是包含了字母a~z 和 数字0~9的，因为这样生成的是 0.89kjna21sa 类似这样的，所以要截取一下小数部分，即从索引 2 开始截取10个字符就是我们想要的随机字符串了。很多开源库都使用此方式为DOM元素创建随机ID。
四、获取浏览器Cookie的值 、 清除全部Cookie
const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
cookie('_ga');
const clearCookies = document.cookie.split(';').forEach(
cookie =>
document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
通过使用document.cookie访问cookie并将其清除，可以轻松清除网页中存储的所有cookie。
五、颜色RGB转十六进制、生成随机十六进制颜色
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(0, 51, 255);
// Result: #0033ff
可以使用 Math.random 和 padEnd 属性生成随机的十六进制颜色。
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
console.log(randomHex());
// Result: #92b008
六、数字分隔符：数字分割开后更直观
// 有时你会在文件中定义一个数字常量
const myMoney = 1000000000000
这么多个 0 ，1、2 ... 6、7 ... 数晕了都，怎么办？—— 数字分隔符整起来！
const myMoney = 1_000_000_000_000
console.log(myMoney) // 1000000000000
这样写是没问题的，而且数字分割开后也更直观！！
七、最快获取dom的方法
1、html 中带有 id 属性的元素，都会被全局的 ID 同名变量所引用
<div id="zero2one"></div>
// 原本获取 dom 是这样的
const el = document.getElementById('zero2one')
console.log(el) // <div id="zero2one"></div>
// 现在可以这样
console.log(zero2one) // <div id="zero2one"></div>
是不是很方便，我们直接来测试下：我这个页面有 id 为 ticket 的 html 元素，我直接在控制台输入 ticket 变量，就拿到了该 dom 元素。
2、点击删除dom节点
<a onclick="javascript:this.parentNode.removeChild(this);">点击茶树</a>
八、事件绑定
1、on事件，可以把事件绑定到某个行为，且可以通过选择器selector过滤元素：
$('body').on('click', 'a.external', function(e) {
// 该函数只会绑定到那些有external类的元素上
});
值得一提的是，上面的代码对于动态生成的对象也有效。应当大力提倡，不过也要小心！如下代码会导致效率的降低，拖慢浏览器的速度：
$('body').on('mousemove', selector, function() {});
2、带命名空间的事件(namespaced events)在jQuery 1.2就被加入了，但是没有几个人用。举个例子：
$('a').on('click', function() {
// Handler 1
});
$('a').on('click', function() {
// Handler 2
});
如果我们想要移除第二个handler，使用$('a').off('click')却会把两个handler都移除掉！
但是如果使用带命名空间的事件，就可以搞定：
$('a').on('click.namespace1', function() {
//Handler 1
});
$('a').on('click.namespace2', function() {
//Handler 2
});
// 使用如下代码移除即可：
$('a').off('click.namespace2');
