;(function(window) {
    //这里写你所有的内容
}(window));

;(function(window){
    var obj = {},
                toStr = obj.toString,
                hasOwnProp = obj.hasOwnProperty,
                arr = [],
                slice = arr.slice,
                push = arr.push;

            var isObject = function(obj) {
                    return obj == null ? obj.toString() : toStr.call(obj) === '[object Object]';
                },
                isArray = Array.isArray || function(obj) {
                    return toStr.call(obj) === '[object Array]';
                },
                isFunction = function(obj) {
                    return typeof obj === 'function';
                },
                isString = function(obj) {
                    return typeof obj === 'string';
                },
                isBoolean = function(obj) {
                    return typeof obj === 'boolean';
                },
                inArray = function(arr, item) {
                    return arr.indexOf(item) !== -1;
                };

}(window));

    function each(obj, callback) {
                //如果既不是对象也不是数组，不迭代，直接返回
                if (!isObject(obj) && !isArray(obj)) {
                    return obj;
                }
                var len = obj.length;
                //要求obj.length类型为数字且不小于0
                //符合该条件就当做数组来迭代
                if (typeof len === 'number' && len >= 0) {
                    //如果有用户滥用length属性，导致错误是其活该
                    for (var i = 0; i < len; i += 1) {
                        //callback函数的this值为数组中的每一项
                        if (callback.call(obj[i], i, obj[i]) === false) {
                            //如果callback函数的返回值等价于false
                            //终止迭代
                            break;
                        }
                    }
                } else {
                    //程序运行到这一步，说明该迭代的Obj类型为object
                    for (var prop in obj) {
                        if (hasOwnProp.call(obj, prop)) {
                            if (callback.call(obj[prop], prop, obj[prop]) === false) {
                                break;
                            }
                        }
                    }
                }
                //返回被迭代的数组或对象
                return obj;
            }
            //好用的函数，输出为静态方法
            jQuery.each = each;

    function extend(target) {
                //将除target之外的所有参数保存为sources
                var sources = slice.call(arguments, 1);
                //迭代器each派上了用场
                each(sources, function() {
                    each(this, function(key, value) {
                         target[key] = value;
                    });
                });
                //返回被扩展的对象
                return target;
            }

             //好用的函数，输出为静态方法
             jQuery.extend = extend;

    function pushStack(target) {
                var len = target.length;

                if (typeof len !== 'number' || len < 0) {
                    //没有length属性，或者它小于0，直接返回target
                    return target;
                }

                //保存除target外的所有参数并转化为数组形式
                var sources = slice.call(arguments, 1);

                each(sources, function() {
                    //this值就是sources数组中的每一项
                    var len = this.length;

                    //同样判断是否为数组或类数组
                    if (typeof len !== 'number' || len < 0) {
                        return;
                    }

                    //之前保存的常用函数之一push，派上用场
                    //与apply结合，批量push进target中
                    push.apply(target, this);
                });
                return target;
            }

