大前端

路由刷新问题

参考
https://booblogger.com/yang-zhong/前端路由
阻止浏览器刷新

• 通过hash
  window.location.href = ‘#helloworld’;
• 通过history.pushState+window.onpopstate
  H5方法 （重点）
  通过pushState()方法
  或replaceState()方法
  这两个方法都可以修改url的地址，并在popstate事件中能监听地址的改变，不同的是，手动的进行pushState()并不会触发popstate事件。
  这两个API都接收三个参数： window.history.pushState(null, null, “http://www.163.com”); 状态对象（state object），一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，会触发popstate事件，并能在事件中使用该对象。

v-if v-show visibility:hidden的区别 dom存在问题

相同点：都可以控制标签的显隐。
一、实现本质方法区别

• v-if是动态的向DOM树内添加或者删除DOM元素
• v-show本质是利用标签的display属性，通过visibility和none控制显隐
• v-if="false"在DOM不能获取到该标签 v-show=false在DOM中仍能获取到该标签
  二、编译的区别
• v-show其实是在控制css
• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁的重建内部的事件监听和子组件
  三、编译的条件
• v-show都会编译，初始值为false,只是将display设为none,但它也编译了
• v-if初始值为false，就不会编译了
  四、性能
• v-show只编译一次，后面其实就是控制css，
• 而v-if不停的销毁和创建，故v-show性能更好一点；

display：none和visibility：hidden的区别

相同点：都是隐藏标签，对应的标签仍存在DOM结构中
不同点：
标签设置display: none后，不会占据该标签原来所在的位置，会触发重流。
标签设置visibility: hidden后，仍占据原来的位置，会触发重绘。

JS合并两个数组的方法 (如分页）

var a = [1,2,3];
var b = [4,5,6];
1、concat
js的Array对象提供了一个叫concat()方法，连接两个或更多的数组，并返回结果。
var c = a.concat(b);//c=[1,2,3,4,5,6];
注意：这里有一个问题，concat方法连接a、b两个数组后，a、b两个数组的数据不变，同时会返回一个新的数组。这样当我们需要进行多次的数组合并时，会造成很大的内存浪费，所以这个方法肯定不是最好的。
2、for循环
大概的思路是：遍历其中一个数组，把该数组中的所有元素依次添加到另外一个数组中。直接上代码：
for(var i in b){
a.push(b[i]);
}
这样的写法可以解决第一种方案中对内存的浪费，但是会有另一个问题：丑！这么说不是没有道理，如果能只用一行代码就搞定，哈哈哈~
3、apply
函数的apply方法有一个特性，那就是func.apply(obj,argv)，argv是一个数组。所以
a.push.apply(a,b);
调用a.push这个函数实例的apply方法，同时把，b当作参数传入，这样a.push这个方法就会遍历b数组的所有元素，达到合并的效果。
这里可能有点绕，我们可以把b看成[4,5,6]，变成这样：
a.push.apply(a,[4,5,6]);
即 a.push(4,5,6);

另注意：
　　1）以上3种合并方法并没有考虑过a、b两个数组谁的长度更小。所以好的做法是预先判断a、b两个数组哪个更大，然后使用大数组合并小数组，这样就减少了数组元素操作的次数！
　　2）有时候我们不希望原数组（a、b）改变，这时就只能使用concat了。

js生成[n,m]的随机数

Math.ceil(); //向上取整。

Math.floor(); //向下取整。

Math.round(); //四舍五入。

Math.random(); //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】 //比如0.8647578968666494

Math.ceil(Math.random()*10); // 获取从1到10的随机整数 ，取0的概率极小。

Math.round(Math.random()); //可均衡获取0到1的随机整数。

Math.floor(Math.random()*10); //可均衡获取0到9的随机整数。

Math.round(Math.random()*10); //基本均衡获取0到10的随机整数，其中获取最小值0和最大值10的几率少一半。

//生成从minNum到maxNum的随机数

    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
        break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
        break; 
            default: 
                return 0; 
            break; 
    } 
}