你可能不知道的前端小技巧

这篇文章主要记录一些我在开发工作中踩过的一些坑或者新学到的一些知识。主要分成‘事件’，‘浏览器调试小技巧’，‘其他‘三部分。
==============================一.事件===========================
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:觉得还可以？给点个赞吧！