1// ./webpack.config.js
2const path = require('path')
3
4module.exports = {
5    // ...
6    devServer: {
7        contentBase: path.join(__dirname, 'dist'),
8        compress: true,
9        port: 9000,
10        proxy: {
11            '/api': {
12                target: 'https://api.github.com'
13            }
14        }
15        // ...
16    }
17}

1const express = require('express');
2const proxy = require('http-proxy-middleware');
3
4const app = express();
5
6app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
7app.listen(3000);
8
9// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

1function update() {
2    app.innerText = obj.foo
3}
4
5function defineReactive(obj, key, val) {
6    Object.defineProperty(obj, key, {
7        get() {
8            console.log(`get ${key}:${val}`);
9            return val
10        },
11        set(newVal) {
12            if (newVal !== val) {
13                val = newVal
14                update()
15            }
16        }
17    })
18}

1const obj = {}
2defineReactive(obj, 'foo', '')
3setTimeout(()=>{
4    obj.foo = new Date().toLocaleTimeString()
5},1000)

1function observe(obj) {
2    if (typeof obj !== 'object' || obj == null) {
3        return
4    }
5    Object.keys(obj).forEach(key => {
6        defineReactive(obj, key, obj[key])
7    })
8}

1function defineReactive(obj, key, val) {
2    observe(val)
3    Object.defineProperty(obj, key, {
4        get() {
5            console.log(`get ${key}:${val}`);
6            return val
7        },
8        set(newVal) {
9            if (newVal !== val) {
10                val = newVal
11                update()
12            }
13        }
14    })
15}

1set(newVal) {
2    if (newVal !== val) {
3        observe(newVal) // 新值是对象的情况
4        notifyUpdate()
5    }
6}

1const obj = {
2    foo: "foo",
3    bar: "bar"
4}
5observe(obj)
6delete obj.foo // no ok
7obj.jar = 'xxx' // no ok

1const arrData = [1,2,3,4,5];
2arrData.forEach((val,index)=>{
3    defineProperty(arrData,index,val)
4})
5arrData.push() // no ok
6arrData.pop()  // no ok
7arrDate[0] = 99 // ok

1 function reactive(obj) {
2    if (typeof obj !== 'object' && obj != null) {
3        return obj
4    }
5    // Proxy相当于在对象外层加拦截
6    const observed = new Proxy(obj, {
7        get(target, key, receiver) {
8            const res = Reflect.get(target, key, receiver)
9            console.log(`获取${key}:${res}`)
10           return res
11        },
12        set(target, key, value, receiver) {
13            const res = Reflect.set(target, key, value, receiver)
14            console.log(`设置${key}:${value}`)
15            return res
16        },
17        deleteProperty(target, key) {
18            const res = Reflect.deleteProperty(target, key)
19            console.log(`删除${key}:${res}`)
20            return res
21        }
22    })
23    return observed
24}

1const state = reactive({
2    foo: 'foo'
3})
4// 1.获取
5state.foo // ok
6// 2.设置已存在属性
7state.foo = 'fooooooo' // ok
8// 3.设置不存在属性
9state.dong = 'dong' // ok
10// 4.删除属性
11delete state.dong // ok

1 const state = reactive({
2    bar: { a: 1 }
3})
4
5// 设置嵌套对象属性
6 state.bar.a = 10 // no ok

