shen1992 / blog Goto Github PK

brew install redis

redis-server

redis-cli 

get http://yuedu.163.com/

npm i redis --save

npm i bluebird --save

var redis = require('redis')
var bluebird = require('bluebird')
var config = require('./config')

bluebird.promisifyAll(redis.RedisClient.prototype)

class Cache {
  constructor() {
    this._init()
  }

  _init() {
    this.client = redis.createClient(config.port, config.host, {no_ready_check: true})
    this.client.auth(config.password, function () {
      console.log('通过认证！')
    })
    this.client.on('ready', function (res) {
      console.log('ready')
    })
    this.client.on('error', function (err) {
      console.log('Error: ' + err)
    })
  }

  get(key) {
    return this.client.getAsync(key)
  }

  set(key, value) {
    return this.client.setAsync(key, value)
  }

  expire(key) {
    return this.client.expire(key, config.expireTime)
  }

  exit() {
    this.client.quit()
  }
}

module.exports = new Cache

npm config get registry

npm config set registry https://registry.npmjs.org/

export default CountDonw { ...}

module.exports = require(./lib)

npm i CountDown --save
import CountDown from 'CountDown'

output: {
  library: 'CountDown',
  libraryExport: 'default'
}

npm adduser

npm whoami

npm publish 

npm publish

function removeDOM(oldNode) {
    let parent = findLatestParentDOM(oldNode)
    let child = findLatestChildDOM(oldNode)
    parent.$el.removeChild(child.$el)
}

function setAttribute(el, prop, val) {
  // 处理事件
  let isEvent = prop.indexOf('on') === 0
  if (isEvent) {
    let eventName = props.slice(2).toLowerCase()
    el.addEventListener(eventName, val)
  } else {
    el.setAttribute(prop, val)
  }
}

function insertDOM(newNode) {
let parent = findLatestParentDOM(newNode)
    let parentDOM = parent && parent.$el
    if (!parentDOM) return

    let child = findLatestChildDOM(newNode)
    let el = child && child.$el
    let after = parentDOM.children[newNode.index]
    parentDOM.insertBefore(el, after)
}

const newComponent = higherOrderComponent(OldComponent)

import React, { Component } from 'react'

export default (WrappedComponent, name) => {
  class NewComponent extends Component {
    constructor () {
      super()
      this.state = { data: null }
    }

    componentWillMount () {
      let data = localStorage.getItem(name)
      this.setState({ data })
    }

    render () {
      return <WrappedComponent data={this.state.data} />
    }
  }
  return NewComponent
}

class Index extends Component {
 static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
      </div>
    )
  }
}

class Header extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>React.js 小书标题</h1>
    )
  }
}

data = [
 {
     xxx,
     children: [
        {
            xxxx,
            children: []
        }
     ]
 }
]

hidden: '{{formData.type === "block"}}'

alkaid-config.js

[
    {
        "type": "shared",
        "items": [
            {
                "docPath": "./shared/utils/common/*",
            }
        ],
    },
    {
   
        "type": "images",
        "dirPath": "./shared/icons/svg-icons"
    }
]

.animate .p3_d {
  animation: p3D 1s ease-in 0.1s forwards;
}

@keyframes p3D {
  0% {
    transform: translate3d(24rem, 0, 0);
  }

  90% {
    transform: translate3d(7.2rem, 0, 0);
  }

  100% {
    transform: translate3d(8.2rem, 0, 0);
  }
}

const p30 = document.querySelector('.p3_0');
dynamics.animate(p30, { translateX: '1.7rem' }, {
    type: dynamics.spring,
    frequency: 40,
    friction: 200,
    duration: 1000,
    delay: 0.2
});

function randomDirection(velocity) {
    const isEventNum = Math.floor(Math.random() * 10) % 2;

    return isEventNum == 0 ? velocity : -velocity;
}

const velocityX = randomDirection(0.2)
const velocityY = randomDirection(0.2)

function randomMax(num) {
    return num - Math.floor(Math.random() * num);
}

randomMax(25)

// 把需要点击的元素存在数组中
let clickElements = [a, b, c, d]

function onClick(clientX, clinetY) {
    clickElements.forEach((element) => {
        if (
            clinetY > element.top 
            && clinetY < element.top + element.height
            && clientX > clientX.left
            && clientX < element.left + element.width
        ) {
            // 选中物体，进行一些操作
        }
    })
}

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

lottie.loadAnimation({
    renderer: 'svg',
    loop: false,
    autoplay: false,
    container: document.querySelector('.p6_a'),
    name: 'p6a',
    animationData: p6aJson // 设计师导出的json
});

// 方式1：
transform: translate3d(0,0,0);

// 方式2：
will-change: auto;

// iphone 5
@media only screen
  and (min-device-width : 320px)
  and (max-device-height : 568px) {
      div1 {
          margin-top: xxx;
      }
  }

// 页面使用flex布局，并且将主轴设置为垂直方向
.page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

// 图中标识为1的区域使用div填充
.div1 {
    flex-basis: 0.95rem;
    flex-shrink: 1;
}

// 题目显示区域，默认大小为13.36rem，即使空间不足也不缩小，空间剩余则变大
.content {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 13.36rem;
}

... 其他元素类似

axios({
  method: 'get',
  url: 'video url',
  responseType: 'blob'
}).then(res => {
   const blobUrl = URL.createObjectURL(res)
   // 生成video标签，并且设置src = blobUrl
})