;(function(window){
    //请将这里当做对上面那块常用函数的折叠部分，下同

    function jQuery(selector, context) {
        return new jQuery.init(selector, context);
    }
}(window));

    //函数也是对象，也可以添加属性和方法
            jQuery.init = function(selector, context) {

                //定义length属性，成为类数组
                //可以用each迭代，用pushStack批量增加元素
                this.length = 0;

                if (selector && selector.nodeName) {
                    //如果第一个参数为dom节点
                    //保存为this[0]
                    this[0] = selector;
                    this.length = 1;
                } else if (isFunction(selector)) {
                    //如果第一个参数为函数，则为DOM ready 事件
                    return document.addEventListener('DOMContentLoaded', selector, false);
                } else {
                    //原生方法处理selector选择器，如果有context上下文，则以它为起点搜索，否则以document为始
                    //要求context必须是DOM，即便是jQuery的实例也不行，因为我们只是粗糙模拟
                    var items = (context && context.nodeName ? context : document).querySelectorAll(selector);

                    pushStack(this, items);
                }


            };

    //将jQuery的原型对象放到它的fn属性中
            jQuery.fn = jQuery.prototype;
            //本来这句与上句并做一起，为了便于理解，分拆开来
            //jQuery.init是函数，函数都有prototype原型对象
            //而且是可改变的，让它指向jQuery.prototype
            jQuery.init.prototype = jQuery.prototype;

            //设置一个jQuery的简写
            var $ = jQuery;

            //添加extend方法给jQuery的原型
            //专门用来拓展它自己
            $.fn.extend = function() {
                return extend.apply(window, [this].concat(slice.call(arguments)));
            };

        $.fn.extend({
            //each在这里很简单
            each: function(callback) {
                return each(this, callback);
            },
            //以下为搜索dom节点的操作
            find: function(selector) {
                //什么参数都不传，在这里返回空的jQ实例， 下同
                var ret = $();
                var nodes = [];
                //其实可以用each(this, callback)
                //但既然已经有$.fn.each，那就直接使用
                this.each(function() {
                    //注意：这里的this值，是上一个this值的项
                    //请看each函数的源码
                    var items = this.querySelectorAll(selector);

                    //搜索到的新元素先推入一个数组
                    //毕竟push为数组原生方法，比类数组更快
                    //items里有元素才推进去
                    items.length && push.apply(nodes, items);
                });
                //最后才推进新jQ实例
                return pushStack(ret, nodes);
            },
            eq: function(index) {
                index = index >= 0 ? index : index + this.length;
                return $(this[index]);
            },
            children: function(selector) {
                //返回新jQ实例
                var ret = $();
                var nodes = [];
                //如果有选择器参数，则新建一个jQuery专用的随机id
                var id = selector || 'jQuery' + Math.random().toString(36).substr(2);

                this.each(function() {
                    var items;
                    if (selector) {
                        //设置id，如果有就用其以前的id
                        this.id = this.id || id;
                        //构造选择器'#id>.target',选中所需元素
                        items = document.querySelectorAll(this.id + '>' + selector);
                        //拿到之后删除添加的随机id
                        if (this.id === id) {
                            this.removeAttribute('id');
                        }
                    } else {
                        //没选择器，直接获取children属性中的节点
                        items = this.children;
                    }

                    items.length && push.apply(nodes, items);
                });
                //推入栈
                return pushStack(ret, nodes);
            },
            first: function() {
                //新实例,下同
                var ret = $();
                var nodes = [];
                this.each(function() {
                    var item = this.firstElementChild;
                    //存在第一个非文本非注释的元素节点，才推进去
                    item && nodes.push(item);
                });
                //最后才全部压入栈,pushStack直接返回第一个参数，恰好是我们要返回的
                return pushStack(ret, nodes);
            },
            last: function() {
                var ret = $();
                var nodes = [];
                this.each(function() {
                    var item = this.lastElementChild;
                    item && nodes.push(item);
                });
                return pushStack(ret, nodes);
            },
            siblings: function(selector) {
                var ret = $();
                var nodes = [];
                //如果有选择器参数，则新建一个jQuery专用的随机id
                var id = selector || 'jQuery' + Math.random().toString(36).substr(2);
                this.each(function() {
                    //找到父节点
                    var parent = this.parentNode,
                        items;
                    if (selector) {
                        //设置id
                        parent.id = parent.id || id;
                        items = document.querySelectorAll(parent.id + '>' + selector);
                        //删除id
                        if (parent.id === id) {
                            parent.removeAttribute('id');
                        }
                        items.length && push.apply(nodes, items);
                    } else {
                        push.apply(nodes, parent.children);
                    }
                    //从数组中删除该节点，则余下全部兄弟节点
                    nodes.splice(nodes.indexOf(this), 1);
                });

                return pushStack(ret, nodes);
            },
            parent: function() {
                var ret = $();
                var nodes = [];

                this.each(function() {
                    var parent = this.parentNode;
                    parent && nodes.push(parent);
                });

                return pushStack(ret, nodes);
            },
            index: function() {
                var target = this[0];
                return slice.call(target.parentNode.children).indexOf(target);
            },
            append: function(node) {
                var len = this.length;
                this[0].appendChild(node);
                return this;
            },
            prepend: function(node) {
                var len = this.length;
                var first = this[0].firstElementChild;
                this[0].insertBefore(node, first);
                return this;
            }
        });

    $.fn.extend({
                css: function() {
                    //css方法既是getter又是setter，参数不定
                    //干脆不写形参，将实参转为数组形式
                    var args = slice.call(arguments);
                    var len = args.length;

                    //如果参数数量为1，且其为字符串
                    //就是 $(elem).css('color')
                    if (len === 1 && typeof args[0] === 'string') {
                        //get one
                        return getComputedStyle(this[0], null).getPropertyValue(args[0]);
                    } else if (len === 2) {
                        //形式为：$(elem).css('color', '#333');
                        //set all
                        return this.each(function() {
                            this.style[args[0]] = args[1];
                        });
                    }
                },
                addClass: function(classNames) {
                    //如果不是字符串参数，直接返回this
                    if (typeof classNames !== 'string') {
                        return this;
                    }
                    //去掉两端空白符后，返回数组形式
                    classNames = classNames.trim().split(' ');
                    return this.each(function() {
                        var classList = this.classList;
                        //再遍历一遍，添加所有class名
                        each(classNames, function(key, value) {
                            classList.add(value);
                        });
                    });
                },
                removeClass: function(classNames) {
                    //如果不是字符串参数，直接返回this
                    if (typeof classNames !== 'string') {
                        return this;
                    }
                    //去掉两端空白符后，返回数组形式
                    classNames = classNames.trim().split(' ');
                    return this.each(function() {
                        var classList = this.classList;
                        //再遍历一遍，删除所有class名
                        each(classNames, function(key, value) {
                            //与addClass只有一个差别
                            //许多可以合并函数来优化都没有做，只为直观
                            classList.remove(value);
                        });
                    });
                }
            });

    //动画组件要定义一些工具方法
            var nextTick = requestAnimationFrame || function(fn) {
                return setTimeout(fn, 1000 / 60);
            };

            function getStyle(elem, prop) {
                return parseFloat(getComputedStyle(elem, null).getPropertyValue(prop), 10);
            }

            function animate(elem, propObj, duration, callback) {
                var start = +new Date();
                var oldValue = {};
                var diff = {};
                var ratio;
                for (var prop in propObj) {
                    diff[prop] = propObj[prop] - (oldValue[prop] = getStyle(elem, prop));
                }


                function move() {
                    ratio = (+new Date() - start) / duration;
                    if (ratio < 1) {
                        each(diff, function(prop) {
                            elem.style[prop] = oldValue[prop] + this * ratio + 'px';
                        });
                        nextTick(move);
                    } else {
                        each(diff, function(prop) {
                            elem.style[prop] = propObj[prop] + 'px';
                        });
                        callback();
                    }
                }

                move();
            }

        function noop() {};

        $.fn.animate = function(propObj, duration, callback) {
            var self = this,
                len = self.length,
                count = 0;
            return self.each(function() {
                animate(this, propObj, duration || 400, typeof callback === 'function' ? function() {
                    ++count === len && callback.call(self);
                } : noop);
            });
        };

    window.jQuery = window.$ = jQuery;

