耿直咸鱼

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import './index.css';
import App from './App';

ReactDOM.render((
    /*HashRouter监听着App这个组件的url的变化*/
    <HashRouter><App /></HashRouter>  
), document.getElementById('root'));

history.pushState(state, title, path);

history.replaceState()

window.addEventListener('popstate', function(e){
	/*监听改变*/
})

window.location.hash

window.addEventListener('hashchange', function(e) {
	/*监听改变*/ 
});

/* popstate 和 hashchangeevent用于监听路由变化的底层方法 */
const PopStateEvent = 'popstate';
const HashChangeEvent = 'hashchange';

/*这里简化了createBrowserHistory，列出了几个核心api极其作用*/
function createBrowserHistory() {
	/*全局history*/
	const globalHistory = window.history;
	/*处理路由转换，记录listens信息*/
	const transitionManager = createTransitionManage();
/*
---------------------------------------------------------------------------------------------------------------
	(1)setState: 统一每个transitionManager管理的listener路由状态已经更新
---------------------------------------------------------------------------------------------------------------
*/
	/*改变location对象，通知组件更新*/
	const setState = (nextState) => {
		/*合并信息*/
		Object.assign(history, nextState);
		history.length = globalHistory.length;
		/*通知每一个listens路由已经发生了变化*/
		transitionManager.notifyListeners(
			history.location,
			history.action,
		);
	};

/*
---------------------------------------------------------------------------------------------------------------
	(4)handlePopState: 判断action类型为pop然后setState，从而新加载组件
---------------------------------------------------------------------------------------------------------------
*/
	/*处理当path改变后，处理popstate变化的回调函数*/
	const handlePopState = (event) => {
		 /* 获取当前location对象 */
    		const location = getDOMLocation(event.state)
    		const action = 'POP'

    		transitionManager.confirmTransitionTo(location, action, getUserConfirmation, (ok) => {
        		if (ok) {
          			setState({ action, location })
        		} else {
          			revertPop(location)
        		}
    		})
	};

/*
---------------------------------------------------------------------------------------------------------------
	(3)push: 
	流程：
		1. 生成一个最新的location对象
		2. 通过window.history.pushState方法改变浏览器当前路由（当前path）
		3. 通过setState方法通知react-router更新，并传递当前的location对象
			（由于这次url变化是由history.pushState产生的，并不会触发popState方法，所以需要手动setState，触发组件更新）
---------------------------------------------------------------------------------------------------------------
*/

	/*history.push方法，改变路由，通过全局对象history.pushState改变url，通知router触发更新，替换组件*/
	const push = (path, state) => {
		const action = 'PUSH';
		/* 1. 创建location对象 */
		const loaction = createLocation(path, state, createKey(), history.location);
		/* 确定是否能进行路由跳转，还在确认的时候又开始了另一个转变，可能会造成异常 */
		transitionManager.confirmTransition(location, action, getUserConfirmation, (ok) => {
			if (!ok) {
				return;
			};
			const href = createHref(location)
      			const { key, state } = location
      			if (canUseHistory) {
        			/* 改变 url */
        			globalHistory.pushState({ key, state }, null, href)
        			if (forceRefresh) {
          				window.location.href = href
        			} else {
         				/* 改变 react-router location对象, 创建更新环境 */
          				setState({ action, location })
        			}
      			} else {
        			window.location.href = href
      			}
		});
	};


/*
---------------------------------------------------------------------------------------------------------------
	(2)listen: 
---------------------------------------------------------------------------------------------------------------
*/
	/*底层应用事件监听器，监听popstate事件*/
	const listen = (listener) => {
		/*添加listen*/
		const unlisten = transitionManager.appendListener(listener);
		checkDOMListeners(1);

		return () => {
			checkDOMListeners(-1);
			unlisten();
		};
	};

	/*定义checkDOMListeners*/
	const checkDOMListeners = (delta) => {
		listenerCount += delta;
		if (listenerCount === 1) {
			addEventListener(window, PopStateEvent, handlePopState);
			if (needsHashChangeListener) addEventListener(window, HashChangeEvent, handleHashChange)
		} else if (listenerCount === 0) {
			removeEventListener(window, PopStateEvent, handlePopState);
			if (needsHashChangeListener) removeEventListener(window, HashChangeEvent, handleHashChange)
		};
	};
	/*
		listen本质上是通过checkDOMListeners的参数-1或者1来绑定或者解绑popstate事件，
		当路由发生变化的时候，调用处理函数handlePopState
	*/


	return {
		push,
		listen,
		/*...*/
	}; 
};