this.video.addEventListener('canplaythrough', () => {
  callback && callback()
});

this.video.load()

var a = {name: 'shen'}
var b= a
b.name = 'kong'

console.log(a.name) // 输出kong

var a = {name: 'shen'}

var b = JSON.parse(JSON.stringify(a))

function shallowEqual(objA, objB) {
  // 过滤一些不是对象的比较
  if (Object.is(objA, objB)) return true

  if (
      typeof objA !== 'object' 
      || objA === null 
      || typeof objB !== 'object' 
      || objB === null
      ) {
        return false
  }

  const keysA = Object.keys(objA)
  const keysB = Object.keys(objB)

  if (keysA.length !== keysB.length) return false

  for (let i = 0; i < keysA.length; i++) {
    // hasOwnProperty判断这个key是否objB也有
    if (!objB.hasOwnProperty(keysA[i]) || !Object.is(objB[keysA[i]], objA[keysA[i]])) {
      return false
    }
  }

  return true
}

console.log(shallowEqual({name: 'shen', age: 12}, {name: 'shen', age: 13}))  // false

const fiber = {
   child,
   sibling,
   return
}

let cursor = newFiber
while (cursor) {
    // 判断当前diff是否超时，如果超时则把控制权交给浏览器，执行优先级更高的操作
    if (shouldYield()) {
       return true
  } else {
    cursor = performUnitWork(cursor, patches)
  }
}

function performUnitWork(fiber, patches) {
   if (fiber.$child) return fiber.$child
   while (fiber) {
     if (fiber.$child) return fiber.$child
     fiber = fiber.$parent
     if (!fiber) return null 
  }
}

// 重点
newFiber.oldFiber = oldFiber

performUnitWork(newFiber, patches)

function performUnitWork(fiber, patches) {
   let oldFiber = fiber.oldFiber
   let  oldChildren = oldFiber && oldFiber.children || []

   // 对比当前新旧节点
    diffFiber(oldFiber, fiber, patches)
   // 对比新旧子节点
    diffChildren(oldChildren, fiber.children, patches)
}

let attrs = diffAttr(oldNode.props, newNode.props)

 // 如果props更新，patches则打上更新标记
 if (Object.keys(attrs).length > 0) {
       patches.push({ type: UPDATE, oldNode, newNode, attrs })
}
// 是否需要移动节点
 if (oldNode.index !== newNode.index) {
         patches.push({ type: MOVE, oldNode, newNode })
}

   typeMap.forEach((arr, type) => {
        arr.forEach(old => {
            patches.push({ type: REMOVE, oldNode: old, })
        })
    })

requestIdleCallback((deadline) => {
   let remain = deadline.timeRemaining()// 当前帧剩余可用的空闲时间
}, {timeout: 超时时间})

// 一秒30帧
frameLength = 1000 / 30  

function getCurrentTime() {
    return +new Date()
}

// 是否需要暂停操作
function shouldYield() {
    return getCurrentTime() > frameDeadline
}

frameDeadline = getCurrentTime() + Match.min(remain, frameLength)

let currentRoot // 保存当前diff过程新的根节点，判断是否需要重置diff流程

function diff(oldFiber, newFiber) {
   if (currentRoot && currentRoot !== newFiber) {
        cancleWork()
    }
   currentRoot = newFiber // 记录
}

class TaroElement extends TaroNode {
    props
    
    setAttribute(qualifiedName, value) {
        this.props[qualifiedName] = value as string
    }
    addEventListener() {}
}

public createElement (type) {
    const element = controlledComponent.has(type)
    // 判断是否form类型
    const element = controlledComponent.has(type)
     ? new FormElement()
     : new TaroElement()
     
     retrun element
}

class Window extends Events {
    navigator = navigator
    
    setTimeout() {}
    clearTimeout() {}
}

const hostConfig = {
    createInstance() {
        // 使用taro-runtime的document
        return document.createElement(type)
    }
}

let memorizedState = []
let cursor = 0

function useState (initialValue) {
  memorizedState[cursor] = memorizedState[cursor] || initialValue
  const currentCursor = cursor
  function setState (newState) {
    memorizedState[currentCursor] = newState
    render()
  }
  return [memorizedState[cursor++], setState]
}

const [count, setCount] = useState(0)

function useEffect (callback, depArray) {
  const hasNoDeps = !depArray
  const deps = memorizedState[cursor]
  const hasChangeDeps = deps ? depArray.some((el, i) => el !== deps[i]) : true
  
  if (hasNoDeps || hasChangeDeps) {
    callback()
    memorizedState[cursor] = depArray
  }
  cursor++
}

useEffect(() => {
    console.log(count)
  }, [])

const parser = require('@babel/parser')

function depAnalyse(modulePath) {
     // 将代码解析为ast抽象语法树
     const ast = parser.parse(code)
}

this.depAnalyse(path.resolve(this.root, this.entry))