//actions.js
//添加 item 只需要一个 text 字符串数据
export function addItem(text) {
    return {
        type: 'ADD_ITEM',
        text
    }
}
//删除 item 只需要拿到它的 id
export function deleteItem(id) {
    return {
        type: 'DELETE_ITEM',
        id
    }
}

//删除所有已完成事项，不需要额外数据，只需要线索，线索就是 type
export function clearCompleted() {
    return {
        type: 'CLEAR_COMPLETED'
    }
}

//reducer 接受两个参数，全局数据对象 state 以及 action 函数返回的 action 对象
//返回新的全局数据对象 new state
export default (state, action) => {
    switch (action.type) {
        case A:
        return handleA(state)
        case B:
        return handleB(state)
        case C:
        return handleC(state)
        default:
        return state //如果没有匹配上就直接返回原 state
    }
}

//这个 reducer 的 state 属性不是全局 state 本身
//而是它的一个子代属性，比如 state.todos 这个对象
//返回的 new state 也会合并到 state.todos 属性中
export default (state, action) => {
    switch (action.type) {...}
}

var reducers = {
    todos: (state, action) { //预期此处的 state 参数是全局 state.todos 属性
        switch (action.type) {...} //返回的 new state 更新到全局 state.todos 属性中
    },
    activeFilter: (state, action) { //预期拿到 state.activeFilter 作为此处的 state
        switch (action.type) {...} //new state 更新到全局 state.activeFilter 属性中
    }
}

//返回一个 rootReducer 函数
//在内部将 reducers.todos 函数的返回值，挂到 state.todos 中
//在内部将 reducers.activeFilter 函数的返回值，挂到 state.activeFilter 中
var rootReducer = combineReducers(reducers) 

//combination 函数是 combineReducers(reducers) 的返回值，它是真正的 rootReducer
//finalReducers 是 combineReducers(reducers) 的 reducers 对象去掉非函数属性的产物
 //mapValue 把 finalReducers 对象里的函数，映射到相同 key 值的新对象中
function combination(state = defaultState, action) {
    var finalState = mapValues(finalReducers, (reducer, key) => {
      var newState = reducer(state[key], action); //这里调用子 reducer 
      if (typeof newState === 'undefined') {
        throw new Error(getErrorMessage(key, action));
      }
      return newState; //返回新的子 state
    });
    //...省略一些业务无关的代码
    return finalState; //返回新 state
 };

export default (state, action) => {
    switch (action.type) {
        case A:
        let subState = superGetter(state, 'a.b.c') //根据 path 深度获取属性值
        return superSetter(state, 'a.b.c', handleA(subState)) //根据 path 深度设置属性
        default:
        state
    }
}

var todosReducers = {
    active: (state, action) => { //拿到全局 state.todos.active
        switch (action.type) {
            case A: //处理 A 场景
            return handleA(state)
            case B: //处理 B 场景
            return handleB(state)
            default:
            return state
        }
    },
    completed: (state, action) => { //拿到全局 state.todos.completed
        switch (action.type) {
            case C: //处理 C 场景
            return handleC(state)
            default:
            return state
        }
    }
}

var todosRootReducer = combineReducers(todosReducers)

var reducers = {
    todos: (state, action) => { //拿到全局 state.todos
        switch (action.type) {
            case A:
            case B:
            case C:
            // A B C 场景都传递给 todosRootReducer
            return todosRootReducer(state, action)
            case D:
            //...handle state
            default:
            return state
        }
    }
}

//rootReducer(state, action) 这里的 state 是真正的全局 state
var rootReducer = combineReducers(reducers)

var rootReducers = combineReducers({
    a() {
        //TODO
    },
    b() {
        //TODO
    },
    c() {
        //TODO
    }
})

// newState 只有 a/b/c 三个属性，没有 d 属性，因为 reducers 对象只有 a/b/c
var newState = rootReducers({
    a:1,
    b:2,
    c:3,
    d: 4
}, {
    type: 'TEST'
})