1function reactive(obj) {
2    if (typeof obj !== 'object' && obj != null) {
3        return obj
4    }
5    // Proxy相当于在对象外层加拦截
6    const observed = new Proxy(obj, {
7        get(target, key, receiver) {
8            const res = Reflect.get(target, key, receiver)
9            console.log(`获取${key}:${res}`)
10           return isObject(res) ? reactive(res) : res
11        },
12    return observed
13}

1function observe(obj) {
2    if (typeof obj !== 'object' || obj == null) {
3        return
4    }
5    Object.keys(obj).forEach(key => {
6        defineReactive(obj, key, obj[key])
7    })
8}

1function reactive(obj) {
2    if (typeof obj !== 'object' && obj != null) {
3        return obj
4    }
5    // Proxy相当于在对象外层加拦截
6    const observed = new Proxy(obj, {
7        get(target, key, receiver) {
8            const res = Reflect.get(target, key, receiver)
9            console.log(`获取${key}:${res}`)
10            return res
11        },
12        set(target, key, value, receiver) {
13            const res = Reflect.set(target, key, value, receiver)
14            console.log(`设置${key}:${value}`)
15            return res
16        },
17        deleteProperty(target, key) {
18            const res = Reflect.deleteProperty(target, key)
19            console.log(`删除${key}:${res}`)
20            return res
21        }
22    })
23    return observed
24}

1const obj = [1,2,3]
2const proxtObj = reactive(obj)
3obj.psuh(4) // ok

1// 数组重写
2const originalProto = Array.prototype
3const arrayProto = Object.create(originalProto)
4['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
5  arrayProto[method] = function () {
6    originalProto[method].apply(this.arguments)
7    dep.notice()
8  }
9});
10
11// set、delete
12Vue.set(obj,'bar','newbar')
13Vue.delete(obj),'bar')

//观察者模式，观察者函数都放在Set集合，当修改obj的值，会在set函数中拦截，自动执行Set所有的观察者
const queueObservers=new Set();
const observe=fn=>queueObservers.add(fn)//将观察者函数加入队列
const observable=obj=>new Proxy(obj,{set});//返回一个原始对象的Proxy代理，拦截赋值操作，触发充当观察者的每个函数
function set(target,key,value,receiver){
    const res=Reflect.set(target,key,value,receiver);
    queueObservers.forEach(observer=>observer());//触发充当观察者的每个函数
    return res;
}

let api={
    _apiKey:'123456def'
}
const RESTRICTED=['_apiKey']
api=new Proxy(api,{
    get(target,key,proxy){
        if(RESTRICTED.indexOf(key)>-1){
            throw Error(`${key}不可访问`)
        }
        return Reflect.get(target,key,proxy)
    },
    set(target,key,value,proxy){
        if(RESTRICTED.indexOf(key)>-1){
            throw Error(`${key}不可修改`)
        }
        return Reflect.set(target,key,value,proxy)
    }
})
console.log(api._apiKey);
api._apiKey='12345';//上述都抛出错误

var obj={a:1},
    handles={
        get(target,key,context){
            //target==obj,context==pobj,key为属性名
            console.log("accessing",key);
            return Reflect.get(target,key,context)
        }
    }
pobj=new Proxy(obj,handlers);
obj.a;//1
pobj.a;//acessing:a
//1

1#!/bin/bash
2# metaprogram
3echo '#!/bin/bash' >program
4for ((I=1; I<=1024; I++)) do
5    echo "echo $I" >>program
6done
7chmod +x program

1var person = {
2  name: "张三"
3};
4
5var proxy = new Proxy(person, {
6  get: function(target, propKey) {
7    return Reflect.get(target,propKey)
8  }
9});
10
11proxy.name // "张三"

1function createArray(...elements) {
2  let handler = {
3    get(target, propKey, receiver) {
4      let index = Number(propKey);
5      if (index < 0) {
6        propKey = String(target.length + index);
7      }
8      return Reflect.get(target, propKey, receiver);
9    }
10  };
11
12  let target = [];
13  target.push(...elements);
14  return new Proxy(target, handler);
15}
16
17let arr = createArray('a', 'b', 'c');
18arr[-1] // c

1const target = Object.defineProperties({}, {
2  foo: {
3    value: 123,
4    writable: false,
5    configurable: false
6  },
7});
8
9const handler = {
10  get(target, propKey) {
11    return 'abc';
12  }
13};
14
15const proxy = new Proxy(target, handler);
16
17proxy.foo
18// TypeError: Invariant check failed

