前端奇淫巧技

1、让页面可文字编辑

document.body.contentEditable='true

控制台执行

2、通过id变量获取dom元素

<div id="box"></div>

console.log( box )

注意事项：创建全局变量可能导致命名冲突

常规做法：document.getElementById

3、CDN加载文件省略协议（HTTP、HTTPS）标识

<script src="https://xxx.xxx.js"></script>

<script src="//xxx.xxx.js"></script>

浏览器自动匹配、提升安全性、代码简洁

4、<script>标签存储信息

不会引入多余的dom结构

<script type="text" id="box">
	<h1>123</h1>
	123
</script>

<script>
	const txt = document.getElementById('box').innerHTML
</script>

5、隐藏鼠标

cursor: none;

6、文字模糊阴影

color: transparent;
text-shadow: #000 0 0 5px;

7、多重边框

box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2);

8、生成随机字符串

function getStrNum(len) {  
    const rdmStr = "";  
    const chars = '0123456789abcdefghijklmnopqrstuvwxyz';
    while (rdmStr.length < len) {
        rdmStr += chars[Math.floor(Math.random() * chars.length)];
    }  
    return rdmStr;
}  

9、取整

let a = (10 / 3) | 0
let b = ~~(10 / 3)

相较于Math 和 | ，更推荐 ~~ 更加简洁直观

10、转换布尔值

if(!!res){ xxx }

11、值交换

let a = 1, b = 2
a = [ b, b = a ][0]

省去声明第三个变量的方法

12、禁止 iframe 加载页面

未测试，可通过后端解决

if( window.location != window.parent.location ) 
    window.parent.location = window.location

13、精美打印

console.table()

14、HTML5之<dataList>

<input list="animals" name="animal" id="animal">
<dataList id="animals">
	<option value="cat"></option>
	<option value="dog"></option>
	<option value="pow"></option>
	<option value="pig"></option>
</dataList>

15、label 元素与复选框联动

<input type="checkbox" name="checkbox" id="checkbox_id" value="value" />
<label for="checkbox_id">我同意</label>

<label>
    <input type="checkbox" name="checkbox" id="checkbox_id" value="value">
    我同意
</label>

16、定位简写 inset

注意兼容

position: absolute;

top:0; right:0; bottom:0; left:0;

position: absolute;
inset: 0 0 0 0;

17、HTML元素标签属性隐藏

<div hidden></div>
<div id="box"></div>
<script>
   document.getElementById('box').setAttribute('hidden', '');
</script>

18、查看网络带宽

这是 window 上的一个属性，在PC端和H5端存在

navigator.connection.downlink

19、阻止检查网站

// 1.阻止 f12 快捷键
window.onkeydown = function(e){
	if( e.keyCode === 123 ) return false
}

// 2.禁用右键菜单
document.addEventListener('contextmenu',
	function(e){
		e.preventDefault()
	}
}

20、JS单线程

​ JS诞生的时代，进行简单的表单验证，设计之初，JS做相对简单的任务；多线程并非当时所需

​ 主要原因：多线程环境下DOM元素进行操作可能导致复杂的线程调度问题

​ HTML5的时候，开启了多线程的大门，new worker 的方式；受到限制只能使用 ECMAScript，不能访问 BOM 和 DOM

21、a === a - 1

let a = Infinity
a === a - 1

let b = -Infinity
b === b - 1

22、Object.freeze

冻结对象

const obj = {
	name:'张三',
	age:20
}
Object.freeze(obj)

obj.name = '李四';
obj.say = '歌曲'
delete obj.age

参考视频地址：https://www.bilibili.com/video/BV1ey421q7Py