//combineReducers 新增第二个参数 transformers
export default combineReducers(reducers, transformers) {
    //..一些预处理工作
    return function combination(state = defaultState, action) {
        var finalState = mapValues(finalReducers, (reducer, key) => {
            var transformer = transformers[action.type] //根据 action.type 来筛选
            var newState
            if (typeof transformer === 'function') {//如果有转换器
                //控制权交给转换器
                newState = transformer(state[key], action, reducer, key)
            } else {
                //否则采取默认模式
                newState = reducer(state[key], action);
            }
            if (typeof newState === 'undefined') {
                throw new Error(getErrorMessage(key, action));
            }
            return newState;
        });
        return finalState
    }
}

var transformers = {
    'ACTION_TYPE1': (state, action, reducer) => {
        return {
            ...state,
            newProp: reducer(state.prop, action) //更新到 newProp 属性中去
        }
    },
    'ACTION_TYPE2': (state, action, reducer) => {
        return {
            ...state,
            otherProp: reducer(state.otherProp, action) //更新到 otherProp 属性中去
        }
    }
}

var rootReducers = combineReducers(reducers, transformers)

//此处为示意，不是 redux 的源码本身
export default createStore(reducer, initialState) {
    //闭包私有变量 
    let currentState = initialState
    let currentReducer = reducer
    let listeners = []

    //返回一个包含可访问闭包变量的公有方法
    return {
        getState() {
            return currentState //返回当前 state
        },
        subscribe(listener) {
            let index = listeners.length
            listeners.push(listener) //缓存 listener
            return () => listeners.splice(i, 1) //返回删除该 listener 的函数
        },
        dispatch(action) {
            //更新 currentState
            currentState = currentReducer(currentState, action)
            listeners.slice().forEach(listener => listener())
            return action //返回 action 对象
        }
    }
}

//将 actionCreator 跟 dispatch 绑定在一起
let bindActionCreator => (actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args));
}

//普通工厂函数，返回一个对象
let addItem = text => ({
    type: 'ADD_ITEM',
    text
})

//跟 store.dispatch 绑定起来，成为真正可以改变 currentState 的 action 函数
let addItem = bindActionCreator(addItem, store.dispatch)

export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') { //如果是单个 actionCreator，绑定一词
    return bindActionCreator(actionCreators, dispatch);
  }
  //返回一个改造过的「函数组合」
  return mapValues(actionCreators, actionCreator =>
    bindActionCreator(actionCreator, dispatch)
  )

//ActionTypes.js 真正改动了数据的 actionType 在这里
export const ADD_ITEM = 'ADD_ITEM'
export const DELETE_ITEM = 'DELETE_ITEM'
export const DELETE_ITEMS = 'DELETE_ITEMS'
export const UPDATE_ITEM = 'UPDATE_ITEM'
export const UPDATE_ITEMS = 'UPDATE_ITEMS'

//API.js 服务端接口统一放这里
export const API_TODOS = '/todos'

//SocketTypes.js websocket 也触发了某个 action 改变了 state，单独放这里
export const SERVER_UPDATE = 'SERVER_UPDATE'

//KeyCode.js 键盘的回车键与取消键对应的编码
export const ENTER_KEY = 13
export const ESCAPE_KEY = 27

//FilterTypes.js 只是筛选数据，没有改变 state 的过滤 action 的常量
export const FILTER_ITEMS = 'FILTER_ITEMS'
export const SHOW_ALL = 'SHOW_ALL'
export const SHOW_ACTIVE = 'SHOW_ACTIVE'
export const SHOW_COMPLETED = 'SHOW_COMPLETED'

let state = {
    todos: [{
        id: 123,
        text: 'todo item',
        status: false
    }],
    activeFilter: SHOW_ALL
}

//index.js
import * as types from '../constants/ActionTypes'

export function addItem(text) {
    return { type: types.ADD_ITEM, text }
}

export function deleteItem(id) {
    return { type: types.DELETE_ITEM, id }
}

export function updateItem(data) {
    return { type: types.UPDATE_ITEM, data }
}

export function deleteItems(query) {
    return { type: types.DELETE_ITEMS, query }
}

export function updateItems(data) {
    return { type: types.UPDATE_ITEMS, data }
}

//todos.js
import { ADD_ITEM, DELETE_ITEM, UPDATE_ITEM, DELETE_ITEMS, UPDATE_ITEMS } from '../constants/ActionTypes'
import { SERVER_UPDATE } from '../constants/SocketTypes'

export default (state = [], action) => {
    switch (action.type) {
        case ADD_ITEM: //添加 item，放在数组第一个位置
            return [createItem(action.text), ...state]
        case DELETE_ITEM: //删除 item 就是根据 id 过滤掉
            return state.filter(item => item.id !== action.id)
        case UPDATE_ITEM: //更新item 由 updateItem helper 函数执行
            return updateItem(action.data, state)
        case UPDATE_ITEMS: //更新所有 item，就是每个就合并 action.data
            return state.map(item => Object.assign({}, item, action.data))
        case DELETE_ITEMS: //删除 item，过滤掉符合 action.query 对象描述的 item
            return filterItems(action.query, state)
        case SERVER_UPDATE: //服务端推送 action，整个替换掉 todos
            return action.state.todos
        default: //其他没匹配到的 action，返回原 state
            return state
    }
}

//filter.js
import { FILTER_ITEMS, SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED } from '../constants/FilterTypes'

let hashToFilter = {
    '#/': SHOW_ALL,
    '#/active': SHOW_ACTIVE,
    '#/completed': SHOW_COMPLETED
}

