// a.js
const a = {
    x: 1
}
module.exports = a

// b.js
const b = {
    x: 1
}
export default b

// c.js
export default {
    x: 1
}

// d.js
const d = {
    x: 1
}
export { d }

// index.js
import b from './b'
import c from './c'
import { d } from './d'
const a = require('./a')

console.log('a:', a)
console.log('b:', b)
console.log('c:', c)
console.log('d:', d)

(function (modules) {
  // 代码模块缓存, 将执行过的代码模块缓存起来
  var installedModules = {};

  // 实现模块化代码的主要函数, 通过以文件名为模块id(moduleId)递归调用
  function __webpack_require__(moduleId) {
    // 若模块已缓存, 则直接调用
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 创建新的模块代码, 并把模块缓存
    var module = (installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {},
    });

    // 执行对应模块id的代码, 并将模块对象和方法绑定到当前module上
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    // 将模块已加载标识置为true
    module.l = true;

    // 返回模块对外暴露方法
    return module.exports;
  }

  // 模块化处理函数： 用于 export { aaa, bbb } , import { aaa } from './*
  __webpack_require__.d = function (exports, name, getter) {
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

  // 挂载 _esModule 属性到 exports 上
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };

  // 封装了 Object.prototype.hasOwnProperty.call
  __webpack_require__.o = function (object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };

  // 代码启动, 传入入口文件的模块id
  return __webpack_require__((__webpack_require__.s = './src/index.js'));
})({
  './src/a.js': function (module, exports) {
    /**
     * commonjs 模块
     * 直接将导出的对象赋值为 module.exports
     */
    eval('const a = {\n    x: 1\n}\n\nmodule.exports = a\n\n//# sourceURL=webpack:///./src/a.js?');
  },

  './src/b.js': function (module, __webpack_exports__, __webpack_require__) {
    /**
     * es6 默认导出模块 export default
     * 会在 module.exports 属性挂载属性 _esModule = true
     * 然后将导出对象挂载到 module.exports.default 上
     */
    'use strict';
    eval(
      '__webpack_require__.r(__webpack_exports__);\nconst b = {\n    x: 1\n}\n\n/* harmony default export */ __webpack_exports__["default"] = (b);\n\n//# sourceURL=webpack:///./src/b.js?'
    );
  },

  './src/c.js': function (module, __webpack_exports__, __webpack_require__) {
    /**
     * es6 模块
     * 同 模块b
     */
    'use strict';
    eval(
      '__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ __webpack_exports__["default"] = ({\n    x: 1\n});\n\n//# sourceURL=webpack:///./src/c.js?'
    );
  },

  './src/d.js': function (module, __webpack_exports__, __webpack_require__) {
    /**
     * es6 命名导出模块 export const d = {}
     * 会在 module.exports 属性挂载属性 _esModule = true
     * 通过 getter 在访问 module.exports[name] 时返回导出对象
     */
    'use strict';
    eval(
      '__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return d; });\nconst d = {\n    x: 1\n}\n\n\n\n//# sourceURL=webpack:///./src/d.js?'
    );
  },

  './src/index.js': function (module, __webpack_exports__, __webpack_require__) {
    /**
     * 入口文件
     * 通过 _webpack_require__() 得到导入对象，即 编译后的 module.exports 属性
     * 对不同的模块化方式做不同的引入处理
     */
    'use strict';
    eval(
      '__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./b */ "./src/b.js");\n/* harmony import */ var _c__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./c */ "./src/c.js");\n/* harmony import */ var _d__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./d */ "./src/d.js");\n\n\n\nconst a = __webpack_require__(/*! ./a */ "./src/a.js")\n\nconsole.log(\'a\', a)\nconsole.log(\'b\', _b__WEBPACK_IMPORTED_MODULE_0__["default"], _b__WEBPACK_IMPORTED_MODULE_0__)\nconsole.log(\'c\', _c__WEBPACK_IMPORTED_MODULE_1__["default"], _c__WEBPACK_IMPORTED_MODULE_1__)\nconsole.log(\'d\', _d__WEBPACK_IMPORTED_MODULE_2__["d"], _d__WEBPACK_IMPORTED_MODULE_2__)\n\n//# sourceURL=webpack:///./src/index.js?'
    );
  },
});

读取文件;
const fs = require('fs');

// 异步读取
fs.readFile('./index.txt', 'utf8', (err, data) => {
  console.log(data); //  Hello Nodejs
});

