// <button id='btn'></button>
const btn = document.querySelector("#btn");
btn.onclick = () => {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.response);
    }
  }
  xhr.open('GET', 'http://www.scypurple.com/?name=lore&age=18');
  // xhr.open('POST', 'http://www.scypurple.com/')
  // 携带body参数，post也有get的两种参数携带方式
  // xhr.send({name:'lore', age:18}) // 或者 name=lore&age=18  
  xhr.send();
}

const express = require("express");

const app = express();
const port = 8080;
app.get('/test', (req, res) => {
    const {callback} = req.query;
    console.log(callback);
    const mine = {name:'lore', age:18};
    res.send(`${callback}(${JSON.stringify(mine)})`);
})

app.listen(port, (err) => {
    if(!err) {
    console.log(`listening at ${port}`);
    }
})

app.get('/test', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
    res.send('hello');
})

const ajax = (method,url) => {
    return new Promise((res, rej) => {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) res(xhr.response);
                else rej('error');
            }
        }
        xhr.open(method, url);
        xhr.send();
    })
}

const btn = document.querySelector("#btn")
btn.onclick = () => {
    const method = 'GET';
    const url = 'http://api.h-camel.com/api?mod=interview&ctr=issues&act=today';
    ajax(method, url)
        .then(resp => { console.log(resp); return ajax(method, url) })
        .then(resp => { console.log(resp); return ajax(method, url) })
        .then(resp => console.log(resp))
        .catch(err => err.message);
}

btn.onclick = async () => {
    const method = 'GET';
    const url = 'http://api.h-camel.com/api?mod=interview&ctr=issues&act=today';
    try {
        const res1 = await ajax(method, url);
        console.log(res1)
        const res2 = await ajax(method, url);
        console.log(res2)
        const res3 = await ajax(method, url);
        console.log(res3)
    }
    catch (e) {
        console.log(e);
    }
}

const anotherAxios = axios.create({
  timeout: 2000,
  baseURL: 'http://localhost:8080'
})
anotherAxios.get('/post');

import axios from 'axios';

const btn = document.querySelector("#btn")
const ul = document.createElement("ul");
document.body.appendChild(ul);
axios.defaults.baseURL = 'http://localhost:8080'
//axios.interceptors.request.use(config => {xxx; return configChange})
axios.interceptors.response.use(resp => resp.data[0], err => {
    alert(err);
    return new Promise(() => {});
});
btn.onclick = async () => {
    const res = await axios.get('/person', { params: { age: 18 } });
    const { name, age } = res
    ul.innerHTML = `<li>${name}</li><li>${age}</li>`
}

import axios from 'axios';

const btn = document.querySelector("#btn");
axios.defaults.baseURL = 'http://localhost:8080'
let controller;
axios.interceptors.request.use(config => {
    if (controller) controller.abort(); //在底层做了处理 if (!request) return; 如果没有请求 不取消
    controller = new AbortController();
    config.signal = controller.signal;
    return config;
})

axios.interceptors.response.use(resp => resp.data, err => {
    //alert(err);
    return new Promise(() => {});
});

btn.onclick = async () => {
    const res = await axios.get('/test1', {params: {delay: 3000}});
    console.log(res);
}

function foo() {
  console.log(a); // 是词法作用域所以输出 2 而不是 3
}

function bar() {
  let a = 3;
}

let a = 2;
bar(); 

const people = (function() {
    let name = 'lore';
    const sayName = () => console.log(name);
    return { sayName };
})()

console.log(people.sayName());

const typeOf = (obj) => '[' + Object.prototype.toString.call(obj).split(" ")[1];

const human = {
    species: "human",
    saySpecies() {
        console.log(this.species);
    },
    sayName() {
        console.log(this.name);
    }
};

const player = Object.create(human,{
      species: {value: "Gamer" },
      playGame:{value:function(){console.log(this.game)}}
})
// or do this
/*
const player = Object.create(human);
player.spcies = 'Gamer';
player.playGame = function(){console.log(this.game)};
*/
const lore = Object.create(player,
{
    name:{value: 'lore' },
    game:{value:'MONSTER HUNTER'}
})

console.log(lore.playGame());


// 也可以创建create方法
const human = {
    species: "human",
    create: function(values) {
        const instance = Object.create(this);
        Object.keys(values).forEach(key => instance[key] = values[key]);
        return instance;
    },
    saySpecies() {
        console.log(this.species);
    },
    sayName() {
        console.log(this.name);
    }
};

const player = human.create({
    species:'player',
    playGame() {
        console.log(`I'm playing ${this.game} now !`);
    }
})