function depAnalyse(modulePath) {
    ...
    // 当前模块依赖数组，存放当前模块所有依赖的路径
    let dependencies = []

   traverse(ast, {
      CallExpression(p) {
          if (p.node.callee.name === 'require') {
            // 修改require
            p.node.callee.name = '__webpack_require__'
            // 修改当前模块 依赖模块的路径 使用node访问资源必须是'./src/xxx'的形式
            let oldValue = p.node.arguments[0].value
            oldValue = './' + path.join('src', oldValue)
            // 避免window的路径出现 "\"
            p.node.arguments[0].value = oldValue.replace(/\\/g, '/')
            // 每解析require，就将依赖的模块路径放入dependencies中
            dependencies.push(p.node.arguments[0].value)
          }
        },
  })
   const sourceCode = generator(ast).code
  // 收集依赖
  this.modules[modulePathRelative] = sourceCode
   // 遍历数组，递归收集依赖
   dependencies.forEach((depPath) => {
      // 传入模块的绝对路径
      this.depAnalyse(path.resolve(this.root, depPath))
    })
}

(() => {
  var __webpack_modules__ = ({
    // 使用模板语法进行遍历 k就是模块ID
    <% for (let k in modules) {%>
      "<%- k %>":
      (function (module, exports, __webpack_require__) {
        eval(`<%- modules[k]%>`);
      }),
      <%}%>
  })
  var __webpack_module_cache__ = {};

  function __webpack_require__(moduleId) {
    var cachedModule = __webpack_module_cache__[moduleId]
    if (cachedModule !== undefined) {
      return cachedModule.exports
    }

    var module = __webpack_module_cache__[moduleId] = {
      exports: {}
    }

    __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__)
    return module.exports
  }
  var __webpack_exports__ = __webpack_require__("<%-entry%>")
})()

function emitFile() {
    // 将占位符modules替换
     let result = ejs.render(template, {
      entry: this.entry,
      modules: this.modules,  
    })
  let outputPath = path.join(
      this.config.output.path,
      this.config.output.filename
    )
  fs.writeFileSync(outputPath, result)
}

(() => {
  var __webpack_modules__ = ({
    // 使用模板语法进行遍历 k就是模块ID
      "./src/index.js":
      (function (module, exports, __webpack_require__) {
        eval(`const moduleA = __webpack_require__("./src/moduleA.js");`);
      }),
      "./src/moduleA.js":
      (function (module, exports, __webpack_require__) {
        eval(`const moduleB = __webpack_require__("./src/moduleB.js");
console.log('moduleA模块,成功导入' + moduleB.content);
module.exports = {
  content: 'moduleA模块'
};`);
      }),
      "./src/moduleB.js":
      (function (module, exports, __webpack_require__) {
        eval(`module.exports = {
  content: 'MD_B'
};`);
      }),
      
  })
  var __webpack_module_cache__ = {};
  function __webpack_require__(moduleId) {
    var cachedModule = __webpack_module_cache__[moduleId]
    if (cachedModule !== undefined) {
      return cachedModule.exports
    }

    var module = __webpack_module_cache__[moduleId] = {
      exports: {}
    }

    __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__)
    return module.exports
  }
  // 递归执行每个__webpack_modules__的value方法
  var __webpack_exports__ = __webpack_require__("./src/index.js")
})()

let appState = {
 name: 'shenyuan'
}

dispatch({type: 'UPDATE_NAME', name: 'shen'})

function reducer(action) {
   switch (action.type) {
    case 'UPDATE_NAME':
      return Object.assign({}, state, {name:  action.name})
      break;
}

store.subscribe(() => renderApp(store.getState()))

function renderTitle(newTile, oldTile) {
  if (newTitle === oldTitle) return
  ....
}

function renderName(newName, oldName) {
  if (newName === oldName) return
  ....
}

function createStore (state, reducer) {
  const listeners = []
  const subscribe = (listener) => listeners.push(listener)
  const getState = () => state
  const dispatch = (action) => {
    reducer(state, action)
    listeners.forEach((listener) => listener())
  }
  return { getState, dispatch, subscribe }
}

import {Provider} form 'react-redux'

ReactDom.render(
    <Provider store={store}>
      <Home />
      <User />
      ...
    </Provider>, document.getElementById('app')
)

export class Provider extends Component {
    static childContextTypes = {
        store: PropTypes.object
    }
    getChildContext() {
        return {
            store: this.props.store
        }
    }
    render() {
        return (
            <div>{this.props.children}</div>
        )
    }
}

class Switch extends React.Component {
  render() {
  ... 
}
}

Switch = connect(mapStateToProps, mapDispatchToProps)(Switch)

export const connect = (mapStateToProps, mapDisPatchToProps) => (WrappedComponent) => {
    class Connect extends Component {
        static contextTypes = {
            store: PropTypes.object
        }

        constructor() {
            super()
            this.state = {allProps: {}}
        }

        componentWillMount() {
            const {store} = this.context
            this._updateProps()
            store.subscribe(() => this._updateProps())
        }

        _updateProps() {
            const {store} = this.context
            let stateProps = mapStateToProps ?
                mapStateToProps(store.getState(), this.props) : {}
            let dispatchProps = mapDisPatchToProps ?
                mapDisPatchToProps(store.dispatch, this.props) : {}
            this.setState({
                allProps: {
                    ...stateProps,
                    ...this.props,
                    ...dispatchProps
                }
            })
        }

        render() {
            return <WrappedComponent  {...this.state.allProps} />
        }
    }
    return Connect
}

<Link to="/about" replace="false" >About</Link>

class Link extends Component {
    handleClick = (event) => {
        const { replace, to } = this.props
        event.preventDefault()
        replace ? historyReplace(to) : historyPush(to)
    }
    render() {
        const { to, children} = this.props
        return (
            <a href={to} onClick={this.handleClick}>
                {children}
            </a>
        )
    }
}

const historyReplace = (path) => {
    window.history.replaceState({}, null, path)
}

const historyPush = (path) => {
    window.history.pushState({}, null, path)
}

<Route path="/about" component={About}/>

class Route extends Component {
    componentWillMount() {
        window.addEventListener("popstate", this.handlePop)
    }
    componentWillUnmount() {
        window.removeEventListener("popstate", this.handlePop)
    }
    handlePop = () => {
        this.forceUpdate()
    }
    render() {
        const {
            path,
            exact,
            component,
            render,
        } = this.props
        const match = matchPath(window.location.pathname, { path, exact })
        if (!match)
            return null
        if (component) {
            return React.createElement(component, { match })
        }
        return null
    }
}

const matchPath = (pathname, options) => {
    const {  path } = options
 
    const match = new RegExp(`^${path}`).exec(pathname)
    if (!match) return null
    const url = match[0]
    return {
        path,
        url
    }
}

executablePath: '/usr/bin/google-chrome'

await page.evaluate(() => {
  return {
     document.getElementsByTagName('video')[0].currentSrc
  }
})

fs.createWriteStream(path, name)

blob:https://www.youtube.com/d2708fb5-065a-4429-af77-9d67c96fa9c5

await page.emulate(iPhone)

await page.setCookie(...)

page.on('request', request => {
  if (request.resourceType() === 'xhr' && request.url().indexOf('/web/api/v2/aweme/post') > -1) {
    ....
  }
})

const urllib = require('urllib')

const proxies = [
  'http://10.122.133.44:3128', 
  'http://10.172.113.149:3128', 
  'http://10.172.113.148:3128',
]

const async = require('async')

async.mapLimit(urls, 5, async function(url) {
    const response = await fetch(url)
    return response.body
}, (err, results) => {
    if (err) throw err
    // results is now an array of the response bodies
    console.log(results)
})

const cheerio = require('cheerio')

const Json2csvParser = require('json2csv').Parser
const iconv = require('iconv-lite')

const encode = iconv.encode(csv, 'utf-8')
fs.writeFile(name, encode)

const archiver = require('archiver')

const crypto = require('crypto')
const md5 = crypto.createHash('md5')
let hash = md5.update(Buffer.from(videos)).digest('hex')

import React from 'react'

  new webpack.ProvidePlugin({
      React: 'react'
    })

class Hello extends React.Compoent {}

new webpack.HashedModuleIdsPlugin()

  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'build/dist'),
    hashDigestLength: 8
  }