// 同步读取
const data = fs.readFileSync('./index.txt', 'utf8');

console.log(data); //  Hello Nodejs

// 创建读取流
const stream = fs.createReadStream('./index.txt', 'utf8');

// 这里fs.createReadStream用到了前面介绍的events eventEmitter.on() 方法来监听事件
stream.on('data', data => {
  console.log(data); // Hello Nodejs
});

const fs = require('fs');
// 异步写入
fs.writeFile('./write.txt', 'Hello Nodejs', 'utf8', err => {
  if (err) throw err;
});
// 同步写入
fs.writeFileSync('./writeSync.txt', 'Hello Nodejs');
// 文件流写入
const ws = fs.createWriteStream('./writeStream.txt', 'utf8');
ws.write('Hello Nodejs');
ws.end();

// 异步删除文件
fs.unlink('./delete.txt', err => {
  if (err) throw err;
});

// 同步删除文件
fs.unlinkSync('./deleteSync.txt');
删除文件夹;
// 异步删除文件夹
fs.rmdir('./rmdir', err => {
  if (err) throw err;
});

// 同步删除文件夹
fs.rmdirSync('./rmdirSync');
创建文件夹;
// 异步创建文件夹
fs.mkdir('./mkdir', err => {
  if (err) throw err;
});

// 同步创建文件夹
fs.mkdirSync('./mkdirSync');
重命名文件 / 文件夹;
const fs = require('fs');

// 异步重命名文件
fs.rename('./rename.txt', './rename-r.txt', err => {
  if (err) throw err;
});

// 同步重命名文件夹
fs.renameSync('./renameSync', './renameSync-r');
复制文件 / 文件夹;
const fs = require('fs');

// 异步复制文件
fs.copyFile('./copy.txt', './copy-c.txt', (err, copyFiles) => {
  if (err) throw err;
});

// 同步复制文件夹
fs.copyFileSync('./null', 'null-c');
文件夹状态 - 文件 / 文件夹;
const fs = require('fs');

// 异步获取文件状态
fs.stat('./dir', (err, stats) => {
  if (err) throw err;
  // 是否是文件类型
  console.log(stats.isFile()); // false
  // 是否是文件夹类型
  console.log(stats.isDirectory()); // true
});

// 同步获取文件状态
const stats = fs.statSync('./stats.txt');

// 是否是文件类型
console.log(stats.isFile()); // true
// 是否是文件夹类型
console.log(stats.isDirectory()); // false

let util = require('util')
let EventEmitter = require('events')

function OtherClass(path) {
  EventEmitter.call(this)
}
util.inherits(OtherClass, EventEmitter)
newListener 事件
EventEmitter 实例还可以监听一个 newListener 事件，即每次给这个实例添加新的监听函数时，都会触发 newListener 事件。

this.on('newListener', function (type, listener) {
  // 每当监听一个事件时，就执行某些行为
})

const file = fs.createReadStream('./test.txt', {
  highWaterMark: 2,
  flags: 'r',
  encoding: 'utf8',
});

file.on('open', a => {
  console.log('open', a);
});

file.on('data', chunk => {
  console.log('data', chunk);
});

file.on('end', chunk => {
  console.log('end', chunk);
});

file.on('close', a => {
  console.log('close', a);
});
// open -> data -> data -> ... -> end -> close

const url = require("url");

const myURL = new url("https://github.com/webfansplz#hello");
console.log(myURL);
{
  href: 'https://github.com/webfansplz#hello',  // 序列化的 URL
  origin: 'https://github.com', // 序列化的 URL 的 origin
  protocol: 'https:', // URL 的协议
  username: '', // URL 的用户名
  password: '', //  URL 的密码
  host: 'github.com', // URL 的主机
  hostname: 'github.com',   // URL 的主机名
  port: '',  // URL 的端口
  pathname: '/webfansplz',  // URL 的路径
  search: '', // URL 的序列化查询参数
  searchParams: URLSearchParams {}, //  URL 查询参数的 URLSearchParams 对象
  hash: '#hello'  // URL 的片段
}

const { URL } = require('url');

const myURL = new URL('https://github.com/webfansplz#hello');

console.log(myURL.href); // https://github.com/webfansplz#hello

console.log(myURL.toString()); // https://github.com/webfansplz#hello

console.log(myURL.toJSON()); // https://github.com/webfansplz#hello

