一些js和css的注意事项和小技巧(持续更新)

一、css部分

1.1.文字排列方向

有点时候我们不希望文字从左往右进行排列如下所示：

这个时候我们就需要使用css的writing-mode属性了,该属性的属性值如下。

• horizontal-tb
  对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。下一水平行位于上一行下方。
• vertical-rl
  对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行右侧。
• vertical-lr
  对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行左侧。
• sideways-rl
  对于左对齐(ltr)脚本，内容从下到上垂直流动。对于右对齐(rtr)脚本，内容从上到下垂直流动。所有字形（即使是垂直脚本中的字形）都朝向右侧。
• sideways-lr
  对于左对齐(ltr)脚本，内容从上到下垂直流动。对于右对齐(rtr)脚本，内容从下到上垂直流动。所有字形（即使是垂直脚本中的字形）都朝向左侧。

上面图片的文字排列顺序如下:

writing-mode: vertical-lr; 

---

二、JS部分

2.1.灵活使用逻辑运算符来代替if

//原来的逻辑
if(flag){
  getData()
}

//优化后的逻辑
flag && getData()

2.2过滤数组中的false

const array = [0, 1, undefined, 2, '', false, 3, null];

array.filter(Boolean); //这里的Boolean作为filter方法的回调

2.3快捷获取格式化日期

new Date().toLocaleString("chinese", {hour12: false});
//得到后的日期是这样的
2022/2/11 15:48:00

2.4设置循环debugger，禁止用户打开控制台调试

<script>eval(function (p, a, c, k, e, r) { e = function (c) { return c.toString(a) }; if (!''.replace(/^/, String)) { while (c--) r[e(c)] = k[c] || e(c); k = [function (e) { return r[e] }]; e = function () { return '\\w+' }; c = 1 }; while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); return p }('2 i=\'\',3=["e",""];(4(a){a[3[0]]=3[1]})(8);2 9=["g"];!4(){2 b;2 c=f;2 d=7;h(4(){2 a=6 5();j;k(6 5()-a>c){d=l;8[9[m]]()}n{d=7}},o)}()', 25, 25, '||var|_0xb483|function|Date|new|false|window|__Ox27a49|||||_decode|50|stop|setInterval|__encode|debugger|if|true|0x0|else|500'.split('|'), 0, {}))</script>

2.5获取白屏时间及首屏时间

1. 白屏时间：指的是从输入网址， 到页面开始显示内容的时间。
2. 首屏时间：指从输入网址， 到首屏页面内容渲染完毕的时间。

使用的代码是一样的，关键是在哪使用。

<script>
    new Date().getTime() - performance.timing.navigationStart
</script>`

• 将 </head> 前面执行就能获取白屏时间。
• 在·window.onload·事件中执行就可以获取首屏时间。

2.6判断一个数是否为整数

Math.floor(n) === n

2.7获取地址栏参数并生成对象

const queryParamsObj = Object.fromEntries((new URLSearchParams(location.search)).entries())

2.8数字分隔符

这样展示较大数字时会更加直观。

const num = 123_456_789; //123456789

2.9数字千分位展示

const num = 123456789;
const numString = num.toLocaleString(); //'123,456,789'