new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './src/index.html')
    })

 entry: {
    main: './src/pages/index.js',
    vendor: ['react', 'react-router', 'react-dom']
  },

 new webpack.optimize.CommonsChunkPlugin({
      name: ['vendor', 'manifest']
    })

const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');

 new InlineManifestWebpackPlugin({
      name: 'webpackManifest'
    }),

./html

<%=htmlWebpackPlugin.files.webpackManifest%>

const CleanWebpackPlugin = require('clean-webpack-plugin')

new CleanWebpackPlugin(['build/dev'])

  new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })

let MODE = process.env.MODE

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

 new UglifyJSPlugin({
      sourceMap: true
    })

  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
}

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'build/dev'),
    library: 'CountDown',
    libraryExport: 'default'
  }

 output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'build/dist'),
    library: 'CountDown',
    libraryTarget: 'umd'
  }

entry: {
      index: './src/pages/index.js',
      room: './room/index.js',
      result: './result/index.js'
  }

 output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './build/dev')
  }

plugins: [
    new webpack.ContextReplacementPlugin(
      /moment\/locale$/,
      /zh-cn/
    )
  ]

devServer: {
    disableHostCheck: true
  },

fetch(url).then(resp => { 
   if (resp.ok)  
    ...
 })

function Fetch(url, options) {
  return fetch(url, {credentials: 'include', ...options})
    .then((res) => res.json())
    .then(json => json)
    .catch((e) => console.log('error', e))
}

function GET(url, data = {}, options = {}) {
  this.send = () => {
    const _url = encodeQuery(url, data);
    return Fetch(_url, {
      method: 'GET',
      ...options
    },)
      .then((res) => res)
      .catch((err) => {throw err})
  }
}

new GET('url', {params})
   .send()
   .then(resp => {
    你的操作...
})

function POST(url, data = {}, option = {}) {
  this.send = () => {
    return Fetch(url, {
      method: 'POST',
      headers: {
        "Content-Type": "application/json"
      },
      body: typeof data === 'object' ? JSON.stringify(data) : data,
      ...option
    })
      .then(res => res)
      .catch((err) => {throw err})
  }
}

new POST(url, {params})
  .send()
  .then()

npm i fetch-polyfill --save

import 'fetch-polyfill';

function Element (tagName, props, children) {
  this.tagName = tagName
  this.props = props
  this.children = children
}

Element.prototype.render = function () {
  var el = document.createElement(this.tagName) // 根据tagName构建
  var props = this.props

  for (var propName in props) { // 设置节点的DOM属性
    var propValue = props[propName]
    el.setAttribute(propName, propValue)
  }

  var children = this.children || []

  children.forEach(function (child) {
    var childEl = (child instanceof Element)
      ? child.render() // 如果子节点也是虚拟DOM，递归构建DOM节点
      : document.createTextNode(child) // 如果字符串，只构建文本节点
    el.appendChild(childEl)
  })

  return el
}

var el = require('./element')