// node mongodb 版本 v3.1.13 适用
const MongoClient = require('mongodb').MongoClient;
const log = console.log.bind(console);

class Dao {
  /**
   * 构造函数
   * @param {string} url
   * @param {string} dbname
   * @param {string} colname
   */
  constructor(url, dbname, colname) {
    this.url = url;
    this.dbname = dbname;
    this.colname = colname;
  }

  /**
   * 连接数据库
   */
  _connect() {
    return new Promise((resolve, reject) => {
      MongoClient.connect(this.url, { useNewUrlParser: true }, (err, client) => {
        if (err) {
          reject(err);
        } else {
          resolve(client);
        }
      });
    });
  }

  /**
   * 插入文档
   * @param {arr || object} documents
   * @param {boolean} insertMany
   * 使用 insertMany(arr), 在 arr === [] 时，会报错
   */
  insert(documents, insertMany = false) {
    return new Promise((resolve, reject) => {
      this._connect()
        .then(client => {
          let col = client.db(this.dbname).collection(this.colname);
          if (insertMany) {
            col
              .insertMany(documents)
              .then(res => {
                resolve(res);
              })
              .catch(err => {
                log(err);
              });
            client.close();
          } else {
            col
              .insertOne(documents)
              .then(res => {
                resolve(res);
              })
              .catch(err => {
                log(err);
              });
            client.close();
          }
        })
        .catch(err => {
          reject(err);
        });
    });
  }

  /**
   * 查询
   * @param {object} document
   */
  query(document, pageConfig) {
    document = document || {};
    pageConfig = pageConfig || {};
    let page = pageConfig.page;
    let amount = pageConfig.amount;
    const resData = [];

    return new Promise((resolve, reject) => {
      this._connect()
        .then(client => {
          let col = client.db(this.dbname).collection(this.colname);
          let cursor = col
            .find(document)
            .limit(amount)
            .skip((page - 1) * amount);
          cursor.each((err, data) => {
            if (err) {
              reject(err);
              client.close();
            } else if (data !== null) {
              resData.push(data);
            } else {
              resolve(resData);
              client.close();
            }
          });
        })
        .catch(err => {
          log(err);
        });
    });
  }

  /**
   * 删除集合中的数据
   * @param {object} query
   * @param {boolean} deleteMany
   */
  delete(query, deleteMany = false) {
    return new Promise((resolve, reject) => {
      this._connect()
        .then(client => {
          let col = client.db(this.dbname).collection(this.colname);
          if (deleteMany) {
            col.deleteMany(query).then(res => {
              resolve(res);
              client.close();
            });
          } else {
            col.deleteOne(query).then(res => {
              resolve(res);
              client.close();
            });
          }
        })
        .catch(err => {
          log(err);
        });
    });
  }

  /**
   * 更新
   * @param {obj} filter
   * @param {obj} updater
   */
  update(filter, updater) {
    let uptaterCpy = { $set: updater };

    return new Promise((resolve, reject) => {
      this._connect()
        .then(client => {
          let col = client.db(this.dbname).collection(this.colname);
          col.updateMany(filter, uptaterCpy).then(res => {
            resolve(res);
            client.close();
          });
        })
        .catch(err => {
          log(err);
        });
    });
  }
}

//
let url = 'mongodb://localhost:27017';
let dbname = 'test';
let colname = 'user';
let dao = new Dao(url, dbname, colname);

let arr = [];
for (let i = 0; i < 20; i++) {
  arr.push({
    userid: '234',
    age: i,
  });
}

interface IAnimal {
  name: string;
}

type Animal = {
  name: string,
};

interface IAnimal<p = string> {
  name: p;
}

type Animal<p = string> = {
  name: p,
};

type Robot = {
  power: number,
};

interface IRobot {
  name: string;
}

interface IRobotAnimal1 extends IAnimal, IRobot {}
interface IRobotAnimal2 extends IAnimal, Robot {}
interface IRobotAnimal3 extends Animal, IRobot {}
interface IRobotAnimal4 extends Animal, Robot {}

type RobotAnimal1 = IAnimal & IRobot;
type RobotAnimal2 = IAnimal & Robot;
type RobotAnimal3 = Animal & IRobot;
type RobotAnimal4 = Animal & Robot;

class Dog implements IAnimal {
  name: string = 'doge';
}

class Cat implements Animal {
  name: string = 'cat cat';
}

