总结|大前端

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

  • 通过hash
    window.location.href = https://www.it610.com/article/‘#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; } }

    推荐阅读