var ul = el('ul', {id: 'list'}, [
  el('li', {class: 'item'}, ['Item 1']),
  el('li', {class: 'item'}, ['Item 2']),
  el('li', {class: 'item'}, ['Item 3'])
])

var ulRoot = ul.render()
document.body.appendChild(ulRoot)

function diff (oldTree, newTree) {
  var index = 0
  var patches = {}
  dfsWalk(oldTree, newTree, index, patches)
  return patches
}

function dfsWalk (oldNode, newNode, index, patches) {
  var currentPatch = []

  // Node is removed.
  if (newNode === null) {
    // Real DOM node will be removed when perform reordering, so has no needs to do anthings in here
  // TextNode content replacing
  } else if (_.isString(oldNode) && _.isString(newNode)) {
    if (newNode !== oldNode) {
      currentPatch.push({ type: patch.TEXT, content: newNode })
    }
  // Nodes are the same, diff old node's props and children
  } else if (
      oldNode.tagName === newNode.tagName &&
      oldNode.key === newNode.key
    ) {
    // Diff props
    var propsPatches = diffProps(oldNode, newNode)
    if (propsPatches) {
      currentPatch.push({ type: patch.PROPS, props: propsPatches })
    }
    // Diff children. If the node has a `ignore` property, do not diff children
    if (!isIgnoreChildren(newNode)) {
      diffChildren(
        oldNode.children,
        newNode.children,
        index,
        patches,
        currentPatch
      )
    }
  // Nodes are not the same, replace the old node with new node
  } else {
    currentPatch.push({ type: patch.REPLACE, node: newNode })
  }

  if (currentPatch.length) {
    patches[index] = currentPatch
  }
}

var REPLACE  // 重新渲染dom节点
var REORDER  // 更新子元素
var PROPS   // 更新props
var TEXT   // 文本节点，更新内容

function applyPatches (node, currentPatches) {
  _.each(currentPatches, function (currentPatch) {
    switch (currentPatch.type) {
      case REPLACE:
        var newNode = (typeof currentPatch.node === 'string')
          ? document.createTextNode(currentPatch.node)
          : currentPatch.node.render()
        node.parentNode.replaceChild(newNode, node)
        break
      case REORDER:
        reorderChildren(node, currentPatch.moves)
        break
      case PROPS:
        setProps(node, currentPatch.props)
        break
      case TEXT:
        if (node.textContent) {
          node.textContent = currentPatch.content
        } else {
          // fuck ie
          node.nodeValue = currentPatch.content
        }
        break
      default:
        throw new Error('Unknown patch type ' + currentPatch.type)
    }
  })
}

npm install --save react
npm install --save react-dom
npm install --save-dev parcel-bundler
npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-react

{
  "presets": ["env", "react"]
}

npm install node-sass

./index.js

import './style.scss'

parcel index.html

providerState({
  initialState,
  effects,
  computed,
})

providerState({})

injectState(component, key)

const effects = {
  changeMenu: (effects, args) => mergeIntoState({currentMenu: args})
}

const initialState = () => ({
  active: 'hello'
})

showModal = (bool) => {
  this.setState({show: bool});
}

this.props.showModal(true)

import { mergeIntoState } from 'freactal';

// active为1是云阅读,2是蜗牛
const initialState = () => ({
  active: '1',
});

const effects = {
  toggleRadio: (effect, args) => mergeIntoState({active: args})
};

export default {
  initialState,
  effects
};

import { provideState, injectState } from 'freactal';
import createLogger from 'freactal-logger';

export default (store, keys) => (statefull) => {
  const middleware = [];
  if (process.env.NODE_ENV === 'development') {
    const logger = createLogger({
      collapsed: true
    });
    middleware.push(logger);
  }
  return provideState({
    ...store,
    middleware
  })(injectState(statefull, keys));
}

import store from './store';
import withStore from './withStore';

@withStore(store, ['active'])
class Result extends React.Component {}

function SuperType() {
  this.property = true
}

SuperType.prototype.getSuperValue = function() {
  return this.property
}

function SubType() {
  this.subproperty = false
}

SubType.prototype = new SuperType()

var instance = new SubType()
instance.getSuperValue() // true

function SuperType() {
  this.colors = ['red', 'blue', 'green'];
}

function SubType() {
  SuperType.call(this)
}

var instance = new SubType()

function SuperType() {
 this.color = ['red', 'blue']
}

SuperType.prototype.name = 'shen'

function SubType() {
  SuperType.call(this)
}

SubType.prototype = new SuperType()

var instance = new SubType()

const renderer = new WebGLRenderer() 

renderer.setSize(window.innerWidth, window.innerHeight)

renderer.setPixelRatio(window.devicePixelRatio)

const scene  = new Scene()
scene.background = new Color(0x333333)

const camera  = new PerspectiveCamera(70, this.options.width/this.options.height, 1, 10000)
camera.position.set(150, 250, 300)
camera.lookAt(new Vector3(0, 0, 0))
this.scene.add(camera)

const light  = new DirectionalLight()
light.position.set(0, 20, 20)
this.camera.add(light)

npm i three-obj-loader

const loader = new THREE.OBJLoader()
loader.load('assets/chair.obj', obj => {
    obj.traverse(child=> {
       if (child instanceof Mesh) {
          child.material.side = THREE.DoubleSide
          this.scene.add(obj)
      }
   })
})

npm i three-orbit-controls