const lore = player.create({
    name:'lore',
    game:'MONSTER HUNTER'
})

console.log(lore.playGame());

function Animal() {
    this.colors = ['black', 'white']
}
Animal.prototype.getColor = function() {
    return this.colors
}
function Dog() {}
Dog.prototype =  new Animal()

let dog1 = new Dog()
dog1.colors.push('brown')
let dog2 = new Dog()
console.log(dog2.colors)  // ['black', 'white', 'brown']

function Animal(name) {
  this.name = name;
  this.getName = function () {
    return this.name;
  }
}

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = new Animal();

function Animal(name) {
    this.name = name
    this.colors = ['black', 'white']
}
Animal.prototype.getName = function() {
    return this.name
}
function Dog(name, age) {
    Animal.call(this, name)
    this.age = age
}
Dog.prototype =  new Animal()
Dog.prototype.constructor = Dog

let dog1 = new Dog('奶昔', 2)
dog1.colors.push('brown')
let dog2 = new Dog('哈赤', 1)
console.log(dog2) 
// { name: "哈赤", colors: ["black", "white"], age: 1 }

- Dog.prototype =  new Animal()
- Dog.prototype.constructor = Dog

+ function F() {}
+ F.prototype = Animal.prototype
+ let f = new F()
+ f.constructor = Dog
+ Dog.prototype = f
//稍微封装下上面添加的代码后：
function object(o) {
    function F() {}
    F.prototype = o
    return new F()
}
function inheritPrototype(child, parent) {
    let prototype = object(parent.prototype)
    prototype.constructor = child
    child.prototype = prototype
}
inheritPrototype(Dog, Animal)
//如果你嫌弃上面的代码太多了，还可以基于组合继承的代码改成最简单的寄生式组合继承：
- Dog.prototype =  new Animal()
- Dog.prototype.constructor = Dog

+ Dog.prototype =  Object.create(Animal.prototype)
+ Dog.prototype.constructor = Dog

// 为什么要创造一个空函数 不能直接：
+ Dog.prototype = Animal.prototype // x
+ Dog.prototype.constructor = Dog
// 因为 x 行代码让 左右两侧指向同一个引用， 而下一行使 Animal.prototype.constructor 被改写

// includes
const unique = arr => {
  if (!Array.isArray(arr)) {
    return new Error("type error");
  }
  const res = [];
  for (let elem of arr) {
    if (!res.includes(elem)) {
      res.push(elem);
    }
  }
  return res;
}

// indexOf
const unique = arr => arr.filter((e, i) => arr.indexOf(e) === i);

// set
const unique = arr => [...new Set(arr)];

[1, [2, [3]]].flat(2)  // [1, 2, 3]

function flatten(arr) {
    var result = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        if (Array.isArray(arr[i])) {
            result = result.concat(flatten(arr[i]))
        } else {
            result.push(arr[i])
        }
    }
    return result;
}

function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}

function shallowCopy(obj) {
    if (typeof obj !== 'object') return
    
    let newObj = obj instanceof Array ? [] : {}
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = obj[key]
        }
    }
    return newObj
}

function deepClone(obj) {
    if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key];
        }
    }
    return newObj;
}

// my type
const deepClone = obj => {
  if (typeof obj !== 'object' || obj === null) return obj;
  const newObj = obj instanceof Array ? [] : {};
  for (const [key, value] of Object.entries(obj)) {
    newObj[key] = typeof value === 'object' ? deepClone(value) : value;
  }
  return newObj;
}

const isObject = (target) => (typeof target === "object" || typeof target === "function") && target !== null;

function deepClone(target, map = new WeakMap()) {
    if (map.get(target)) {
        return target;
    }
    // 获取当前值的构造函数：获取它的类型
    let constructor = target.constructor;
    // 检测当前对象target是否与正则、日期格式对象匹配
    if (/^(RegExp|Date)$/i.test(constructor.name)) {
        // 创建一个新的特殊对象(正则类/日期类)的实例
        return new constructor(target);  
    }
    if (isObject(target)) {
        map.set(target, true);  // 为循环引用的对象做标记
        const cloneTarget = Array.isArray(target) ? [] : {};
        for (let prop in target) {
            if (target.hasOwnProperty(prop)) {
                cloneTarget[prop] = deepClone(target[prop], map);
            }
        }
        return cloneTarget;
    } else {
        return target;
    }
}