class Control {
  private state: any;
}

interface ISelectableControl extends Control {
  select(): void;
}

type SelectableControl = Control & {
  select(): () => void;
};

type Bark = (x: string) => void;

interface IBark {
  (x: string): void;
}

// 函数 泛型
type Bark1 = <T = Animal>(x: T) => void;

interface IBark1 {
  <T = Animal>(x: T): void;
}

type Tree<P> = {
  node: P,
  leafs: Tree<P>[],
};

interface ITree<P> {
  node: P;
  leafs: Tree<P>[];
}

type StringRecord = {
  [index: string]: number,
};

interface IStringRecord {
  [index: string]: number;
}

type NewNumber = number;

interface INewNumber extends number {}
// 'number' only refers to a type, but is being used as a value here.

interface INewNumber extends Number {}
// 这样写是可以的，但是不要忘记 1 instanceof Number === false

type Tuples = [number, number];

interface ITuples {
  0: number;
  1: number;
}

[1, 2, 3] as Tuples;
// Conversion of type '[number, number, number]' to type 'Tuples' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Types of property 'length' are incompatible.

[1, 2, 3] as ITuples;

type SomeAnimal = { type: Dog } | { type: Cat }；

interface ISomeAnimal extends SomeAnimal {}
// An interface can only extend an object type or intersection of object types with statically known members

type Once = { a: string };
type Once = { b: string };
// Duplicate identifier 'Once'

interface IOnce {
  a: string;
}
interface IOnce {
  b: string;
}

const MyComponent: React.FC<Props> = function(p) {...}