const controls = this.controls = new OrbitControls(this.camera)
controls.maxPolarAngle = 1.5
controls.minPolarAngle = 0.5
controls.rotateSpeed = 5.0
controls.zoomSpeed = 5
controls.panSpeed = 2
controls.onZoom = false
controls.noPan = false
controls.staticMoving = true
controls.dynamicDampingFactor = 0.3
controls.minDistance = 10
controls.maxDistance = 800

window.requestAnimationFrame(this.animate)
this.controls.update()
this.render()

'use strict'

// 单个资源等待时间，避免资源加载后还需要加载其他资源
var resourceWait = 500
var resourceWaitTimer

// 最大等待时间
var maxWait = 5000
var maxWaitTimer

// 资源计数
var resourceCount = 0

// phantomjs webpage模块
var page = require('webpage').create()

// nodejs系统模块
var system = require('system')

// 从cli中获取第二个参数为目标url
var url = system.args[1]

// 设置phantomjs视窗大小
page.viewportSize = {
  width: 1280,
  height: 1014
}

var capture = function (errCode) {
  // 外部通过stdout获取页面内容
  console.log(page.content)
  // 清除定定时器
  clearTimeout(maxWaitTimer)

  // 任务完成，正常退出
  phantom.exit(errCode)
}

// 资源请求并计数
page.onResourceRequested = function (req) {
  resourceCount++
  clearTimeout(resourceWaitTimer)
}

// 资源加载完毕
page.onResourceReceived = function (res) {
  // chunk模式的http回包，会多次触发resourceReceived事件，需要判断资源是否已经end
  if (res.stage !== 'end') {
    return
  }
  resourceCount--
  if (resourceCount === 0) {
    // 当页面中全部资源加载完毕后，截取当前渲染出来的html
    // 由于onResourceReceived在资源加载完毕就立即被调用了，我们需要给一些时间让js跑解析任务
    resourceWaitTimer = setTimeout(capture, resourceWait)
  }
}

// 资源加载超时
page.onResourceTimout = function (req) {
  resourceCount--
}

// 资源加载失败
page.onResourceError = function (err) {
  resourceCount--
}

// 打开页面
page.open(url, function (status) {
  if (status !== 'success') {
    phantom.exit(1)
  } else {
    // 当改页面的初始html返回成功后，开启定时器
    // 当到达最大时间(默认5秒)的时候，截取渲染出来的html
    maxWaitTimer = setTimeout(function () {
      capture(2)
    }, maxWait)
  }
})

var express = require('express')
var app = express()

// 引入nodejs的子进程模块
var child_process = require('child_process')

app.get('*', function (req, res) {
  // 完整url
  var url = req.protocol + '://' + req.hostname + req.originalUrl
  // 预渲染后的页面字符串容器
  var content = ''
  // 开启一个phantomjs子进程
  var phantom = child_process.spawn('phantomjs', ['spider.js', url])
  // 设置stdout字符编码
  phantom.stdout.setEncoding('utf8')

  // 监听phantom的stdout, 并拼接起来
  phantom.stdout.on('data', function (data) {
    content += data.toString()
  })
  // 监听子进程退出事件
  phantom.on('exit', function (code) {
    switch (code) {
      case 1:
        console.log('加载失败')
        res.send('加载失败')
        break
      case 2:
        console.log('加载超时:' + url)
        res.send(content)
        break
      default:
        res.send(content)
        break
    }
  })
})

app.listen(3000, function () {
  console.log('Spider app listening on port 3000!');
})

# 定义一个Nginx的upstream为spider_server
upstream spider_server {
  server localhost:3000;
}

server {
  listen       80;
  server_name  yuedu.163.com;
  # 指定一个范围，默认 / 表示全部请求
  location / {
    proxy_set_header  Host            $host:$proxy_port;
    proxy_set_header  X-Real-IP       $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

    # 当UA里面含有Baiduspider的时候，流量Nginx以反向代理的形式，将流量传递给spider_server
    if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
      proxy_pass  http://spider_server;
    }
  }
}

include phantom.conf

const schema = {
  type: 'object',
  properties: {
    input1: {
      title: '简单输入框',
      type: 'string',
      required: true,
    },
    select1: {
      title: '单选',
      type: 'string',
      enum: ['a', 'b', 'c'],
      enumNames: ['早', '中', '晚'],
    },
  },
};

const mapping = {
    string: 'input',
}

const widgets = {
    input: Input
}

let widget = getWidgetName(schema, mapping)
const Widget = widgets[widgetName]

<div>
    <label>{title}</label>
    <Widget />
</div>

{
    site: 'Site'
}

const widget = {
    Site: <Site>
}

hidden: '{{rootValue.select1 === true}}'

if (schema.hidden) {
    return null;
}

Function(str)()

const useForm = props = {
    const form = {
        setValues,
        getValues
    }
    return form
}

用 async-validator这个库就行

<div id='oDiv'>123</div>

import { jsx as _jsx } from 'react/js-runtime' 

_jsx('div', {
  children: '123',
  id: 'oDiv'
})

export const jsx = (type, config) => {
  let key = null
  const props = {}
  let ref = null

  for (const prop in config) {
    const val = config[prop]
    if (prop === 'key') {
       key = '' + val
       continue
    }
    if (prop === 'ref') {
       if (val !== undefined) {
          ref = val
          continue
       }
   }
   if ({}.hasOwnProperty.call(config, prop)) {
       props[prop] = val
   }
  }
   return ReactElement(type, key, ref, props)
}

