代码片段

mockjs

js关闭标签页

  1. 可以关闭js打开的标签
window.opener = null;
window.close();
  1. 微信中 用这个对象关闭当前页面:
WeixinJSBridge.call('closeWindow');
  1. 微信浏览器页面的还有一种关闭方式:

wx.closeWindow();

使用这个方式的前提必需要引入微信的js-sdk才行。能成功用这个js-sdk必需要去微信认证才行。用这种方式就是微信公众开发的页面可能会比较适用。如果你是通过微信浏览器扫码进入的第三方页面那么最好的方式用WeixinJSBridge对象。

WeixinJSBridge对象还提供了哪些功能:
WeixinJSBridge.call('hideToolbar'); //隐藏右下面工具栏
WeixinJSBridge.call('showToolbar'); //显示右下面工具栏
WeixinJSBridge.call('hideOptionMenu'); //隐藏右上角三个点按钮。
WeixinJSBridge.call('showOptionMenu'); //显示右上角三个点按钮。

关闭标签页/浏览器给出提示

需要有一些用户操作,才能触发,chrome,firefox不支持自定义信息,sarfi支持.

window.onbeforeunload = function (e) {
  var message = 'some word';
  e = e || window.event;
  if (e) {
    e.returnValue = message;
  }
  if (event.clientX > document.body.clientWidth && event.clientY < 0 || event.altKey) {
    console.log("你关闭了浏览器");
  } else {
    console.log("你正在刷新页面");
  }
  return message;
};

js获取网络速度

HTML5 navigator.connection

	downlink: 10
	effectiveType: "4g"
	onchange: null
	rtt: 0
	saveData: false

图片下载速度

function checkClientSpeed(callback) {
    //测试图片大小为 58.6 kb
    var SPEED_FILE_SIZE = 58.6;
    //被检测图片地址
    var SPEED_IMG_URL = '//img10.allinmd.cn/v3/single/spread_item2_img.png?' + Date.now();
    var element = document.createElement('img');
    element.setAttribute('src', SPEED_IMG_URL);
    element.setAttribute('style', 'display:none');
    document.body.appendChild(element);
    var speed_time1 = Date.now();
    element.addEventListener('load', function (evt) {
        var loadTime = Date.now() - speed_time1;
        var speed = Math.round((SPEED_FILE_SIZE * 1000) / loadTime);
        callback(speed)
    });
}

user-agent 分析

var browser = {
    versions: function() {
        var u = navigator.userAgent,
            app = navigator.appVersion;
        return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
            weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
            qq: u.match(/\sQQ/i) == " qq" //是否QQ
        };
    }(),
    language: (navigator.browserLanguage || navigator.language).toLowerCase()
}

react 刷新404

webpack-devServer: {
  historyApiFallback: true
}

nginx

location /xxx {
  try_files $uri $uri/ /xxx/index.html;
}

react-router browserHistory刷新页面404问题解决

react

外面会多一层div包裹,能去掉吗

js 可选链 兼容性

1. 可选链(Optional chaining) ?.

以前我们可能会写这样的代码:

const a = {
    b: {
        c: {
            d: [1]
        }    
    }}
const data = (a && a.b && a.b.c && a.b.c.d) || []

即为了确保不会报 cant read property from property, 我们需要添加很长的判断条件

有了,可选链之后,你可以这样:

示例一:

a.e.f  // 报错,a.e 为 undefined,取 undefined.f 会报错
a.e?.f // undefined, 即,使用可选链之后,不会报错
a?.e.f// 报错,即,a?.e 只能保证即使 a 为 undefined,a.e 也不会报错// 但是不能阻止 a.e.f 报错
// 但是console.log(a?.e.f.d.g)   // 会报错,a?.e 为 undefined, f 不是 undefined 的属性console.log(a.e.f?.d.g)   // 会报错,a.e 为 undefined, f 不是 undefined 的属性console.log(a.e?.f.d.g)  // 这样居然不会报错???为什么

// 针对以上会报错的两种情况,可以使用多个可选链叠加一起使用console.log(a?.e?.f?.d?.g)   // 不会报错

示例二:

const a = null;a.b;  // 报错,b 不是 null 的属性
a?.b  // 不会报错,打印 undefined
a?.b.c.d.e.f  // 打印 undefined, 不会报错, 为什么 ???

示例三, 可选链与函数调用:

语法 func?.(args)

const a = {
    b: {
    c:{            
        d: [1]
           
    }}
    console.log(a.e?.())  //
    不会报错console.log(a.e?.b())  // 同样不会报错

const a = {
        e: {
        c: { 
        d: [1] 
   }}console.log(a.e?.())  // 会报错,a.e 不是函数

就是说,通过可选链,如果 a.e 为 null 或者 undefined,调用a.e?.() 不会报错。
但是,如果存在 a.e, 但是 a.e 不是函数,那么还是会正常报错

总结 可选链操作符使得:

  • 当对象为 null 或者 undefined 时,读取对象的属性不会报错。
  • 当函数为 null 或者 undefined 时, 调用该函数不会报错
  • 如果遇到连续的属性访问时,可以使用多个可选链(坏处可能是被 babel 编译之后,代码量变多)

2. 双问号(Nullish coalescing operator) ??

left ?? right

当 left 为 null 或者 undefined 时,返回右边的值.

注意:|| 不一样的是,如果 left 为 '' 或者 0 或者 false, ?? 依然会返回 left 的值:

const foo = null ?? 'default string';console.log(foo);   // 返回右边的值 default string
const foo = null || 'default string';console.log(foo);   // 返回右边的值 default string
// 遇到 false,0,'', NaN 时不一样const baz = 0 ?? 42;console.log(baz);   // 返回左边的值,0
const baz = 0 || 42;console.log(baz);   // 返回右边的值,42

同样,它也有短路操作

function A() { console.log('A was called'); return null;}function B() { console.log('B was called');}
console.log( A() ?? B() );// A 函数执行,返回 undefined,// ?? 认为 undefined 是 "false" 值,此时会继续计算 B 函数// 最终返回 undefined(B 函数没有返回值,则默认为 undefined)
// 短路function A() { console.log('A was called'); return false;}function B() { console.log('B was called');}
console.log( A() ?? B() );// A 函数执行,返回 false,// ?? 认为 false 是 "true" 值,不再计算 C 函数, 最终返回 false
3. 可选链与双问号

可选链允许使用 undefined?.xxx() 而不报错,当然不报错是一回事,它的返回结果还是 undefined.

因此,这种时候可以再配合双问号来设置默认值:

undefined?.xxx()  ?? '123'  // 返回 123