var mydiv = document.createElement('div');
for(var k in mydiv ){
  console.log(k)
}

var mydiv = document.createElement('div');
mydiv.className = 'a';
document.body.appendChild(mydiv);

//伪代码
var mydivVirtual = { 
  tagName: 'DIV',
  className: 'a'
};
var newmydivVirtual = {
   tagName: 'DIV',
   className: 'b'
}
if(mydivVirtual.tagName !== newmydivVirtual.tagName || mydivVirtual.className  !== newmydivVirtual.className){
   change(mydiv)
}

// 会执行相应的修改 mydiv.className = 'b';
//最后  <div class='b'></div>

<!-- 之前 -->
<div>           <!-- 层级1 -->
  <p>            <!-- 层级2 -->
    <b> aoy </b>   <!-- 层级3 -->   
    <span>diff</Span>
  </P> 
</div>

<!-- 之后 -->
<div>            <!-- 层级1 -->
  <p>             <!-- 层级2 -->
      <b> aoy </b>        <!-- 层级3 -->
  </p>
  <span>diff</Span>
</div>

function patch (oldVnode, vnode) {
	if (sameVnode(oldVnode, vnode)) {
		patchVnode(oldVnode, vnode)
	} else {
		const oEl = oldVnode.el
		let parentEle = api.parentNode(oEl)
		createEle(vnode)
		if (parentEle !== null) {
			api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
			api.removeChild(parentEle, oldVnode.el)
			oldVnode = null
		}
	}
	return vnode
}

// body下的 <div id="v" class="classA"><div> 对应的 oldVnode 就是

{
  el:  div  //对真实的节点的引用，本例中就是document.querySelector('#id.classA')
  tagName: 'DIV',   //节点的标签
  sel: 'div#v.classA'  //节点的选择器
  data: null,       // 一个存储节点属性的对象，对应节点的el[prop]属性，例如onclick , style
  children: [], //存储子节点的数组，每个子节点也是vnode结构
  text: null,    //如果是文本节点，对应文本节点的textContent，否则为null
}

if (sameVnode(oldVnode, vnode)) {
	patchVnode(oldVnode, vnode)
} 

function sameVnode(oldVnode, vnode){
	return vnode.key === oldVnode.key && vnode.sel === oldVnode.sel
}

else {
		const oEl = oldVnode.el
		let parentEle = api.parentNode(oEl)
		createEle(vnode)
		if (parentEle !== null) {
			api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
			api.removeChild(parentEle, oldVnode.el)
			oldVnode = null
		}
	}

return vnode

var oldVnode = patch (oldVnode, vnode)

patchVnode (oldVnode, vnode) {
    const el = vnode.el = oldVnode.el
    let i, oldCh = oldVnode.children, ch = vnode.children
    if (oldVnode === vnode) return
    if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
        api.setTextContent(el, vnode.text)
    }else {
        updateEle(el, vnode, oldVnode)
    	if (oldCh && ch && oldCh !== ch) {
	    	updateChildren(el, oldCh, ch)
	    }else if (ch){
	    	createEle(vnode) //create el's children dom
	    }else if (oldCh){
	    	api.removeChildren(el)
	    }
    }
}