1let validator = {
2  set: function(obj, prop, value) {
3    if (prop === 'age') {
4      if (!Number.isInteger(value)) {
5        throw new TypeError('The age is not an integer');
6      }
7      if (value > 200) {
8        throw new RangeError('The age seems invalid');
9      }
10    }
11
12    // 对于满足条件的 age 属性以及其他属性，直接保存
13    obj[prop] = value;
14  }
15};
16
17let person = new Proxy({}, validator);
18
19person.age = 100;
20
21person.age // 100
22person.age = 'young' // 报错
23person.age = 300 // 报错

1const obj = {};
2Object.defineProperty(obj, 'foo', {
3  value: 'bar',
4  writable: false,
5});
6
7const handler = {
8  set: function(obj, prop, value, receiver) {
9    obj[prop] = 'baz';
10  }
11};
12
13const proxy = new Proxy(obj, handler);
14proxy.foo = 'baz';
15proxy.foo // "bar"

1'use strict';
2const handler = {
3  set: function(obj, prop, value, receiver) {
4    obj[prop] = receiver;
5    // 无论有没有下面这一行，都会报错
6    return false;
7  }
8};
9const proxy = new Proxy({}, handler);
10proxy.foo = 'bar';
11// TypeError: 'set' on proxy: trap returned falsish for property 'foo'

1var handler = {
2  deleteProperty (target, key) {
3    invariant(key, 'delete');
4    Reflect.deleteProperty(target,key)
5    return true;
6  }
7};
8function invariant (key, action) {
9  if (key[0] === '_') {
10    throw new Error(`无法删除私有属性`);
11  }
12}
13
14var target = { _prop: 'foo' };
15var proxy = new Proxy(target, handler);
16delete proxy._prop
17// Error: 无法删除私有属性

var obj={a:1},
handlers={
    get(target,key,context){
        console.log('accessing:',key);
        return target[key];
    }
};
var p=Proxy.revocable(obj,handlers);//返回一个有两个属性proxy和revoke的对象
const pobj=p.proxy;
const prevoke=p.revoke;
console.log(pobj.a);
prevoke();//代理被取消后，任何对它的访问都会抛出错误
pobj.a()//Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked

var messages=[],
handlers={
    get(target,key){
        if(typeof target[key]=='string'){
            return target[key].replace(/[^w]/g,"");//过滤标点符号
        }
        return target[key];//所有其他的传递下去
    },
    set(target,key,val){
        //设定唯一字符串，改为小写
        if(typeof val=='string'){//值为字符串，且是唯一值添加元素       
            if(target.indexOf(val)==-1){
                target.push(val.toLowerCase());
            }
        }
        return true;
    }
}
var messages_proxy=new Proxy(messages,handlers);
messages_proxy.push('heLLo...',42,"wOrlD!!","WoRld!!");
messages_proxy.forEach(val=>{
    console.log(val);
})
messages.forEach(v=>console.log(v));//hello... world!! world!!

var handlers={
    get(target,key,context){
        return function(){
            context.speak(key+"!")
        }
    }
},
catchall=new Proxy({},handlers),
greeter={
    speak(who="someone"){
        console.log("hello",who)

    }
}
Object.setPrototypeOf(greeter,catchall);//将代理设置为目标对象的__proto___
greeter.speak();
greeter.speak("world");
greeter.everyone();//检查[[Prototype]]链会查看catchall是否有everyone属性，然厚代理的get()处理函数介入并返回一个用访问的属性名("everyone")调用speak()函数

var obj={
    a:1,
    foo(){
        console.log("a:",this.a)
    }
},
handlers={
    get(target,key,context){
        if(Reflect.has(target,key)){
            return Reflect.get(target,key,context)
        }
        else{
            throw Error("no such property/method")
        }
    },
    set(target,key,val,context){
        if(Reflect.has(target,key)){
            return Reflect.set(target,key,val,context)
        }else{
            throw Error("no such property/method")
        }
    }
},
pobj=new Proxy(obj,handlers)
pobj.a=3;
pobj.foo();
pobj.b=4;//Uncaught Error: no such property/method

