小码飞跑
高级前端工程师
努力学习，奋斗
获得徽章 0
- 原生JS模拟超链接在新窗口打开链接
1 function openNewWindow(url) {
2 var a = document.createElement("a");
3 a.href = url;
4 a.target = "_blank";
5 // 如使用jquery，以上3行可以精简为一行
6 // var a = $("<a href='" + url + "' target='_blank'>" + url + "</a>").get(0),
7 e = document.createEvent("MouseEvents");
8 e.initEvent("click", true, true);
9 a.dispatchEvent(e);
10 }展开4点赞 - 模拟form表单提交来打开一个新的页面
它的主要思路就是动态构建一个隐藏的form表单，将其target设为“_blank”,然后在动态构建起表单参数，最后手动触发起click事件。
举个例子，我们要在一段js代码中打开
www.baidu.com这个链接。我们可以用如下的代码来实现。
//js代码
var form='<form action="www.baidu.com" target="_blank" id="windowOpen" style="display:none">';
form+='<input name="a" value=1 />';
form+='</form>';
$('body').append(form);
$('#windowOpen').submit();
$('#windowOpen').remove();展开1点赞 - iframe作为微前端基础框架，有2个明显的缺点：
1，最大的问题：浏览器不支持前进后退。因为iframe感知不到这个操作。
2，刷新后，iframe的路由丢失。
3，弹出框不可全屏。只限制在iframe内部。
4，通信，不算大问题。就算用了一些微前端框架，他们也是提供了一套和postMessage类似的通信机制。大同小异。展开等人赞过 24 - 在程序代码中，status和state是我们经常使用的两个单词,他们一般被解释为[状态]。但是虽然都被解释为[状态]，但是它们的使用场景是不同的，对于具有强迫症，喜欢寻求真理的程序猿来说，必须得了解它们的区别，于是便引发了很多论坛对于status vs state的讨论，包括google在内。下面是我在知乎上看到的关于status vs state的比较通俗易懂的解释，也是赞同率最高的一个。
Satus Vs State
State 表达的是形态，而 Status 表达的是从一种形态转换成另一种形态的过程中，那些有显著特征的离散中间值。
举一个旅馆房间的例子，一个房间可以是婚房、普通房、豪华总统房，这些都是用 State 来表达。把一个普通房改造成豪华总统房，这个过程就有设计、材料准备、工人就位、施工、验收等步骤，这个时候就用 Status 来表达。那么，区分点在哪？区分点就在于一个房间当用 State 描述时，它是个彼此独立的枚举值，可以没有前后顺序的在婚房、普通房、豪华总统房之间来回转换。而当使用 Status 时，是存在前后状态依赖关系的一个变化量，不能没有做设计就施工，也不能没施工就验收。
所以，State 和 Status 的核心区别，就是它们的枚举值之间是否有依赖关系，没有依赖关系的用 State，有依赖关系的用 Status。展开赞过 23 - /**
* 加载vsconsle
*/
export async function steupVconsole () {
// await loadJs('cdn.bootcdn.net');
// eslint-disable-next-line no-undef
// const c = new VConsole();
// console.log(c);
console.log(window.location.hostname, /local|weixincs|dev|uat|sit|ver/.test(window.location.hostname));
if (/local|weixincs|dev|uat|sit|ver/.test(window.location.hostname)) {
await loadJs('cdn.bootcdn.net');
// eslint-disable-next-line no-undef
const vc = new VConsole();
console.log(vc);
}
}展开评论点赞 - /**
* 动态加载js
* @param {*} url
* @returns
*/
export function loadJs (url) {
return new Promise(resolve => {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = true;
window.document.head.appendChild(script);
script.onload = () => {
resolve();
};
});
}展开评论点赞 - /**
* 添加行配置信息
* @param {索引} index
* @param {行元素数据} row
*/
handleAddRow(index, row) {
const newRow = this.createRowData(row, false);
this.tableData.splice(index + 1, 0, newRow);
},
/**
* 复制行配置信息
* @param {索引} index
* @param {行元素数据} row
*/
handleCopyRow(index, row) {
const newRow = this.createRowData(row, true);
this.tableData.splice(index + 1, 0, newRow);
},
/**
* 删除行配置信息
* @param {索引} index
*/
handleDeleteRow(index) {
this.tableData.splice(index, 1);
},展开评论点赞
www.baidu.com