又一个月了,写点东西吧
- 先学习一点抽象语法树123456789101112let tips = ["Click on any AST node with a '+' to expand it","Hovering over a node highlights the \corresponding part in the source code","Shift click on an AST node expands the whole substree"];function printTips() {tips.forEach((tip, i) => console.log(`Tip ${i}:` + tip));}
以上代码转化为ast
大概就是这个模式, 我们来玩一个
- ast语法学习1234567891011121314151617181920212223242526272829// test the codefunction decrementAndAdd(a, b){function add(c, d){return c + d;}a--;b = b - 1;return add(a,b)}const recast = require('recast');const { Parser } = require("acorn");const ast = Parser.parse(readFileSync(fileName).toString());recast.visit(ast, visitFunctionDeclaration(path){console.log(path.node.type); // will print "FunctionDeclaration"functionNames.push(path.node.id.name); // will add the name of the function to the arrayvar newPath = path.get('body');// subtraversingrecast.visit(newPath, visitFunctionDeclaration(path){functionNames.push(path.node.id.name);return false;})// avoid deep visitreturn false;})
3.再来一个
- 再来个路由转场12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import React from 'react';import {Route,Switch,withRouter,BrowserRouter} from 'react-router-dom';import './index.css';import {RouterConfig} from './RouteConfig';import {CSSTransition, TransitionGroup} from 'react-transition-group';const DEFAULT_SCENE_CONFIG = {enter: 'from-right',exit: 'to-exit'};const getSceneConfig = location => {const matchedRoute = RouterConfig.find(config => new RegExp(`^${config.path}$`).test(location.pathname));return (matchedRoute && matchedRoute.sceneConfig) || DEFAULT_SCENE_CONFIG;};let oldLocation = null;const Routes = withRouter(({location, history}) => {// 转场动画应该都是采用当前页面的sceneConfig,所以:// push操作时,用新location匹配的路由sceneConfig// pop操作时,用旧location匹配的路由sceneConfiglet classNames = '';if(history.action === 'PUSH') {classNames = 'forward-' + getSceneConfig(location).enter;} else if(history.action === 'POP' && oldLocation) {classNames = 'back-' + getSceneConfig(oldLocation).exit;}// 更新旧locationoldLocation = location;return (<TransitionGroupclassName={'router-wrapper'}childFactory={child => React.cloneElement(child, {classNames})}><CSSTransition timeout={500} key={location.pathname}><Switch location={location}>{RouterConfig.map((config, index) => (<Route exact key={index} {...config}/>))}</Switch></CSSTransition></TransitionGroup>);});export default class App4 extends React.PureComponent {render() {return (<BrowserRouter><Routes/></BrowserRouter>);}}
地址 https://github.com/SmallStoneSK/react-router-animation-demo