export default (state = SHOW_ALL, action) => {
    switch (action.type) {
        case FILTER_ITEMS: //单纯的模式匹配，默认显示 SHOW_ALL
        return hashToFilter[action.active] || SHOW_ALL
        default:
        return state
    }
}

// reducers/index.js
import { combineReducers } from 'redux'
import list from './list'
import filter from './filter'
//只需要用到一级分解，真是万幸呢
export default combineReducers({
    todos: list,
    activeFilter: filter
})

// ./store/index.js
import { createStore } from 'redux'
import rootReducers from '../reducers'
export default initialState => {
    return createStore(rootReducers, initialState)
}

let dispatchToProps = dispatch => bindActionCreators(actions, dispatch)
//分发给 component，让它从上到下不断分发 action
<View {...dispatchToProps(store.dispatch)} {...props} /> 

//app.js
let store = createStore(reducers, initialState)
let actions = bindActionCreators(actionCreators, store.dispatch)
let render = () => {
    React.render(
        <Root {...store.getState()} {...actions} >, //传 action，传 state 数据
        document.getElementById('container')
    )
}

store.subscribe(render) //当 state 变化时，重新渲染

//我们可以这样：
cosnole.log(state, action) //调用之前
state = reducer(state, action)
cosnole.log(state, action) //调用之后

//虽然现在我们可以这样代替，但这里 action 是我们构造的
//dom 事件里触发的 action，被隐藏得很深，也无法从 store.subscribe 里侦听到，它不传参数
cosnole.log(store.getState(), action) //调用之前
store.dipatch(action)
cosnole.log(store.getState(), action) //调用之后

export default function applyMiddleware(...middlewares) {
  return createStore => (reducer, initialState) => {
    var store = createStore(reducer, initialState);
    var dispatch = store.dispatch; //拿到真正的 dispatch
    //将最重要的两个方法 getState/dispatch 整合出来
    var middlewareAPI = {
      getState: store.getState,
      dispatch: action => dispatch(action)
    };
    //依次传递给 middleware，让它们有控制权
    var chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain, dispatch); // 再组合出新的 dispatch

    //返回新的 store 对象，其 dispatch 方法已经被传递了很多层
    //每一层都可以调用 dispatch，也可以调用 next 让下一层考虑调用 dipatch
    //最后一个 next 就是 store.dispatch 本身。
    return {
      ...store,
      dispatch
    };
  };
}

//redux-thunk
export default function thunkMiddleware({ dispatch, getState }) {
  return next => action =>
    typeof action === 'function' ? // action 居然是函数而不是 plain object？
      action(dispatch, getState) : //在中间件里消化掉，让该函数控制 dispatch 时机
      next(action); //否则调用 next 让其他中间件处理其他类型的 action
}

//server side
let store = createStore(rootReducers, { todos: [] })

store.getComponent = () => {
    let props = stateToProps(store.getState())
    let actions = dispatchToProps(() => {}) //构造空函数给 actions，反正没有 dom 事件
    return React.renderToString(<View {...props} {...actions} />)
}

//store
import { createStore } from 'redux'
import rootReducers from '../public/js/src/index/reducers'
let store = createStore(rootReducers, { todos: [] })
export default store

//router
router.post('/todos', (req, res) => {
    store.dispatch(req.body) //直接 dispatch action 更新 state
    res.json(Object.assign({}, ok, {
        data: req.body
    }))
})

// ./bin/www
let server = require('http').createServer(app);
let io = socketIO(server)
store.subscribe(() => io.emit('change', store.getState())) //服务端推送

// ./index.js
//浏览器端响应一个 dispatch
io().on('change', state => store.dispatch({
    type: SERVER_UPDATE,
    state
}))

// .//reducers/list.js
export default (state = [], action) => {
    switch (action.type) {
        //...other case
        case SERVER_UPDATE:
        return action.state.todos //将整个 todos 数据跟服务端同步起来
        default:
        return state
    }
}

// ./middleware/restful.js
import { API_TODOS } from '../constants/API'
import * as ActionTypes from '../constants/ActionTypes'

export default store => next => action => {
    if (action.type in ActionTypes) { //用中间件模式，筛选有修改数据作用的 action
        fetch(API_TODOS, {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(action) //打包发送到服务端
        })
    }
    //对 action 什么都不做，让浏览器端 action 继续传递
    return next(action) //可以不用等待服务端就更新视图
}

function Controller(View, Model) {
    this.View = View
    this.Model = Model
}

Controller.prototype = {
    init: function() {
        //初始化
    },
    listen: function() {
        //事件绑定
    }
}

//view.js
app.View = {
        TodoList: TodoList,
        TodoElem: TodoElem,
        Counter: Counter,
        Footer: Footer,
        ToogleAll: ToogleAll,
        Filters: Filters
    }

//model.js

    function Model(name) {
        this.name = name
        this.todos = localStorage.getItem(name)
        if (this.todos) {
            this.todos = JSON.parse(this.todos)
        } else {
            this.todos = []
        }
    }

    Model.prototype = {
        getTodo: function(id) {
            //根据id获取todo项
        },
        getAll: function() {
            //获取所有todo项
        },
        getActive: function() {
            //获取未完成的todo项
        },
        getCompleted: function() {
            //获取已完成的todo项
        },
        addTodo: function(todo) {
            //添加新的todo项
        },
        removeTodo: function(id) {
            //根据id删除todo项
        },
        save: function() {
            //保存数据
        }
    }