class MyComponent extends React.Component<Props, State> { ...

const withState = <P extends WrappedComponentProps>(
      WrappedComponent: React.ComponentType<P>,
    ) => { ...

type MyComponentProps = React.ComponentProps<typeof MyComponent>;

// generator 函数
function* foo() {
  let response1 = yield fetch('http://back.avatar.movie.test.sankuai.com/');
  console.log('response1');
  console.log(response1);
  let response2 = yield fetch('http://back.avatar.movie.test.sankuai.com/');
  console.log('response2');
  console.log(response2);
}

// 执行 foo 函数的代码
let gen = foo();
function getGenPromise(gen) {
  return gen.next().value;
}
getGenPromise(gen)
  .then(response => {
    console.log('response1');
    console.log(response);
    return getGenPromise(gen);
  })
  .then(response => {
    console.log('response2');
    console.log(response);
  });

function co(gen) {
  if (typeof gen === 'function') gen = gen.apply(ctx, args);
  onFulfilled();

  function onFulfilled(res) {
    var ret;
    try {
      ret = gen.next(res);
    } catch (e) {
      return reject(e);
    }
    next(ret);
  }
  function next(ret) {
    if (ret.done) return resolve(ret.value);
    var value = toPromise.call(ctx, ret.value);
    if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
    return onRejected(
      new TypeError(
        'You may only yield a function, promise, generator, array, or object, ' +
          'but the following object was passed: "' +
          String(ret.value) +
          '"'
      )
    );
  }
}

if (value && isPromise(value)) {
  return value.then(onFulfilled, onRejected);
}

async function foo() {
  return 2;
}
// async 函数返回一个 promise
console.log(foo()); // Promise {<resolved>: 2}

async function foo() {
  console.log(1);
  let a = await 100;
  console.log(a);
  console.log(2);
}
console.log(0);
foo();
console.log(3);

let promise_ = new Promise((resolve,reject){
  resolve(100)
})

promise_.then(value => {
  // 回调函数被激活后
  // 将主线程控制权交给 foo 协程，并将 vaule 值传给协程
});

/**
 * 执行 generator function 或者 generator,
 * 返回一个 Promise
 * @param {Function} fn
 * @return {Promise}
 * @api public
 */

function co(gen) {
  var ctx = this;
  var args = slice.call(arguments, 1);

  // we wrap everything in a promise to avoid promise chaining,
  // 把传进来的所有东西都转为 promise
  // which leads to memory leak errors.
  // see https://github.com/tj/co/issues/180
  return new Promise(function (resolve, reject) {
    // 执行 gen 函数
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    // gen函数返回的 gen 指针不存在或  gen.next 不是函数(意味着 gen 不是 Generator函数) 则返回空值
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    onFulfilled();

    /**
     * @param {Mixed} res
     * @return {Promise}
     * @api private
     * 把每次 yield 之后的异步函数的返回结果当做参数传回 generator 函数
     * eg. let a = yeild b
     * 此时经过 onFulfilled 函数的处理 a === b()
     */
    function onFulfilled(res) {
      var ret;
      try {
        /**
         * gen.next(res),则是向generator函数传参数，作为yield的返回值
         * ret 是 gen.next() 返回的对象
         * ---
         * yield 语句本身没有返回值，或者说总是返回undefined。
         * next方法可以带一个参数，该参数就会被当作上一个yield语句的返回值。
         */
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      // 每完成一次 yield，把返回的对象交给 next() 处理
      next(ret);
    }

    /**
     * @param {Error} err
     * @return {Promise}
     * @api private
     */
    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }

    /**
     * Get the next value in the generator,
     * return a promise.
     * 把 gen.next() 返回对象中的 value 变为 promise
     *
     * @param {Object} ret
     * @return {Promise}
     * @api private
     */

    function next(ret) {
      /**
       * 如果这个generator函数完成了，返回最终的值
       * 假设我们写的 generator函数没有 return someValue, 在所有yield完成后，调用next()会返回{valu: undefined, done: true}
       * 所以需要手动return一个值。这样最后的value才不是undefined
       */
      if (ret.done) return resolve(ret.value);
      // 这个generator函数还没结束， 就统一交给 toPromise() 处理
      var value = toPromise.call(ctx, ret.value);
      // 这里value.then(onFulfilled, onRejected)，实际上已经调用并传入了 onFulfilled, onRejected 两个参数。
      //  把 onFulfilled 函数传入 value
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      return onRejected(
        new TypeError(
          'You may only yield a function, promise, generator, array, or object, ' +
            'but the following object was passed: "' +
            String(ret.value) +
            '"'
        )
      );
    }
  });
}

function Button() {
  const [count, setCount] = useState(0);
  return <button onClick={setCount(count + 1)}>+1</button>;
}

// 创建一个 context 对象
const ctxDep = {name: '王花花'}
const Ctx = React.creatContext(ctxDep)
// 在组件中使用
function App() {
  return (
    // 下级组件使用 useContext 获取的值是 ctxDep.name
    <Ctx.Provider value={ctxDep.name}>
        <Sub />
        <Sub2 />
    </Ctx.Provider>
  )
}
function Sub() {
  // useContext 获取的是距离当前组件最近的 <MyContext.Provider> 的 value prop 。
  // 此处的就是 ctxDep.name
  const name = useContext(Ctx)
  return (
    <div>name: {name}</div>
  )
}
function Sub2() {
    const name = useContext(Ctx)
  ...
}

useEffect(() => {
  // Async Action
}, [dependencies]);

useEffect(() => {
  ...
  return function cleanFun() {
    ...
  }
}, [])

const [state, dispatch] = useReducer(reducer, initialState);

const initialState = 1;
// init 是函数，返回 {count: 1}
const [state, dispatch] = useReducer(reducerCount, initialState, init);

const memoizedValue = useMemo(() => dosomething(a, b), [a, b]);

// 仅当 count 的值发生改变时，memoCallback 才触发组件重新渲染
function Foo() {
  const [count, setCount] = useState(0);
  const memoizedHandleClick = useCallback(() => console.log(`点击: ${count}`), [count]);
  return <Button onClick={memoizedHandleClick}>Click Me</Button>;
}

const refContainer = useRef(initialValue);
return (
  // 此时 refContainer.current 指向下面这个 button
  <button ref={refContainer}></button>
);

// 把这个 div 保存到 this 上
<div ref={div => (this.div = div)}></div>

// 在 constructor 中声明
this.third = React.createRef();
// 在 render 函数中:
<input type="text" defaultValue="Third" ref={this.third} />;
// 获取 ref
this.third.current;

// 在 render 函数里面
<input type="text" defaultValue="First" ref="first" />;
// 获取 ref
this.refs.first;

render() {
    return (
      <Card>
          <Test />
      </Card>
    )
  }
  // Card 组件中能通过 this.props.children 获取到 <Test />

class a extends Component {
    static propTypes = {
      username: PropTypes.string.isRequired,
      ...
      PropTypes.array
      PropTypes.bool
      PropTypes.func
      PropTypes.number
      PropTypes.object
      PropTypes.string
      PropTypes.node
      PropTypes.element
    }
  }