var handlers={
    get(){
        throw "no such property/method"
    },
    set(){
        throw "no such property/method"

    }
}
var pobj=new Proxy({},handlers);
var obj={
    a:1,
    foo(){
        console.log("a:",this.a)
    }
}
Object.setPrototypeOf(obj,pobj);
obj.a=3;
obj.foo();
obj.b=4;//Uncaught Error: no such property/methodxxc

var obj1={
    name:"obj-1",
    foo(){
        console.log("obj1.foo",this.name)
    }
},obj2={
    name:"obj-2",
    foo(){
        console.log("obj2.foo",this.name)
    },
    bar(){
        console.log("obj2.bar",this.name)
    }   
},
handlers={
    get(target,key,context){
        if(Reflect.has(target,key)){
            return Reflect.get(target,key,context)
        }else{
            //伪装多个[[Prototype]]
            for(let p of target[Symbol.for("[[Prototype]]")]){
                if(Reflect.has(p,key)){
                    return Reflect.get(p,key,context)
                }
            }
        }
    }
},
obj3=new Proxy({
    name:"obj3",
    baz(){
        this.foo();
        this.bar()
    }
},handlers)
//伪装多个[[Prototype]]的链接
obj3[Symbol.for("[[Prototype]]")]=[obj1,obj2];
obj3.baz();
//obj1.foo:obj-3
//obj2.var:obj-3

var form = document.getElementById("myForm");
let xhr=new XMLHttpRequest();
var formData = new FormData(form);
xhr.onreadystatechange=function(){
   if(xhr.readyState==4){
       if((xhr.status>=200&&xhr.status<300)||xhr.status===304){
                        alert(xhr.responseText)
                    }else{
                        alert("Request was unsuccessful:"+xhr.status)
                    }
                

            }
        xhr.open("post","http://127.0.0.1:3007/api/login",true)
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')//设置发送请求的头部
        xhr.timeout=1000;//设置超时
        xhr.ontimeout=function(){
            alert("Request didn not return in a second")
        }
        xhr.send(serialize(form))
    	//使用FormData
    	//xhr.send(new FormData(form))
       
   } 