updateChildren (parentElm, oldCh, newCh) {
    let oldStartIdx = 0, newStartIdx = 0
    let oldEndIdx = oldCh.length - 1
    let oldStartVnode = oldCh[0]
    let oldEndVnode = oldCh[oldEndIdx]
    let newEndIdx = newCh.length - 1
    let newStartVnode = newCh[0]
    let newEndVnode = newCh[newEndIdx]
    let oldKeyToIdx
    let idxInOld
    let elmToMove
    let before
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
            if (oldStartVnode == null) {   //对于vnode.key的比较，会把oldVnode = null
                oldStartVnode = oldCh[++oldStartIdx] 
            }else if (oldEndVnode == null) {
                oldEndVnode = oldCh[--oldEndIdx]
            }else if (newStartVnode == null) {
                newStartVnode = newCh[++newStartIdx]
            }else if (newEndVnode == null) {
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldStartVnode, newStartVnode)) {
                patchVnode(oldStartVnode, newStartVnode)
                oldStartVnode = oldCh[++oldStartIdx]
                newStartVnode = newCh[++newStartIdx]
            }else if (sameVnode(oldEndVnode, newEndVnode)) {
                patchVnode(oldEndVnode, newEndVnode)
                oldEndVnode = oldCh[--oldEndIdx]
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldStartVnode, newEndVnode)) {
                patchVnode(oldStartVnode, newEndVnode)
                api.insertBefore(parentElm, oldStartVnode.el, api.nextSibling(oldEndVnode.el))
                oldStartVnode = oldCh[++oldStartIdx]
                newEndVnode = newCh[--newEndIdx]
            }else if (sameVnode(oldEndVnode, newStartVnode)) {
                patchVnode(oldEndVnode, newStartVnode)
                api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el)
                oldEndVnode = oldCh[--oldEndIdx]
                newStartVnode = newCh[++newStartIdx]
            }else {
               // 使用key时的比较
                if (oldKeyToIdx === undefined) {
                    oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) // 有key生成index表
                }
                idxInOld = oldKeyToIdx[newStartVnode.key]
                if (!idxInOld) {
                    api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                    newStartVnode = newCh[++newStartIdx]
                }
                else {
                    elmToMove = oldCh[idxInOld]
                    if (elmToMove.sel !== newStartVnode.sel) {
                        api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el)
                    }else {
                        patchVnode(elmToMove, newStartVnode)
                        oldCh[idxInOld] = null
                        api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el)
                    }
                    newStartVnode = newCh[++newStartIdx]
                }
            }
        }
        if (oldStartIdx > oldEndIdx) {
            before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el
            addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx)
        }else if (newStartIdx > newEndIdx) {
            removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
        }
}

//初始化aoy实例，取得store
var aoy = Aoy.init();
var store = aoy.store;
var el = aoy.el;

//数据
var userData = [
	{name: 'c', age: 19, city: 'Beijin'},
	{name: 'a', age: 20, city: 'Xian'},
	{name: 'b', age: 12, city: 'Hangzhou'},
	{name: 'd', age: 30, city: 'Wuhan'}
];

//将数据添加进store
store.add('table',{
	userData: userData
});

//封装的节点函数，便于复用
function Table(childern){
	return el('table',childern);
}

function Tr(childern){
	return el('tr', childern);
}
function Th(txt){
	return el('td', txt);
}
function Td(txt){
	return el('td', txt);
}

//记录字段的排序
var sortStore = Object.create(null);

//创建组件
var mytable = aoy.createComponent({
	el: document.body,
	sortData: function(field,e){  //字段的排序函数
		let i;
		userData.sort(function(a, b){
			if(i = (sortStore[field] === 'down')){		
				if(a[field] < b[field]) return 1;
			}else{
				if(a[field] > b[field]) return 1;
			}
		});
		sortStore[field] = i?'up':'down';
		this.table.userData = userData;
	},
	render: function(){
		var trs = [
				el('tr',[
						 el('th',{onclick: this.sortData.bind(this, 'name') },'name'), 
						 el('th',{onclick: this.sortData.bind(this, 'age') },'age'), 
						 el('th',{onclick: this.sortData.bind(this, 'city') },'city')
						]
					)
				];
		this.table.userData.forEach(function(v, i){
				var tdName = Td(v.name);
				var tdAge = Td(v.age);
				var tdCity = Td(v.city);
				var tr = Tr([tdName, tdAge, tdCity]);
				trs.push(tr);
			});	
		var table = Table(trs);
		return table;
	}
});
// 连接组件与数据，同时渲染进文档
aoy.connect(mytable,'table');

var userData = [
	{name: 'c', key: '3'},
	{name: 'a', key: '1'},
	{name: 'b', key: '2'},
	{name: 'd', key: '4'}
];
function Li (v) {
   return el('li',{ key :  v.key}, v.name);
}
var list = [];
userData.forEach(function ( v ){
  list.push( Li(v) );
})
function render () {
  return el('ul',[ list ]);
}

