共计 2551 个字符，预计需要花费 7 分钟才能阅读完成。
这篇文章主要记录一些我在开发工作中踩过的一些坑或者新学到的一些知识。主要分成‘事件’，‘浏览器调试小技巧’，‘其他‘三部分。
============================== 一. 事件 ===========================
1. 先来看一个有趣的问题。
======= 这是 html=======
<button onclick="onclick1()"> 按钮 1 </button>
<button onclick="onclick()"> 按钮 2 </button>
<button onclick="click()"> 按钮 3 </button>
======== 这是 js 部分 =======
function onclick1() {console.log('onclick1...');
}
function onclick() {console.log('onclick...');
}
function click() {console.log('click...');
} 分别点击这三个按钮，猜猜会是什么结果。
答案揭晓：点击按钮 1，会正常输出 onclick1… 点击按钮 2，会报错 Uncaught RangeError: Maximum call stack size exceeded。栈溢出了。点击按钮 3，不会报错，也没有任何反应。
所以，如果要给 DOM 绑定 onclick 事件，函数名千万别叫 click 和 onclick。当然，如果你用 addEventListener 来绑定的话就不会存在这个问题了。
2. 介绍一组很有用的事件。compositionstart, compositionupdate, compositionend. 用来监听中文输入法。顾名思义：一个用来监听开始，一个用来监听更新，一个用来监听结束。如果输入的都是英文不会触发此事件，输入拼音时会触发。
我介绍这个的目的并不是简单的介绍这个事件，而是这里有个小坑。我们都知道，事件监听常用的两种方式，一种是直接给 DOM 加属性，比如 onclick,onblur. 另一种是用 addEventListener 来绑定事件。但是这组事件就很特殊。他们不能使用 oncompositionstart，oncompositionupdate,oncompositionend 来直接写在 DOM 中。实测不会生效。只能通过 addEventListener 来进行绑定。
=========================== 二. 浏览器调试小技巧 ========================
3. 用 debugger 来代替在文件中打断点的操作。当我们想在某处打断点的时候，往往会去浏览器中先找到这个文件，然后再找到具体哪一行。其实用 debugger 可以完全替代这个麻烦的操作。只需要在你想让代码停下的地方写一句 debugger 即可。
4. 打条件断点，比如我们想在一个 for 循环里打断点，我只想看第五次循环时各变量的值，如果我只是在那打个断点的话，每次循环都会停下。那我怎么能解决这个麻烦的问题呢。有两个方法。一：用 debugger，只需要在代码中写 if (i ==5) debugger; 二：在浏览器中打条件断点。步骤如下图所示： 输入完条件之后按回车键。最后会出现一个黄色断点如下图所示。
5. 用 $_来表示上一次的控制台结果。我们经常在控制台写一些简单的测试代码。当需要用到上一次的运行结果时，往往需要再将之前的表达式复制一遍。$_可以完美解决这个问题。
============================= 三. 其他 =====================================
6.0/ 0 结果是 NaN。以前学 C ++ 时，碰到 number/ 0 这样分母为 0 的情况，都会加 try catch 来处理。直到有一天我发现，在 js 中分母为 0 不会抛出异常，而会得到 NaN 的结果。
7. 行内元素设置 rotate 无效，需要设置成 display:inline-block. 有一次我试图给 span 标签设置旋转角度，发现怎么都不成功。后来查阅资料发现，inline 元素设置 rotate 无效。
8. 用 data- 给 DOM 扩展属性。有时候我们需要在节点上存储信息，在 js 中获取，（我以前干过把信息存为 id 或 title）但是这样违反了 id 和 title 本来的作用。H5 提供了新的方法，data-XXX。可以供我们自定义，在存储时这样：<div data-name=’hison’></div> 在 js 中获取时用 div.getAttribute(‘data-name’), 或者用 jQuery:$(div).data(‘name’)
9. 最快捷的数组求最大值方法：
let arr = [1,2,3,5,5,6,3,4];
let max = Math.max(...arr);10. 如何实现点击任意地方选中某个区域中的文本。通常我们要选中网页中的一段文本，需要双击才可以选中。但有时为了交互体验更好，要做成点击一下即可选中某块区域中的文本。再点击一下即可对所选区域进行编辑。主要用到 window.getSelection 方法和 range 的一些方法。
<div id="box">
<span> 这是一段文字 </span>
</div>
<button onclick="selectText()"> 点我选中文字 </button>
<script>
if (window.getSelection) {
// 创建一个范围
var range = document.createRange();
// 选择一个 node 放入该范围
range.selectNode(document.getElementById('box'));
// 把 div 变成和 input 一样可以编辑
document.getElementById('box').setAttribute('contenteditable',true);
// 移除掉之前选择好的片段
window.getSelection().removeAllRanges();
// 把新建的片段加入到 selection 中。window.getSelection().addRange(range);
}
</script>PS: 觉得还可以？给点个赞吧！
作者：易企秀——Hison