//controller.js

    function Controller(View, Model) {
        this.View = View
        this.Model = Model
    }

    Controller.prototype.init = function() {
        //初始化
    }

    Controller.prototype.listen = function() {

        //绑定事件代理
        //每个事件中，涉及渲染的用View提供的方法，涉及数据的用Model提供的方法

        tools.$listen('change', '#new-todo', function() {
            //输入框的change事件中，添加新todo项
        })

        tools.$listen('keyup', '#new-todo', function(e) {
            if (e.keyCode === ENTER_KEY) {
                //输入框聚焦时，按回车键也添加新todo项
            }
        })

        tools.$listen('dblclick', '#todo-list label', function() {
            //todo-list里双击进行内容编辑
        })

        tools.$listen('change', '#todo-list .edit', function() {
            //内容编辑框的change事件，标志完成编辑
        })

        tools.$listen('keyup', '#todo-list .edit', function(e) {
            var keyCode = e.keyCode

            if (keyCode === ESCAPE_KEY || keyCode === ENTER_KEY) {
                //内容编辑框按回车键，或者ESC退出键，标志完成编辑
            }
        })

        tools.$listen('change', '#todo-list .toggle', function() {
            //todo-list每一项提供的checkbox，其change事件中切换[未完成-已完成]状态
        })

        tools.$listen('change', '#toggle-all', function() {
            //该checlbox的切换所有todo项的状态
        })

        tools.$listen('click', '#todo-list .destroy', function() {
            //每个todo项的视图中，提供删除按钮，其click事件触发删除
        })

        tools.$listen('click', '#clear-completed', function() {
            //一个按钮，其click事件触发时，清除所有已完成的todo项
        })

        //dom ready时更新页面数据
        document.addEventListener('DOMContentLoaded', this.update.bind(this), false)
        //hashchange时，更新页面数据
        window.addEventListener('hashchange', this.update.bind(this), false)
        //页面关闭时，保存数据到localStorage
        window.addEventListener('beforeunload', this.model.save.bind(this.model), false)
    }

    Controller.prototype.otherMethod = function() {
        //其它方法，用于封装可复用的model与view的交互方式
    }

//app.js
app.todos = new app.Controller(app.View, app.Model).init()

//component/todo.js
export default data => {
    let { completed, time, id, title } = data
    return `
<li class="${ completed }" data-id="${ id }" data-helper="todo" title="${ time }">
    <div class="view">
        <input class="toggle" type="checkbox" ${ completed ? 'checked' : '' }>
                <label>${ title }</label>
                <button class="destroy"></button>
    </div>
    <input class="edit">
</li>
    `
}

import todo from 'component/todo'

export default data => {
    return `
<ul id="todo-list">
    ${ data.map(todo).join('') //纯 js 循环语句 }
</ul>
    `
}

//type helper
export let isArray = function() {
    return Array.isArray(this)
}

export let isFunction = function() {
    return Object.prototype.toString.call(this) === '[object Function]'
}

export let isObject = function() {
    return Object.prototype.toString.call(this) === '[object Object]'
}

export let isString = function() {
    return Object.prototype.toString.call(this) === '[object String]'
}

export let isNumber = function() {
    return Object.prototype.toString.call(this) === '[object Number]'
}

export let isBoolean = function() {
    return Object.prototype.toString.call(this) === '[object Boolean]'
}

import { isArray, isFunction, isString, isObject } from 'helper'

'hello world'::isString() //true
[1, 2, 3, 4]::isObject() // false
(123123)::isNumber() // true

//jqueryHelper.js
import $ from 'jquery'
import { isString } from './helper'

let helper = {}
export default helper

Object.keys($.fn).forEach(key => {
    helper[key] = function(...args) {
        if (this::isString()) {
            return $(String(this))[key](...args)
        }
        return $(this)[key](...args)
    }
})

import { appendTo, attr } from 'jqueryHelper'

//这个做法过时了
$('body').html('<h1>hello world</h1>')

//酷酷的
'<h1>hello world</h1>'::appendTo('body')

//原生dom api 冗长啰嗦
document.getElementsByTagName('script')[0].getAttrubite('type')

//酷酷的
'script'::attr('type')

//柯里化
export let currying = function(first) {
    return (...args) => {
        this(first, ...args)
    }
}

//反柯里化
export let uncurrying = function() {
    return (context, ...args) => {
        this.apply(context, ...args)
    }
}

//管道流式拼接
export let pipe = function(next = noop) {
    if (this::isFunction()) {
        return (...args) => {
            return next(this(...args))
        }
    } else if (this::isArray()) {
        return this.reduce((prev, cur) => prev::pipe(cur))
    }

}

//promise 流式拼接
export let then = function(next) {
    if (this::isFunction) {
        return (...args) => {
            return Promise.resolve(this(...args)).then(next)
        }
    } else if (this::isArray()) {
        return this.reduce((prev, cur) => prev::then(cur))
    }
}