const HashChangeEvent = 'hashchange'
 const checkDOMListeners = (delta) => {
 	listenerCount += delta
    	if (listenerCount === 1) {
      		addEventListener(window, HashChangeEvent, handleHashChange)
    	} else if (listenerCount === 0) {
      		removeEventListener(window, HashChangeEvent, handleHashChange)
    	}
}

/* 对应 push 方法 */
const pushHashPath = (path) =>
	window.location.hash = path

	/* 对应replace方法 */
	const replaceHashPath = (path) => {
  		const hashIndex = window.location.href.indexOf('#')

  		window.location.replace(
    			window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + '#' + path
  		)
	}

/* Router 作用是把 history location 等路由信息 传递下去  */
class Router extends React.Component {
  static computeRootMatch(pathname) {
    return { path: '/', url: '/', params: {}, isExact: pathname === '/' };
  }
  constructor(props) {
    super(props);
    this.state = {
      location: props.history.location
    };
    //记录pending位置
    //如果存在任何<Redirect>，则在构造函数中进行更改
    //在初始渲染时。如果有，它们将在
    //在子组件身上激活，我们可能会
    //在安装<Router>之前获取一个新位置。
    this._isMounted = false;
    this._pendingLocation = null;
    /* 此时的history，是history创建的history对象 */
    if (!props.staticContext) {
      /* 这里判断 componentDidMount 和 history.listen 执行顺序 然后把 location复制 ，防止组件重新渲染 */
      this.unlisten = props.history.listen(location => {
        /* 创建监听者 */
        if (this._isMounted) {

          this.setState({ location });
        } else {
          this._pendingLocation = location;
        }
      });
    }
  }
  componentDidMount() {
    this._isMounted = true;
    if (this._pendingLocation) {
      this.setState({ location: this._pendingLocation });
    }
  }
  componentWillUnmount() {
    /* 解除监听 */
    if (this.unlisten) this.unlisten();
  }
  render() {
    return (
      /*  这里可以理解 react.createContext 创建一个 context上下文 ，保存router基本信息。children */
      <RouterContext.Provider
          children={this.props.children || null}
          value={{
          history: this.props.history,
          location: this.state.location,
          match: Router.computeRootMatch(this.state.location.pathname),
          staticContext: this.props.staticContext
        }}
      />
    );
  }
}

/* switch组件 */
class Switch extends React.Component {
  render() {
    return (
      <RouterContext.Consumer>
        {/* 含有 history location 对象的 context */}
        {context => {
          invariant(context, 'You should not use <Switch> outside a <Router>');
          const location = this.props.location || context.location;
          let element, match;
          //我们使用React.Children.forEach而不是React.Children.toArray（）.find（）
          //这里是因为toArray向所有子元素添加了键，我们不希望
          //为呈现相同的两个<Route>s触发卸载/重新装载
          //组件位于不同的URL。
          //这里只需然第一个 含有 match === null 的组件
          React.Children.forEach(this.props.children, child => {
            if (match == null && React.isValidElement(child)) {
              element = child;
              // 子组件 也就是 获取 Route中的 path 或者 rediect 的 from
              const path = child.props.path || child.props.from;
              match = path
                ? matchPath(location.pathname, { ...child.props, path })
                : context.match;
            }
          });
          return match
            ? React.cloneElement(element, { location, computedMatch: match })
            : null;
        }}
      </RouterContext.Consumer>
    );
  }
}

function matchPath(pathname, options = {}) {
  if (typeof options === "string" || Array.isArray(options)) {
    options = { path: options };
  }

  const { path, exact = false, strict = false, sensitive = false } = options;

  const paths = [].concat(path);

  return paths.reduce((matched, path) => {
    if (!path && path !== "") return null;
    if (matched) return matched;

    const { regexp, keys } = compilePath(path, {
      end: exact,
      strict,
      sensitive
    });
    const match = regexp.exec(pathname);
    /* 匹配不成功，返回null */
    if (!match) return null;

    const [url, ...values] = match;
    const isExact = pathname === url;

    if (exact && !isExact) return null;

    return {
      path, // the path used to match
      url: path === "/" && url === "" ? "/" : url, // the matched portion of the URL
      isExact, // whether or not we matched exactly
      params: keys.reduce((memo, key, index) => {
        memo[key.name] = values[index];
        return memo;
      }, {})
    };
  }, null);
}

/**
 * The public API for matching a single path and rendering.
 */