var myinput = aoy.createComponent({
	el: document.body,
	inputFn: function(){
		console(this)      //input
	},
	render: function(){
		return el('Input', {oninput: this.inputFn,type: 'text' });
	}
});
var myinputComponent= aoy.createComponent({
	el: document.body,
	inputFn: function(){
		console(this)      //myinputComponent
	},
	render: function(){
		return el('Input', {oninput: this.inputFn.bind(this),type: 'text' });
	}
});

var aoy = Aoy.init()
var store = aoy.store
store.add('a' , {b: {text: 'this is p' }})
var myP = aoy.createComponent({
	el: document.body,
	render: function(){
		return el('p',this.a.b.text);
	}
});
aoy.connect(myP, 'a')
aoy.store.get('a').b.text = 'new'  //视图不会改变
aoy.store.get('a').b ={text: 'new'} //视图更新

//伪代码
var img = new Image();
img.src = 'xxx.jpg';
var myCanvas = document.querySelector(canvasId);
var canvasCtx = myCanvas.getContext("2d");
canvasCtx.drawImage(img, 0, 0, img.width, img.height);
//图片的像素数据
var data = canvasCtx.getImageData(0, 0, img.width, img.height);

//伪代码
for(var Pixel in Image){
  var Red = Image[Pixel].Red
  var Green = Image[Pixel].Green
  var Blue = Image[Pixel].Blue

  var Gray = (Red + Green + Blue) / 3

  Image[Pixel].Red = Gray
  Image[Pixel].Green = Gray
  Image[Pixel].Blue = Gray
}

 Gray = (Red + Green + Blue) / 3

Gray = (Red * 0.3 + Green * 0.59 + Blue * 0.11)

Gray = (Red * 0.2126 + Green * 0.7152 + Blue * 0.0722)

Gray = (Red * 0.299 + Green * 0.587 + Blue * 0.114)

Gray = ( Math.max(Red, Green, Blue) + Math.min(Red, Green, Blue) ) / 2

Gray = Math.max(Red, Green, Blue)

Gray = Math.min(Red, Green, Blue)

Gray = Red

Gray = Green

Gray = Blue

ConversionFactor = 255 / (NumberOfShades - 1)
AverageValue = (Red + Green + Blue) / 3
Gray = Math.round((AverageValue / ConversionFactor) + 0.5) * ConversionFactor

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
	typeof define === 'function' && define.amd ? define(['exports'], factory) :
	(factory((global)));
}(this, (function (exports) { 
'use strict';

})));

var state = Object.create(null);

function iceSkating(){
  this.store = { 
     ...
  };
}

function iceSkating(option){
	if (!(this instanceof iceSkating)) return new iceSkating(option);
}
iceSkating.prototype = { 
}