//直接将数据模型的反应函数与渲染函数绑定起来，数据发生改变，视图就做出反应
let onAction = [::this.model.onAction, ::this.render]::pipe()

//::this.model.onAction === this.model.onAction.bind(this.model)

//事件代理，事件类型与代理 selectory 存放在 key 里，事件回调存放在 value 里
let events = {
            'change : #new-todo'(e) {
                //onAdd 为 helper，this 值为 e.target，从中获取到新的 todo title
                //onAdd 返回 {type: 'add',title: value }
                //onAction 接受一个 action 对象，根据 action 的 type 做不同反应
                //类似于 reactjs 的 flux 模式
                e.target::onAdd::pipe(onAction)()

                //e.target::onAdd === onAdd.bind(e.target)
            },
            'change : #todo-list .edit'(e) {
                //事件绑定变得干净
                e.target::onEdited::pipe(onAction)()
            },
            'keyup : #new-todo'(e) {
                if (e.keyCode === ENTER_KEY) {
                    //可维护性强，增加业务逻辑，只是 pipe 多一个 helper 纯函数
                    e.target::onAdd::pipe(onAction)()
                }
            },
            'dblclick : #todo-list label'(e) {
                e.target::onEditing()
            },
            'keyup : #todo-list .edit'(e) {
                let keyCode = e.keyCode
                if (keyCode === ENTER_KEY || keyCode === ESCAPE_KEY) {
                    e.target::onEdited()
                }
            },
            'change : #todo-list .toggle'(e) {
                e.target::onToggle::pipe(onAction)()
            },
            'click : #todo-list .destroy'(e) {
                e.target::onRemove::pipe(onAction)()
            },
            'click : #clear-completed'(e) {
                onAction({
                    type: 'clear'
                })
            },
            'change : #toggle-all'(e) {
                onAction({
                    type: 'toggleAll',
                    completed: e.target.checked
                })
            }
        }

var regexp1 = new RegExp('hello regular expression')
var regexp2 = /hello regular expression/

// test 方法，测试给定的字符串是否符合正则表达式所描述的字符串格式
regexp1.test('hello regular expression') // -> true
regexp1.test('hello word') // -> false

// exec 方法，是 execute 这个单词的缩写，「执行」。返回给定的字符串中符合「正则表达式所描述的字符串格式」的部分
regexp2.exec('hello regular expression') //  返回 'hello regular expression'
regexp2.exec('hello regular expression, more words') //  只返回 'hello regular expression'，其它部分不匹配

var person = new Object()
person.firstName = 'Jade'
person.lastName = 'Gu'
person.name = 'Jade Gu'

var person = {
    firstName: 'Jade',
    lastName: 'Gu',
    name: 'Jade Gu'
}

var person = {
    firstName: 'Jade',
    lastName: 'Gu'
}

Object.defineProperty(person, 'name', {
    get: function() {
        return [this.firstName, this.lastName].join(' ')
    }
})

person.name // Jade Gu

var person = {
    firstName: 'Jade',
    lastName: 'Gu',
    get name() {
        return [this.firstName, this.lastName].join(' ')
    }
}

'use strict';

var person = Object.defineProperties({
    firstName: 'Jade',
    lastName: 'Gu'
}, {
    name: {
        get: function get() {
            return [this.firstName, this.lastName].join(' ');
        },
        configurable: true,
        enumerable: true
    }
});

function createPerson(firstName, lastName) {
    return {
        firstName: firstName,
        lastName: lastName,
        get name() {
            return [this.firstName, this.lastName].join(' ')
        }
    }
}

var person1 = createPerson('Jade', 'Gu')
var person2 = createPerson('Hehe', 'Da')

function Person(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
}

Object.defineProperty(Person.prototype, 'name', {
    get: function() {
        return [this.firstName, this.lastName].join(' ')
    }   
})

var person1 = new Person('Jade', 'Gu')
var person2 = new Person('Hehe', 'Da')
person1.name // "Jade Gu"
person2.name // "Hehe Da"

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName
        this.lastName = lastName
    }
    get name() {
        return `${this.firstName} ${this.lastName}`
    }
}
const person1 = new Person('Jade', 'Gu')
const person2 = new Person('Hehe', 'Da')

function readonly(target, name, descriptor) {
    return {
        get: descriptor.value
    }
}

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName
        this.lastName = lastName
    }
    @readonly
    name() {
        return `${this.firstName} ${this.lastName}`
    }
}
const person1 = new Person('Jade', 'Gu')
const person2 = new Person('Hehe', 'Da')

function grandpa() {
    var grandpa_money = 1000000

    function father() {
        var father_money = 500000

        function me() {
            var my_money = 300000

            function child() {
                var child_money = 100000

                function grandson() {
                    var grandson_money = 100
                    grandson_money += child_money
                    grandson_money += my_money
                    grandson_money += father_money
                    grandson_money += grandpa_money
                    child_money = my_money = father_money = grandpa_money = 0
                    child = me = father = grandpa = null
                    console.log(grandson_money)
                    console.log(child_money, my_money, father_money, grandpa_money)
                    console.log(child, me, father, grandpa)
                }
                grandson()
            }
            child()
        }
        me()

    }
    father()
}
grandpa()

