希恩 发布的文章

fetch(url,{method:"post",body:JSON.stringify({

    id:that.curTypeID,
    count:20
})})

.then(function(obj){

obj.json().then(function(res){
    console.log(res);
})

})
控制不同的init对象
async function postData(url = '', data = {}) {

const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
        'Content-Type': 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', 
    // no-referrer, 
    // *no-referrer-when-downgrade, 
    // origin, 
    // origin-when-cross-origin, 
    // same-origin, strict-origin, 
    // strict-origin-when-cross-origin, 
    // unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects

}

调用方法:
postData('https://example.com/answer', { answer: 42 })
.then(data => {

console.log(data); // JSON data parsed by `data.json()` call

});

html5的input输入值如果不符合要求,可以通过这个来判断。

比如spectre.css会在.form-input加上一个伪元素:not。

通过判断伪元素的样式就可以知道输入值是否符合要求,这要比直接验证输入值方便。

CSS伪元素(pseudo-elements)非常的有用——你可以用它制作出CSS三角形,用在提示框上面,还可以用它完成很多简单的任务,而不需要多余的HTML元素。以前,伪元素的CSS属性是无法用JavaScript获取的,但现在,有了一个新的JavaScript方法可以访问它们! 假设你的CSS代码是这样的:

.element:before {

content: 'NEW';
color: rgb(255, 0, 0);

}
为了获取.element:before里的样式属性,你可以使用下面的JavaScript代码:

var color = window.getComputedStyle(

document.querySelector('.element'), ':before'

).getPropertyValue('color')
将伪元素作为window.getComputedStyle方法的第二个参数,你能获取到伪元素样式里的属性!将这个技巧放入你的知识库里,随着浏览器的发展,伪元素将会变得越来越有用!

//对数组中的多个对象对某一个字段按照字母先后顺序排序

var array = [

    {"id":"111","user":"D"},
    {"id":"222","user":"B"},
    {"id":"111","user":"A"},
    {"id":"333","user":"C"},
    {"id":"444","user":"F"},
    {"id":"555","user":"E"}
];

//对数组中的user字段进行排序

arr.sort(function(a,b){
        return a.user.localeCompare(b.user)
    });

//排序后的结果

var array = [
    {"id":"111","user":"A"},
    {"id":"222","user":"B"},
    {"id":"333","user":"C"},
    {"id":"111","user":"D"},
    {"id":"555","user":"E"},
    {"id":"444","user":"F"}
    ];

//按id的数字大小升序或者是降序排序

  function compare(property,desc) {
        return function (a, b) {
            var value1 = a[property];
            var value2 = b[property];
            if(desc==true){
                // 升序排列
                return value1 - value2;
            }else{
                // 降序排列
                return value2 - value1;
            }
        }
    }

    arr.sort(compare("id",true));   

    //id 为数组中需要排序的字段,true为升序,false为降序排列

CSS

.dragWindow{
min-width:300px;
min-height: 240px;
position: absolute;
z-index: 9999;
}

HTML

<div class="dragWindow" style="width: 320px">
    可拖动窗口
</div>

JS

(function($){
window.dwInit = function (){
    $.dw = document.querySelector('.dragWindow');
    if(!$.dw){
        console.log('drag-window 未启用');
        return;
    }
    console.log('drag-window 已启用');
    //判断鼠标是否按下
    $.p = false;
    //鼠标按下处在页面中的水平偏移
    $.dx = 0;
    //鼠标按下处在页面中的垂直偏移
    $.dy = 0;
    //div在页面中的水平偏移
    $.sx = 0;
    //div在页面中的垂直偏移
    $.sy = 0;

    //鼠标按下时
    $.dw.onmousedown = function(e){
        if (!$.p) {
            $.p = true;
        }
        //处理兼容性和滚动条
        let event = e || window.event;
        let scrollLeft = document.documentElement.scrollLeft;
        let scrollTop = document.documentElement.scrollTop;
        let pageX = event.pageX || event.clientX + scrollLeft;
        let pageY = event.pageY || event.clientY + scrollTop;
        $.dx = pageX;
        $.dy = pageY;
        $.sx = $.dw.offsetLeft;
        $.sy = $.dw.offsetTop;
    }

    //鼠标移动时
    document.onmousemove = function(e){
        if ($.p) {
            let event = e || window.event;
            let scrollLeft = document.documentElement.scrollLeft;
            let scrollTop = document.documentElement.scrollTop;
            let pageX = event.pageX || event.clientX + scrollLeft;
            let pageY = event.pageY || event.clientY + scrollTop;
            $.dw.style.left = pageX - ($.dx - $.sx) + 'px';
            $.dw.style.top = pageY - ($.dy - $.sy) + 'px';
        }
    }

    //鼠标松开时
    document.onmouseup = function(){
        if ($.p) {
            $.p = false;
        }
    }
    window.dragWindow = $;
}

})({})

初始化

initDw(){
            let si = setInterval(function(){
                if (window.dwInit) {
                    clearInterval(si);
                    dwInit();
                }
            })
        }

performance.navigation.type

(该属性返回一个整数值,表示网页的加载来源,可能有以下4种情况):
  0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载,相当于常数performance.navigation.TYPE_NAVIGATE。
  1:网页通过“重新加载”按钮或者location.reload()方法加载,相当于常数performance.navigation.TYPE_RELOAD。
  2:网页通过“前进”或“后退”按钮加载,相当于常数performance.navigation.TYPE_BACK_FORWARD。
  255:任何其他来源的加载,相当于常数performance.navigation.TYPE_RESERVED。
 performance.navigation.redirectCount:表示网页经过重定向的次数。

if(window.performance.navigation.type==2){
    window.location.reload()
}