路由刷新问题 参考
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是动态的向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性能更好一点;
相同点:都是隐藏标签,对应的标签仍存在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;
}
}
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- 程序员|【高级Java架构师系统学习】毕业一年萌新的Java大厂面经,最新整理
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- linux笔记|linux 常用命令汇总(面向面试)
- jvm|【JVM】JVM08(java内存模型解析[JMM])
- 面试|我经历的IT公司面试及离职感受(转)