iceSkating.prototype = {
	support: {
		touch: (function(){
			return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
		})()
	}

var events = ic.support.touch ? ['touchstart', 'touchmove', 'touchend']:['mousedown','mousemove','mouseup'];

var touchStart = function(e){};
var touchMove = function(e){};
var touchEnd = function(e){};

var ic = this;
var initEvent = function(){
    var events = ic.support.touch ? ['touchstart', 'touchmove', 'touchend']:  ['mousedown','mousemove','mouseup'];
    var transitionEndEvents = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd',   'MSTransitionEnd', 'msTransitionEnd'];
    for (var i = 0; i < transitionEndEvents.length; i++) {
            ic.addEvent(container, transitionEndEvents[i], transitionDurationEndFn, false);
     } 
    ic.addEvent(container, events[0], touchStart, false);
    //默认阻止容器元素的click事件,将其绑定在捕获阶段。
    if(ic.store.preventClicks) ic.addEvent(container, 'click', ic.preventClicks, true);
    if(!isInit){
	ic.addEvent(document, events[1], touchMove, false);
	ic.addEvent(document, events[2], touchEnd, false);
	isInit = true;
	}
};

var touchStart = function(e){
    //mouse事件会提供which值， e.which为3时表示按下鼠标右键，鼠标右键会触发mouseup，但右键不允许移动滑块
     if (!ic.support.touch && 'which' in e && e.which === 3) return;
    //获取起始坐标。TouchEvent使用e.targetTouches[0].pageX，MouseEvent使用e.pageX。
	state.startX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
        state.startY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
	//时间戳
       state.startTime = e.timeStamp;
       //绑定事件的元素
	state.currentTarget = e.currentTarget;
	state.id = e.currentTarget.id;
        //触发事件的元素
	state.target = e.target;
	//获取当前滑块的参数信息
        state.currStore = mainStore[e.currentTarget.id];
       //state的touchStart 、touchMove、touchEnd代表是否进入该函数
	state.touchEnd = state.touchMove = false;
	state.touchStart = true;
       //表示滑块移动的距离
	state.diffX = state.diffY = 0;
       //动画运行时的坐标与动画运行前的坐标差值
	state.animatingX = state.animatingY = 0;
};

var getTranslate = function(el){
	var curStyle = window.getComputedStyle(el);
	var curTransform = curStyle.transform || curStyle.webkitTransform;
	var x,y; x = y = 0;
	curTransform = curTransform.split(', ');
	if (curTransform.length === 6) {
		x = parseInt(curTransform[4], 10);
		y = parseInt(curTransform[5], 10);
	}
       return {'x': x,'y': y};
};

var touchMove = function(e){
   // 1. 如果当前触发touchMove的元素和触发touchStart的元素不一致，不允许滑动。
   // 2. 执行touchMove时，需保证touchStart已执行，且touchEnd未执行。
   if(e.target !== state.target || state.touchEnd || !state.touchStart) return;
  state.touchMove = true;
  //取得当前坐标
  var currentX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
   var currentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
   var currStore = state.currStore;
   //触摸时如果动画正在运行
    if(currStore.animating){
       // 取得当前元素translate的信息
        var animationTranslate = getTranslate(state.currentTarget);
        //计算动画的偏移量，currStore.translateX和currStore.translateY表示的是滑块最近一次稳定时的translate值
        state.animatingX = animationTranslate.x - currStore.translateX;
        state.animatingY = animationTranslate.y - currStore.translateY;
        currStore.animating = false;
        //移除动画时间
        removeTransitionDuration(currStore.container);
     }
      //如果轮播进行中，将定时器清除
       if(currStore.autoPlayID !== null){
        	clearTimeout(currStore.autoPlayID);
        	currStore.autoPlayID = null;
        }
        //判断移动方向是水平还是垂直
	if(currStore.direction === 'x'){
                //currStore.touchRatio是移动系数
		state.diffX = Math.round((currentX - state.startX) * currStore.touchRatio);
                //移动元素
		translate(currStore.container, state.animatingX + state.diffX +       state.currStore.translateX, 0, 0);
        }else{
        	state.diffY = Math.round((currentY - state.startY) * state.currStore.touchRatio);
        	translate(currStore.container, 0, state.animatingY + state.diffY + state.currStore.translateY, 0);
        }
	};

	var translate = function(ele, x, y, z){
		if (ic.support.transforms3d){
			transform(ele, 'translate3d(' + x + 'px, ' + y + 'px, ' + z + 'px)');
		} else {
			transform(ele, 'translate(' + x + 'px, ' + y + 'px)');
		}
	};

var touchEnd = function(e){
	state.touchEnd = true;
	if(!state.touchStart) return;
	var fastClick ;
	var currStore = state.currStore;
        //如果整个触摸过程时间小于fastClickTime，会认为此次操作是点击。但默认是屏蔽了容器的click事件的，所以提供一个clickCallback参数，会在点击操作时调用。
	if(fastClick = (e.timeStamp - state.startTime) < currStore.fastClickTime && !state.touchMove && typeof currStore.clickCallback === 'function'){
		currStore.clickCallback();
	}
	if(!state.touchMove) return;
        //如果移动距离没达到切换页的临界值，则让它恢复到最近的一次稳定状态
	if(fastClick || (Math.abs(state.diffX) < currStore.limitDisX && Math.abs(state.diffY) < currStore.limitDisY)){
        //在transitionend事件绑定的函数中判定是否重启轮播，但是如果transform前后两次的值一样时，不会触发transitionend事件，所以在这里判定是否重启轮播
        if(state.diffX === 0 && state.diffY === 0 && currStore.autoPlay) autoPlay(currStore);
	   //恢复到最近的一次稳定状态
            recover(currStore, currStore.translateX, currStore.translateY, 0);
	}else{
                //位移满足切换
		if(state.diffX > 0 || state.diffY > 0) {
                       //切换到上一个滑块
			moveTo(currStore, currStore.index - 1);
		}else{
                        //切换到下一个滑块
			moveTo(currStore, currStore.index + 1);
		}	
	}
};

var transitionDurationEndFn = function(){
       //将动画状态设置为false
	ic.store.animating = false;
       //执行自定义的iceEndCallBack函数
	if(typeof ic.store.iceEndCallBack === 'function')  ic.store.iceEndCallBack();
	//将动画时间归零
        transitionDuration(container, 0);
        //清空state
	if(ic.store.id === state.id) state = Object.create(null);
};

//动画结束执行的函数：
var transitionDurationEndFn = function(){
      ...
      //检测是否开启轮播
      if(ic.store.autoPlay) autoPlay(ic.store);
};

var autoPlay = function(store){
       store.autoPlayID = setTimeout(function(){
                //当前滑块的索引
		var index = store.index;
		++index;
                //到最后一个了，重置为0
		if(index === store.childLength){
	              index = 0;
	        }
                //移动
		moveTo(store, index);
		},store.autoplayDelay);		
};

console.log('start')

setTimeout( function () {
  console.log('setTimeout')
}, 0 )

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('end')

// start
// end
// promise1
// promise2
// setTimeout

function flush() {
...
}
function useMutationObserver() {
  var iterations = 0;
  var observer = new MutationObserver(flush);
  var node = document.createTextNode('');
  observer.observe(node, { characterData: true });

  return function () {
    node.data = iterations = ++iterations % 2;
  };
}

function bar() {
console.log('bar');
}

function foo() {
console.log('foo');
bar();
}

foo();

Promise.resolve().then(function promise1 () {
       console.log('promise1');
    })
setTimeout(function setTimeout1 (){
    console.log('setTimeout1')
    Promise.resolve().then(function  promise2 () {
       console.log('promise2');
    })
}, 0)

setTimeout(function setTimeout2 (){
   console.log('setTimeout2')
}, 0)

setTimeout(function setTimeout1(){
        console.log('setTimeout1')
}, 0)
var channel = new MessageChannel();
channel.port1.onmessage = function onmessage1 (){
    console.log('postMessage')
    Promise.resolve().then(function promise1 (){
        console.log('promise1')
    })
};
channel.port2.postMessage(0);
setTimeout(function setTimeout2(){
        console.log('setTimeout2')
}, 0)
  console.log('sync')
}

sync
postMessage
promise1
setTimeout1
setTimeout2

function bar (num, id) {
  var  product  = num  * num;
  var resultEle = document.getElementById( id );
  resultEle.textContent = product;
}

...
bar( 2, 'result' )
...
bar( 4, 'result' )
...
bar( 5, 'result' )
...

var store = {}, flag = false;
function bar (num, id) {
  store[ id ] = num;
  if(!flag){
    Promise.resolve().then(function () {
       for( var k in store ){
           var num = store[k];
            var product  = num  * num;
            var resultEle = document.getElementById( k );
            resultEle.textContent = product;
       }
    });
    flag = true;
  }
}

//生成task
var myTask = asyncHelper.task(function () {
    console.log('this is task')
});
//生成microtask
var myMicrotask = asyncHelper.mtask(function () {
    console.log('this is microtask')
});

//插入task
myTask()
//插入microtask
myMicrotask();

var store = {};
//生成一个microtask
var foo = asyncHelper.mtask(function () {
        for( var k in store ){
            var num = store[k];
            var product  = num  * num;
            var resultEle = document.getElementById( k );
            resultEle.textContent = product;
       }
}, {callMode: 'last'});

function bar (num, id) {
  store[ id ] = num;
  foo();
}