var button=document.querySelector('[type=button]')
       button.onclick=function(){
       var form = document.getElementById("myForm");
       let paramsHeaders=new Headers({
           'Content-Type':'application/x-www-form-urlencoded'
       });
       fetch('http://127.0.0.1:3007/api/login',{// 服务端返回 {"name": "test", "age": 1} 字符串 
           method:'POST',
           body:serialize(form),
           headers:paramsHeaders
       }).then((res)=>{
           return res.json()// 将 response.body 通过 JSON.parse 转换为 JS 对象并且记得return给下一个.then使用,或者使用res.text()
       },(err)=>{
           console.log(err)
       })
       

let payload=JSON.stringfy({foo:'bar'});
let jsonHeaders=new Headers({
    'Content-Type':'application/json'
})
fetch('/send-me-json',{
    method:'POST',
    body:payload,
    headers:jsonHeaders
})

let payload='foo=bar&baz=qux';
let paramheaders=newHeaders({
    'Content-Type':'application/x-www-form-urlencoded'
})
fetch('/send-me-params',{
    method:'POST',
    body:payload,
    headers:paramHeaders
})

let imageFormData=new FormData();
let imageInput=document.querySelector("input[type='file']");
//上传多个文件
/*imageInput=document.querySelctor("input[type='file'][multiple]");
for(let i=0;i<imaeInput.files.length;++i){
    imageFormData.append('image',imageInput.files[i])
}*/
imageFormData.append('image',imageInput.files[0]);
fetch('/img-upload',{
    method:'POST',
    body:imageFormData
})

let abortController=new AbortController();
fetch('wikipedia.zip',{signal:abortController.signal})
.catch(()=>{console.log('aborted');
            //10ms中断请求
            setTimeout(()=>abortController.abort(),10)
           })

let r1=new Request('http://foo.com');
let r2=new Request(r1,{method:'POST'});
console.log(r1.method);//GET
console.log(r2.method);//POST
//这种克隆方式不能总得到一模一样的副本

let r=new Request('http://foo.com');
r.clone();
new Request(r);//没有错
r.text();//设置bodyUsed为true
r.clone();//TypeError

let r=new Request('http://127.0.0.1:3007/api/login');
       fetch(r,{
           method:'POST',
           body:serialize(form),
           headers:paramsHeaders
       }).then((res)=>{
           return res.json()
       },(err)=>{
           console.log(err)
       })

let r=new Request(...);
fetch(r.clone());
fetch(r.clone());
fetch(r);

var a=42;
var b="42";
a===b;//false;
a==b;//true

var a='42';
var b=true;
a==b;//false
//ToNumber()将b转为1，变成'42'==1,又把'42'转为42就出现不相等

var a='42';
//不要这样用，不成立
if(a==true)
if(a)
if(!!a)
if(Boolean(a))

var a=42;
var b=[42];
a==b;//true,变成42=='42'=>42==42
var a="abc";
var b=Object(a);
a===b;//false
a==b;//true,b通过ToPrimitive强制类型转换为"abc"
//没有对应封装对象，null和undefined不能被封装，下面返回false
var a==null;
var b=Object(a);
a==b;//false
var a=undefined;
var b=Object(a);
a==b;//false
var a=NAN;
var b=Object(a);
a==b;//false,因为NAN==NAN本身是false

Number(324) // 324

// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324

// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN

// 空字符串转为0
Number('') // 0

// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

// undefined：转成 NaN
Number(undefined) // NaN

// null：转成0
Number(null) // 0

// 对象：通常转换成NaN(除了只包含单个数值的数组)
Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

// 数值：转为相应的字符串
String(1) // "1"

//字符串：转换后还是原来的值
String("a") // "a"

//布尔值：true转为字符串"true"，false转为字符串"false"
String(true) // "true"

//undefined：转为字符串"undefined"
String(undefined) // "undefined"

//null：转为字符串"null"
String(null) // "null"

//对象
String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false
Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

0|=0//0
0|NAN;//0
0|Infinity;//0
0|-Infinity;//0

var a="Hello world";
~a.indexOf("lo");//-4
if(~a.indexOf("lo")){//true
    //找到匹配
    
}
~a.indexOf("ol");//0,假值
!~a.indexOf("ol");//true
if(!~a.indexOf("ol")){//true
    //没有找到匹配
}

1'5' - '2' // 3
2'5' * '2' // 10
3true - 1  // 0
4false - 1 // -1
5'1' - 1   // 0
6'5' * []    // 0
7false / '5' // 0
8'abc' - 1   // NaN
9null + 1 // 1
10undefined + 1 // NaN
null`转为数值时，值为`0` 。`undefined`转为数值时，值为`NaN

function foo(a,b){
    a=a||"hello";//检查变量a如果未赋值则赋值一个默认值hello
    b=b||"world";
    console.log(a+" "+b);

}

function foo(){

}
var a=42;
a&&foo();//foo()只有在条件判断a通过时才会调用foo();如果条件判断未通过，则a&&foo()就会终止

console.log(typeof Function.prototype)//function
console.log(typeof RegExp.prototype)//object
console.log(Function.prototype);//空函数
console.log(Array.prototype.length);//0,空数组
console.log(RegExp.prototype.toString())//"/?:/"空正则表达式

obj[Symbol.iterator]=function(){}

var mysym=Symbol("my on symbol")
console.log(mysym.toString())//Symbol(my on symbol)
console.log(typeof mysym);//symbol
var a={}
a[mysym]="foorbar"
console.log(Object.getOwnPropertySymbols(a));//通常用来命名私有或特殊属性，替代下划线(_)前缀的属性
//[Symbol(my on symbol)]