1、获取元素的尺寸

1. 直接读元素的样式

getComputedStyle(dom).width

把 dom 元素传进去，就可以直接拿到样式上的宽度或高度

这种方式拿的尺寸读取是 CSSOM树，这种尺寸不能反应界面上的尺寸，除非特殊情况最好别用

比如，设置元素的100px，

设置了padding 和 border 后尺寸是不一样的，

或者元素是弹性项目会被压缩或拉伸，100px 只是基线而已

dom.style.width

读取的不是 CSSOM 树的尺寸，是 DOM 树的尺寸，

如果元素的 style 属性上面没有写 width，写到 css 样式里面，这种方式读不出来，而且读出来也不一定是最终的情况，我们更多是使用的是下面四个

2. 几何尺寸

clientWidth

表示 content + padding，不包含 border边框 和 scroll滚动条

dom.offsetWidth

表示 content + padding + scroll + border

如果元素没有边框和滚动条，尺寸跟 client 是一样的

scrollWidth

visible + invisible 表示的不是这个元素本身的尺寸，而是元素里面那些东西的尺寸，

通常使用了滚动条后，元素里面的东西比较多，就出现了滚动条，获取的是元素内部滚动区域的高度和宽度，

如果这个元素没有滚动条，也没有边框，它的尺寸跟 client 是一样的

上面三种读取的是 Loyout Tree 布局树，布局树包含的是元素的几何信息

3. 人眼可见的尺寸

const rect = dom.getBoundingClientRect()

它是 dom 元素里面的一个方法，返回一个对象，对象里面包含一些属性 rect.width

这种方式获得到的尺寸不是 Loyout Tree 布局树了，是最后 GPU 画到屏幕上的尺寸，跟渲染主线程没有关系了，

比如应用 transform 旋转、放大变换后，最终呈现在屏幕上的尺寸，和 Loyout Tree 布局树又有差异，

如果没有变换和上面三个布局树得到的尺寸是一样的

by: 

https://www.bilibili.com/video/BV1FXs5ewEJR/

https://www.bilibili.com/video/BV1HX4y1H7hA/

2、copy 的监听和解禁

监听 copy 事件（也可以注册到 body 元素上），然后在网页中不管用哪种复制都会触发该事件

window.addEventListener("copy", (e) => {
  alert("不能复制")
});

阻止了默认行为后，现在就不能复制网页的内容了

window.addEventListener("copy", (e) => {
  e.preventDefault();
  alert("不能复制")
});

可以在剪切板里面设置一些其他内容，

比如复制后粘贴变成“不能复制，打钱”，然后还可以做一些提示

window.addEventListener("copy", (e) => {
  e.preventDefault();
  e.clipboardData.setData("text/plain", "不能复制，打钱");
  alert("不能复制")
});

如何解禁？

1. 右键检查元素

2. Elements 选项里面找到选中要复制的元素，然后选中右边的 Event Listeners，

3. 在 Event Listeners 下面列表找到 copy 事件，del 删除掉该事件即可

by: https://www.bilibili.com/video/BV1RLN3eFEfh/

3、JS中的文档注释

文档注释的函数，使用函数的时候编辑器会有提示

@param 该关键字表示参数的意思，{*}表示参数可以接收任何类型，还可以在后面写上参数的注释

@return 表示函数返回值，{Function}返回的类型也是一个函数

@author 表示作者，还可以写邮箱

@license 表示版权

/**
 * 函数防抖
 * @author Yuan <123@mail.com>
 * @license MIT
 * @param {Function} func 防抖的目标函数
 * @param {Number} duration 函数执行前等待的时间
 * @return {Function} 返回一个防抖后的函数
 */
function debounce(func, duration = 1000){
  
}

debounce();

@example 表示示例，使用函数的时候，会显示该怎么用的

/**
 * 获取指定范围的随机整数
 * @param {number} min 随机数的最小值
 * @param {number} max 随机数的最大值
 * @return {number}
 * @example 
 * getRandom(1, 10); // 获取[1, 10]之间的随机整数
 */
function getRandom(min, max){}

getRandom()

有的时候参数可以能是一个对象，可以在该对象后面依次写上对象里面的属性，和属性的类型

/**
 * 网络请求
 * @param {Object} options 配置对象
 * @param {string} options.url 请求地址
 * @param {'GET'|'POST'} options.method 请求地址
 * @param {Object} options.body
 * @param {Object} options.headers
 * 
 */
async function request(options){}

request({
  method: 'POST'
})

文档注释是一套标准的写法，可以跟很多工具进行互动，比如，把我们写文档注释转，生成成一个文档

1. 全局安装 npm i -g jsdoc

2. jsdoc ./   使用 jsdoc 命令，把当前目录里面的文档注释提取出来

3. 完成后当前目录有一个 out 文件，里面有一些页面

https://www.bilibili.com/video/BV17u411H7uG/

4、判断奇偶数

偶数：除以2余数为0，或个位数为 0、2、4、6、8
奇数：除以2余数为1，或个位数为 1、3、5、7、9

判断是否是奇数

/**
 * 判断奇数
 * @param {number} n 判断的数字
 * @return {boolean} 奇数为true，偶数为false
 */
function isOdd(n){
  return n % 2 === 1 || n % 2 === -1;
}

console.log(isOdd(1)); // true
console.log(isOdd(2)); // false
console.log(isOdd(3)); // true
console.log(isOdd(14.10)); // false

下面这两种写法不行

function isOdd(n){
  return n % 2 === 1;
}

function isOdd(n){
  return n % 2 !== 0;
}

by https://www.bilibili.com/video/BV1Zr421n7WT