var Ancestors = {
    '人的成长': '生老病死',
    '地球位置': '世界中心',
    '地球形状': '天圆地方',
    '人类起源': '上帝造人'
}
var SomeoneA = Object.create(Ancestors)

Object.assign(SomeoneA, {
    '地球位置': '太阳系中心',
    '地球形状': '地球是圆的',
    '人类起源': '物种演化'
})

var SomeoneB = Object.create(SomeoneA)

Object.assign(SomeoneB, {
    '地球位置': 'https://zh.wikipedia.org/wiki/%E5%9C%B0%E7%90%83%E5%9C%A8%E5%AE%87%E5%AE%99%E4%B8%AD%E7%9A%84%E4%BD%8D%E7%BD%AE',
    '地球形状': 'https://www.google.com/search?q=%E5%9C%B0%E7%90%83%E5%BD%A2%E7%8A%B6&es_sm=122&tbm=isch&tbo=u&source=univ&sa=X&ved=0CB4QsARqFQoTCJv1iZvb4cYCFRIakgod5XAAyg&biw=1680&bih=912',
    '人类起源': '裸猿/走出非洲大草原'
})

//只会说呵呵哒的「人」
class H {
    constructor() {
        this.type = 'h'
    }
    say() {
        console.log('呵呵哒')
    }
}

class Hu extends H {
    constructor() {
            super()
            this.type = 'hu' //覆盖你
        },
        think() {
            return Math.random() > 0.5 ? '么么哒' : null
        }
    say() {
        //有想法说想法，没想法呵呵哒
        if (!this.think) {
            super.say()
        } else {
            console.log(this.mind)
        }
    }
}

class Hum extends Hu {
    constructor() {
        super()
        this.type = 'hum'
        this.memory = {}
    }
    remember(information) {
        this.memory[new Date().getTime()] = information
    }
    think(key) {
        return key ? this.memory[key] : super.think()
    }
}

class Human extends Hum {
    constructor() {
        super()
        this.type = 'human'
    }
    think(key) {
        var result = super.think(key)
        return result.includes('Miss Right') ? 'I Love You' : result
    }
}

function walkDom(node, callback) {
    if (node === null) { //判断node是否为null
        return
    }
    callback(node) //将node自身传入callback
    node = node.firstElementChild //改变node为其子元素节点
    while (node) {
        walkDom(node, callback) //如果存在子元素，则递归调用walkDom
        node = node.nextElementSibling //从头到尾遍历元素节点
    }
}
walkDom(document, function(node) {console.count()}) //包含document节点
document.querySelectorAll('*').length //数量比上面输出的少1，因为不包含document节点

function walkDom(node, callback) {
    if (node === null) {
        return
    }
    var stack = [node] //存入数组
    var target
    while(stack.length) { //数组长度不为0，继续循环
        target = stack.shift() //取出元素
        callback(target) //传入callback
        Array.prototype.push.apply(stack, target.children) //将其子元素一股脑推入stack，增加长度
    }
}
walkDom(document, function(node) {console.count()}) //包含document节点
document.querySelectorAll('*').length //数量比上面输出的少1，因为不包含document节点

var fs = require('fs')
var Path = require('path')

function readdirs(path) {
    var result = { //构造文件夹数据
        path: path,
        name: Path.basename(path),
        type: 'directory'
    }
    var files = fs.readdirSync(path) //拿到文件目录下的所有文件名
    result.children = files.map(function(file) {
        var subPath = Path.resolve(path, file) //拼接为绝对路径
        var stats = fs.statSync(subPath) //拿到文件信息对象
        if (stats.isDirectory()) { //判断是否为文件夹类型
            return readdirs(subPath) //递归读取文件夹
        }
        return { //构造文件数据
            path: subPath,
            name: file,
            type: 'file'
        }
    })
    return result //返回数据
}

var cwd = process.cwd()
var tree = readdirs(cwd)
fs.writeFileSync(Path.join(cwd, 'tree.json'), JSON.stringify(tree)) //保存在tree.json中，去查看吧

var fs = require('fs')
var Path = require('path')

function readdirs(path) {
    var result = { //构造文件夹数据
        path: path,
        name: Path.basename(path),
        type: 'directory'
    }
    var stack = [result] //生成一个栈数组
    while (stack.length) { //如果数组不为空，读取children
        var target = stack.pop() //取出文件夹对象
        var files = fs.readdirSync(target.path) //拿到文件名数组
        target.children = files.map(function(file) {
            var subPath = Path.resolve(target.path, file) //转化为绝对路径
            var stats = fs.statSync(subPath) //拿到文件信息对象
            var model = { //构造文件数据结构
                path: subPath,
                name: file,
                type: stats.isDirectory() ? 'directory' : 'file'
            }
            if (model.type === 'directory') {
                stack.push(model) //如果是文件夹，推入栈
            }
            return model //返回数据模型
        })
    }
    return result //返回整个数据结果
}

var cwd = process.cwd()
var tree = readdirs(cwd)
fs.writeFileSync(Path.join(cwd, 'tree.json'), JSON.stringify(tree)) //保存在tree.json中，去查看吧