# js 基础代码(面试，平时都可以用)🚀

console.time('测试');
console.timeEnd('测试);

//2
performance.mark('start')
setTimeout(()=>{
    performance.mark('end')
    performance.measure('performance cost','start','end')
    console.log(performance.getEntriesByName('performance cost')[0].duration)
},2000)

var newNode=event.target.cloneNode(true);

dom.className='a';

dom.classList.add()/dom.classList.remove()

dom.getAttribute()  dom.setAttribute()

dom.style.borderWidth/['border-width']  包含px  计算后的属性用 getComputedStyle().getPropertyValue()

DOMContentLoaded/onload/

宽高：offsetWidth offsetHeight 必须在dom 有才行，height 、width 不直接设置无法正确获取

dom.outerHTML()

document.createTextNode   document.createComment

console.group('测试1')
cosnole.groupEnd()

dom.children  dom.childNodes 

    //XMLHttpRequest 原生实现ajax
    function getJSON(url){
        return new Promise((resolve,reject)=>{
            const request=new XMLHttpRequest();
            request.open('GET',url);
            request.onload=function(){
                    if(this.status===200){
                        resolve(JSON.parse(this.response));
                    }
                    else{
                        reject(this.status + '  '+this.statusText);
                    }
            },
            request.onerror=()=>{
                reject(this.status+' '+this.statusText);
            }
            request.send();
        });
    }

    getJSON('./ajaxtest.json').then(res=>{
       alert(JSON.stringify(res));
    }).catch(e=>{
        console.log('异常');
        console.log(e);
    })

    fetch(url,param).then(response=>response.json())

TMLElement.dataset["arr"] ) 

  Con = [].shift.call(arguments); arguments 删除第一个同时赋给Con

  var args = Array.prototype.slice.apply(arguments);　
    //方案1
    function create(){
        const  obj=new Object();
        const Constructor=[].shift.call(arguments);
        obj.__proto__=Constructor
        const ret=Constructor.apply(obj,arguments);
        return ret instanceof Object?ret:obj;
    }

    //方案2
    function create(fn,...args){
        const obj=Object.create(fn.prototype)
        const ret=fn.call(obj,...args)
        return ret instanceof Object?ret:obj 
    }

   Object.defineProperty(obj,'name',{
          // writable:true,
          get:()=>{
            return 'jr'
          }
        })
        console.log(obj.name)
        obj.name=122
        console.log(obj.name)

//严格检查
 const _toString=Object.prototype.toString
isPureObject(obj){
    return _toString.call(obj)==='[object Object]'
}

isTrue(obj){
    return obj===true
}

isRegExp(v){
    return _toString.call(v)==='[object RegExp]'
}

isFunction(func){
    return typeof func==='function'
}


!!a   a 为undefined 返回false
isFunction(func){
    return Object.prototype.call(func)==='[object Function]'
}

//对某些数组原型方法做改造，不污染全部数组的原型。
const arrayPro=Array.prototype
var arrMethods=Object.create(arrayPro)

['push'].forEach(method=>{
    arrMethods[method]=function(){
        //避免闭包泄漏
        let i=arguments.length;
        const args=new Array(i)
        while(i--){
            args[i]=arguments[i]
        }
        arrayPro.call(this,args)
        //做些额外的操作
    }
})

// 创建一个{}，原型上没东西的

const c=Object.create(null)

    Vue(){
        
        if(this instanceof Vue){

        }
        else{
            throw new Error('必须使用new 创建')
        }
        
        //方法2：
        if(new.target===Vue){

        }
        else{
            throw new Error('必须使用new 创建')
        }
    }

//容易影响全局，可以拷贝一份出来用
Array.prototype.unique=function(){
    return [...new Set(this)]
}

    [...new Set(arr.flat(Infinity))].sort((a,b)=>return a-b)

isUrl(url){
    try{
        const item=new URL(url)
        console.log(item)
        return true
    }catch(e){
        return false
    }
}

import App from App.vue
export default App 


export * from App.vue （导出所有模块）
export {moduleA as default} from '.../' (重命名为默认模块)
export {default} from App.vue （导出默认模块）

    let timing = performance.timing,
    start = timing.navigationStart,
    dnsTime = 0,
    tcpTime = 0,
    firstPaintTime = 0,
    domRenderTime = 0,
    loadTime = 0;

dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;

console.log('DNS解析时间:', dnsTime, 
            '\nTCP建立时间:', tcpTime, 
            '\n首屏时间:', firstPaintTime,
            '\ndom渲染完成时间:', domRenderTime, 
            '\n页面onload时间:', loadTime);