const ReactElement = (type, key, ref, props) => {
    const element = {
        $$typeof: REACT_ELEMENT_TYPE,
        type,
	key,
	ref,
	props,
    }
    retrun element
}

class FiberNode {
    construtor(tag, props, key) {
        // 构成树状结构
        this.return = null
        this.sibling = null
        this.child = null
    }
}

const renderer = new WebGLRenderer() 

renderer.setSize(window.innerWidth, window.innerHeight)

renderer.setPixelRatio(window.devicePixelRatio)

const scene  = new Scene()
scene.background = new Color(0x333333)

const camera  = new PerspectiveCamera(70, this.options.width/this.options.height, 1, 10000)
camera.position.set(150, 250, 300)
camera.lookAt(new Vector3(0, 0, 0))
this.scene.add(camera)

const light  = new DirectionalLight()
light.position.set(0, 20, 20)
this.camera.add(light)

THREE.MeshLambertMaterial(opt)

const textureLoader = new TextureLoader()

const texture = textureLoader.load(url)
new MeshBasicMaterial({
        map: texture,
        side: BackSide
})

var material = new THREE.MeshLambertMaterial({
color: 0xffff00
});
var geometry = new THREE.CubeGeometry(1, 2, 3);
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

const path = 'assets/image/'
    const format = '.jpg'
    const urls = [
      `${path}px${format}`, `${path}nx${format}`,
      `${path}py${format}`, `${path}ny${format}`,
      `${path}pz${format}`, `${path}nz${format}`
    ]
    const materials = []
    urls.forEach(url => {
      const textureLoader = new TextureLoader()
      const texture = textureLoader.load(url)
      materials.push(new MeshBasicMaterial({
        map: texture,
        overdraw: true,
        side: BackSide
      }))
    })
    const cube = new Mesh(new CubeGeometry(9000, 9000, 9000), new MeshFaceMaterial(materials))
    this.scene.add(cube)

let loader = new THREE.OBJLoader();

    loader.load('assets/chair.obj', obj => {
      obj.traverse(child=> {
        if (child instanceof Mesh) {
            child.material = new MeshLambertMaterial({
                side: DoubleSide
            })
            this.scene.add(child)
          }
        }
      })
    })

import initOrbitControls from 'three-orbit-controls'

const controls = this.controls = new OrbitControls(this.camera)
controls.maxPolarAngle = 1.5
controls.minPolarAngle = 0.5
controls.rotateSpeed = 5.0

animate() {
    window.requestAnimationFrame(this.animate)
    this.controls.update()
    this.render()
}

initPointSystem(geometry) {
    this.points = new Group()
    const vertices = []
    const texture = new TextureLoader().load('assets/image/dot.png')

    geometry.vertices.forEach((o, i) => {
      vertices.push(o.clone())

      const _geometry = new Geometry()
      const pos = vertices[i]
      _geometry.vertices.push(new Vector3())

      const color = new Color()
      color.r = Math.abs(Math.random() * 10)
      color.g = Math.abs(Math.random() * 10)
      color.b = Math.abs(Math.random() * 10)
      const material = new PointsMaterial({
        color,
        map: texture,
        blending: AddEquation,
        depthTest: false,
        transparent: true
      })

      let point = new Points(_geometry, material)
      point.position.copy(pos)
      this.points.add(point)
    })
    return this.points
}

this.raycaster = new Raycaster()

// 把你要监听点击事件的物体用数组储存起来
this.seats.push(seat)

onTouchStart(event) {
    event.preventDefault()
    event.clientX = event.touches[0].clientX;
    event.clientY = event.touches[0].clientY;
    this.onClick(event)
  }

  onClick(event) {
    const mouse = new Vector2()
    mouse.x = ( event.clientX / this.renderer.domElement.clientWidth ) * 2 - 1
    mouse.y = - ( event.clientY / this.renderer.domElement.clientHeight ) * 2 + 1;
    this.raycaster.setFromCamera(mouse, this.camera)
   // 检测命中的座位
    const intersects = this.raycaster.intersectObjects(this.seats)
    if (intersects.length > 0) {
        intersects[0].object.material = new MeshLambertMaterial({
            color: 0xff0000
        })
    }
  }
  

// 设置物体的质材为着色器质材
 let material = new ShaderMaterial({
        uniforms: uniforms,
        vertexShader: vertext,
        fragmentShader: fragment,
        transparent: true,
      })

const puppeteer = require('puppeteer');

const url = 'https://guofeng.yuedu.163.com/book_reader/9a766e4fd7694375be56f956e3cb9e4f_4/fa956a0a3892452a8b2905d81c48b41c_4';

puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.goto(url, {
        waitUntil: 'networkidle0'
    });
    const content = await page.content();
    console.log('content', content);
    await browser.close();
})

var redis = require("redis"),
    client = redis.createClient()


client.set("key", "value")

client.get("key")

client.expire("key", time)