class Route extends React.Component {
  render() {
    return (
      <RouterContext.Consumer>
        {context => {
          /* router / route 会给予警告警告 */
          invariant(context, "You should not use <Route> outside a <Router>");
          // computedMatch 为 经过 swich处理后的 path
          const location = this.props.location || context.location;
          const match = this.props.computedMatch 
            ? this.props.computedMatch // <Switch> already computed the match for us
            : this.props.path
            ? matchPath(location.pathname, this.props)
            : context.match;
          const props = { ...context, location, match };
          let { children, component, render } = this.props;

          if (Array.isArray(children) && children.length === 0) {
            children = null;
          }

          return (
            <RouterContext.Provider value={props}>
              {props.match
                ? children
                  ? typeof children === "function"
                    ? __DEV__
                      ? evalChildrenDev(children, props, this.props.path)
                      : children(props)
                    : children
                  : component
                  ? React.createElement(component, props)
                  : render
                  ? render(props)
                  : null
                : typeof children === "function"
                ? __DEV__
                  ? evalChildrenDev(children, props, this.props.path)
                  : children(props)
                : null}
            </RouterContext.Provider>
          );
        }}
      </RouterContext.Consumer>
    );
  }
}

function Redirect({ computedMatch, to, push = false }) {
  return (
    <RouterContext.Consumer>
      {context => {
        const { history, staticContext } = context;
        /* method就是路由跳转方法。 */
        const method = push ? history.push : history.replace;
        /* 找到符合match的location ，格式化location */
        const location = createLocation(
          computedMatch
            ? typeof to === 'string'
              ? generatePath(to, computedMatch.params)
              : {
                  ...to,
                  pathname: generatePath(to.pathname, computedMatch.params)
                }
            : to
        )
        /* 初始化的时候进行路由跳转，当初始化的时候，mounted执行push方法，当组件更新的时候，如果location不相等。同样会执行history方法重定向 */
        return (
          <Lifecycle
              onMount={() => {
              method(location);
            }}
              onUpdate={(self, prevProps) => {
              const prevLocation = createLocation(prevProps.to);
              if (
                !locationsAreEqual(prevLocation, {
                  ...location,
                  key: prevLocation.key
                })
              ) {
                method(location);
              } 
            }}
              to={to}
          />
        );
      }}
    </RouterContext.Consumer>
  );
};

const treeData = [
    {
        id: 'p1',
        title: '浙江',
        children: [
            {
                id: 'p1-1',
                title: '杭州',
                children: [],
            }, {
                id: 'p1-2',
                title: '绍兴',
                children: [],
            }
        ],
    }, {
        id: 'p2',
        title: '江苏',
        children: [
            {
                id: 'p2-1',
                title: '南京',
                children: [],
            }, {
                id: 'p2-2',
                title: '苏州',
                children: [],
            }
        ],
    }
]

const listData = [
    {id: 'p1', title: '浙江'},
    {id: 'p2', title: '江苏'},
    {id: 'p1-1', pid:'p1', title: '杭州'},
    {id: 'p1-2', pid:'p1', title: '绍兴'},
    {id: 'p2-1', pid:'p2', title: '南京'},
    {id: 'p2-2', pid:'p2', title: '苏州'},
];

function list2tree(listData) {
    let treeData = [];
    for (const node of listData) {
        if (!node.pid) {   // 没有pid，说明是父节点
            let p = {...node};   // 对象的解构
            p.children = getChildren(p.id, listData);
            treeData.push(p);
        }
    }
    
    // 找到子节点
    function getChildren(id, listData) {
        // 过滤出pid === id的所有结果并且存在数组中，把这个数组作为父节点的children
        // 注意：这里不能用find，因为find是返回找到的第一个结果
        return listData.filter((item) => item.pid === id)
    }
    
    return treeData;
}

function list2tree(listData) {
  listData.forEach(child => {
    const pid = child.pid
    if(pid) {
      listData.forEach(parent => {
        if(parent.id === pid) {
          parent.children = parent.children || []
          parent.children.push(child)
        }
      })
    }
  })
  return listData.filter(n => !n.pid)
}

function list2tree(listData) {
    const m = new Map(),
          treeData = [];
    
    for (let i = 0; i < listData.length; i++) {
        m.set(listData[i].id, i);   // 把节点的id存入映射
        listData[i].children = [];
    };
    
    // 再次遍历节点
    for (let i = 0; i < listData.length; i++) {
        const node = listData[i];
        
        // 如果有父节点
        if (node.pid && m.has(node.pid)) {
            listData[m.get(node.pid)].children.push(node);
        } else {  // 如果没有
            treeData.push(node);
        }
    }
    
    return treeData;
}