class EventEmitter {
    constructor() {
        this.cache = {}
    }
    on(name, fn) {
        if (this.cache[name]) {
            this.cache[name].push(fn)
        } else {
            this.cache[name] = [fn]
        }
    }
    off(name, fn) {
        let tasks = this.cache[name]
        if (tasks) {
            const index = tasks.findIndex(f => f === fn || f.callback === fn)
            if (index >= 0) {
                tasks.splice(index, 1)
            }
        }
    }
    emit(name, once = false, ...args) {
        if (this.cache[name]) {
            // 创建副本，如果回调函数内继续注册相同事件，会造成死循环
            let tasks = this.cache[name].slice()
            for (let fn of tasks) {
                fn(...args)
            }
            if (once) {
                delete this.cache[name]
            }
        }
    }
}

// 测试
let eventBus = new EventEmitter()
let fn1 = function(name, age) {
    console.log(`${name} ${age}`)
}
let fn2 = function(name, age) {
    console.log(`hello, ${name} ${age}`)
}
eventBus.on('aaa', fn1)
eventBus.on('aaa', fn2)
eventBus.emit('aaa', false, '布兰', 12)
// '布兰 12'
// 'hello, 布兰 12'

function parseParam(url) {
    const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
    const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
    let paramsObj = {};
    // 将 params 存到对象中
    paramsArr.forEach(param => {
        if (/=/.test(param)) { // 处理有 value 的参数
            let [key, val] = param.split('='); // 分割 key 和 value
            val = decodeURIComponent(val); // 解码
            val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字
    
            if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则添加一个值
                paramsObj[key] = [].concat(paramsObj[key], val);
            } else { // 如果对象没有这个 key，创建 key 并设置值
                paramsObj[key] = val;
            }
        } else { // 处理没有 value 的参数
            paramsObj[param] = true;
        }
    })
    
    return paramsObj;
}

function render(template, data) {
    const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
    if (reg.test(template)) { // 判断模板里是否有模板字符串
        const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段
        template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
        return render(template, data); // 递归的渲染并返回渲染后的结构
    }
    return template; // 如果模板没有模板字符串直接返回
}

let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let person = {
    name: '布兰',
    age: 12
}
render(template, person); // 我是布兰，年龄12，性别undefined

let imgList = [...document.querySelectorAll('img')]
let length = imgList.length

const imgLazyLoad = function() {
    let count = 0
    return (function() {
        let deleteIndexList = []
        imgList.forEach((img, index) => {
            let rect = img.getBoundingClientRect()
            if (rect.top < window.innerHeight) {
                img.src = img.dataset.src
                deleteIndexList.push(index)
                count++
                if (count === length) {
                    document.removeEventListener('scroll', imgLazyLoad)
                }
            }
        })
        imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
    })()
}

// 这里最好加上防抖处理
document.addEventListener('scroll', imgLazyLoad)

function debounce(func, wait) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        clearTimeout(timeout)
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

var node = document.getElementById('layout')
function getUserAction(e) {
    console.log(this, e)  // 分别打印：node 这个节点 和 MouseEvent
    node.innerHTML = count++;
};
node.onmousemove = debounce(getUserAction, 1000)

function debounce(func, wait, immediate) {
    var timeout, result;
    
    var debounced = function () {
        var context = this;
        var args = arguments;
        
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            // 如果已经执行过，不再执行
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) result = func.apply(context, args)
        } else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
        return result;
    };

    debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
    };

    return debounced;
}

var setUseAction = debounce(getUserAction, 10000, true);
// 使用防抖
node.onmousemove = setUseAction

// 取消防抖
setUseAction.cancel()

function throttle(func, wait) {
    var context, args;
    var previous = 0;

    return function() {
        var now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function() {
        previous = options.leading === false ? 0 : new Date().getTime();
        timeout = null;
        func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function() {
        var now = new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
    };
    
    throttled.cancel = function() {
        clearTimeout(timeout);
        previous = 0;
        timeout = null;
    }
    return throttled;
}

function add(a, b, c) {
    return a + b + c
}
add(1, 2, 3)
let addCurry = curry(add)
addCurry(1)(2)(3)

function curry(fn) {
    let judge = (...args) => {
        if (args.length == fn.length) return fn(...args)
        return (...arg) => judge(...args, ...arg)
    }
    return judge
}

function add(a, b, c) {
    return a + b + c
}
let partialAdd = partial(add, 1)
partialAdd(2, 3)

function partial(fn, ...args) {
    return (...arg) => {
        return fn(...args, ...arg)
    }
}

function clg(a, b, c) {
    console.log(a, b, c)
}
let partialClg = partial(clg, '_', 2)
partialClg(1, 3)  // 依次打印：1, 2, 3

function partial(fn, ...args) {
    return (...arg) => {
        args[index] = 
        return fn(...args, ...arg)
    }
}