app.get('*', function (req, res) {
  let queryParameters = req.query;
  let url = queryParameters.url;

  if(!url) {
    res.status(400).send('url required');
    return;
  }
  
  cache.get(url, function(err, result) {
    if (result) {
       res.status(200).send(result)
   }
   ....
})

  await page.setRequestInterception(true);
  page.on('request', request => {
            if (request.resourceType() === 'image' || request.resourceType() === 'stylesheet') {
              request.abort();
            }
            else {
              request.continue();
            }
 });

const genericPool = require('generic-pool');

 const factory = {
    create: () => puppeteer.launch(...puppeteerArgs).then(instance => {
      return instance
    }),
    destroy: (instance) => {
      instance.close()
    }
  };

const pool = genericPool.createPool(factory, opts);

// 使用资源
pool.acquire()

// 释放资源
pool.release(resource);
...

    const path = 'assets/image/'
    const format = '.jpg'
    const urls = [
      `${path}px${format}`, `${path}nx${format}`,
      `${path}py${format}`, `${path}ny${format}`,
      `${path}pz${format}`, `${path}nz${format}`
    ]
    const materials = []
    urls.forEach(url => {
      const textureLoader = new TextureLoader()
      textureLoader.setCrossOrigin(this.crossOrigin)
      const texture = textureLoader.load(url)
      materials.push(new MeshBasicMaterial({
        map: texture,
        overdraw: true,
        side: BackSide
      }))
    })
    const cube = new Mesh(new CubeGeometry(9000, 9000, 9000), new MeshFaceMaterial(materials))
    this.scene.add(cube)

this.points = new Group()
    const vertices = []
    let point
    const texture = new TextureLoader().load('assets/image/dot.png')
    geometry.vertices.forEach((o, i) => {
      // 记录每个点的位置
      vertices.push(o.clone())
      const _geometry = new Geometry()
     // 拿到当前点的位置
      const pos = vertices[i]
      _geometry.vertices.push(new Vector3())
      const color = new Color()
      color.r = Math.abs(Math.random() * 10)
      color.g = Math.abs(Math.random() * 10)
      color.b = Math.abs(Math.random() * 10)
      const material = new PointsMaterial({
        color,
        size: Math.random() * 4 + 2,
        map: texture,
        blending: AddEquation,
        depthTest: false,
        transparent: true
      })
      point = new Points(_geometry, material)
      point.position.copy(pos)
      this.points.add(point)
    })
    return this.points

this.raycaster = new Raycaster()

// 把你要监听点击事件的物体用数组储存起来
this.seats.push(seat)

onTouchStart(event) {
    event.preventDefault()
    event.clientX = event.touches[0].clientX;
    event.clientY = event.touches[0].clientY;
    this.onClick(event)
  }

  onClick(event) {
    const mouse = new Vector2()
    mouse.x = ( event.clientX / this.renderer.domElement.clientWidth ) * 2 - 1
    mouse.y = - ( event.clientY / this.renderer.domElement.clientHeight ) * 2 + 1;
    this.raycaster.setFromCamera(mouse, this.camera)
   // 检测命中的座位
    const intersects = this.raycaster.intersectObjects(this.seats)
    if (intersects.length > 0) {
        intersects[0].object.material = new MeshLambertMaterial({
            color: 0xff0000
        })
    }
  }
  

const vertext = `
   void main()
    {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
  `

const fragment = `
    uniform vec2 resolution;
    uniform float time;

    vec2 rand(vec2 pos)
    {
    return fract( 0.00005 * (pow(pos+2.0, pos.yx + 1.0) * 22222.0));
    }
    vec2 rand2(vec2 pos)
    {
    return rand(rand(pos));
    }

    float softnoise(vec2 pos, float scale)
    {
    vec2 smplpos = pos * scale;
    float c0 = rand2((floor(smplpos) + vec2(0.0, 0.0)) / scale).x;
    float c1 = rand2((floor(smplpos) + vec2(1.0, 0.0)) / scale).x;
    float c2 = rand2((floor(smplpos) + vec2(0.0, 1.0)) / scale).x;
    float c3 = rand2((floor(smplpos) + vec2(1.0, 1.0)) / scale).x;

    vec2 a = fract(smplpos);
    return mix(
    mix(c0, c1, smoothstep(0.0, 1.0, a.x)),
    mix(c2, c3, smoothstep(0.0, 1.0, a.x)),
    smoothstep(0.0, 1.0, a.y));
    }

    void main(void)
    {
    vec2 pos = gl_FragCoord.xy / resolution.y;
    pos.x += time * 0.1;
    float color = 0.0;
    float s = 1.0;
    for(int i = 0; i < 8; i++)
    {
    color += softnoise(pos+vec2(i)*0.02, s * 4.0) / s / 2.0;
    s *= 2.0;
    }
    gl_FragColor = vec4(color);
    }
  `
// 设置物体的质材为着色器质材
 let material = new ShaderMaterial({
        uniforms: uniforms,
        vertexShader: vertext,
        fragmentShader: fragment,
        transparent: true,
      })

 // 光晕效果必须设置alpha = true
 const renderer = this.renderer = new WebGLRenderer({alpha: true, antialias: true})

 let textureFlare = new TextureLoader().load('assets/image/lensflare0.png')
      let textureFlare3 = new TextureLoader().load('assets/image/lensflare3.png')
      let flareColor = new Color(0xffffff)
      let lensFlare = new LensFlare(textureFlare, 150, 0.0 , AdditiveBlending, flareColor)
      lensFlare.add(textureFlare3, 60, 0.6, AdditiveBlending);
      lensFlare.add(textureFlare3, 70, 0.7, AdditiveBlending);
      lensFlare.add(textureFlare3, 120, 0.9, AdditiveBlending);
      lensFlare.add(textureFlare3, 70, 1.0, AdditiveBlending);
      lensFlare.position.set(0, 150, -85)