function tree2list(treeData) {
    const listData = [];
    const queue = [...treeData];
    
    while (queue.length) {
        const node = queue.shift();   // 取出节点
        const children = node.children;  // 取出节点的子节点
        if (children) {
            queue.push(...children);
        }
        listData.push(node);
    }
    return listData;
}

function tree2list(treeData) {
    const listData  = [];
    const stack = [...treeData];
    
    while (stack.length) {
        const node = stack.pop();
        const children = node.children;
        
        if (children) {
            stack.push(...children);
        }
        listData.push(node);
    }
    return listData;
}

// 虚拟DOM
const vnode = {
	tag:'DIV',
	attrs: {
        id: 'app',
    },
    children: [
        {
            tag: 'SPAN',
            children: [
                {tag: 'A', children: []}
            ],
        },{
            tag: 'SPAN',
            children: [
                {tag: 'A', children: []},
                {tag: 'A', children: []},
            ],
        }
    ]
}


// 真实DOM
<div id = 'app'>
    <span><a></a></span>
    <span>
    	<a></a>
	<a></a>
    </span>
</div>

function myRender(vnode) {
    // 如果是number类型
    if (typeof vnode === 'number') {
        vnode = String(vnode);
    }
    
    // 如果是string类型
    if (typeof vnode === 'string') {
        return document.createTextNode(vnode);
    }
    
    // 如果是普通的dom
    let dom = document.createElement(vnode.tag);
    
    if (vnode.attrs) {
        for (let key of vnode.attrs) {
            dom.setAttribute(key, vnode.attrs[key]);
        }
    }
    
    // 子数组递归
    if (vnode.children.length) {
        vnode.children((child) => dom.appendChild(myRender(child)));
    }
    
    return dom;
}

function arrayLike2Array(arrayLike) {
    return Array.prototype.slice.call(arrayLike);
}

// test
const arrayLike = {
    '0': 'Katrina',
    '1': 'Jack',
    '2': 'Kate',
    '3': 'Jenny',
    length: 4
};
const array = arrayLike2Array(arrayLike);
console.log(array);   // ['Katrina', 'Jack', 'Kate', 'Jenny']

function arrayLike2Array(arrayLike) {
    return [...arrayLike];
}

// test
const arrayLike = {
    '0': 'Katrina',
    '1': 'Jack',
    '2': 'Kate',
    '3': 'Jenny',
    length: 4
};
const array = arrayLike2Array(arrayLike);
console.log(array);   // ['Katrina', 'Jack', 'Kate', 'Jenny']

function arrayLike2Array(arrayLike) {
    return [...arrayLike];
}

// test
function fn() {
    console.log(arguments)
    return [...arguments];
}

const array = fn(1,2,3,4,5,6);
console.log(array);   // [ 1, 2, 3, 4, 5, 6 ]

// mock
const data = [
    {name: xxx, xxx: xxx, ...},
    {name: xxx, xxx: xxx, ...},
    {name: xxx, xxx: xxx, ...},
    {name: xxx, xxx: xxx, ...},
    {name: xxx, xxx: xxx, ...},
    {name: xxx, xxx: xxx, ...},
    ...
]

function getList(data) {
    for (let i = 0; i < data.length; i++) {
        // 获取ul
        const ul = document.getElementsByTagName('ul')[0];
        // 动态渲染数据
        data.forEach((item) => {
            // 创建li节点
            let li = document.createElement('li');
            // 给li添加文本内容
            li.innerHTML = item.name;    // 我只想渲染name
            // 把li添加到ul下作为子节点
            ul.appendChild(li);
        });
    }
}

function myAJAX(method = 'GET', url, isAsync=true, data=null) {
    let xhr = new XMLHttpRequest();
    
    return new Promise((resolve, reject) => {
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                    resolve(xhr.responseText);
                } else {
                    reject(xhr.status)
                }
            }  
        };
        xhr.open(method, url, isAsync);
        xhr.send(data);
    })
}

function ajaxFetch(url, options = {}) {
    fetch(url, options).then(response => response.text()
       .then(data => console.log(data)))
}

// 示例：发送axios请求
axios({
    method: 'post',
    url: 'xxx',
    data: {
        xxx:xxx,
        xxx:xxx,
    }
})

let timer = null;
function myInterval(cb, delay) {
    function fn() {
        cb();
        timer = setTimeout(() => fn(), delay)     // 递归调用
    };
    timer = setTimeout(() => fn(), delay);      // 触发递归
}

// 调用
myInterval(() => console.log('正在打印'), 2000);

// 清除定时器
clearTimeout(timer);