/**
 * @param {number} hue - Hue as degrees 0..360
 * @param {number} sat - Saturation in reference range [0,100]
 * @param {number} light - Lightness in reference range [0,100]
 * @return {number[]} Array of RGB components 0..1
 */
function hslToRgb(hue, sat, light) {
  hue = hue % 360;

  if (hue < 0) {
    hue += 360;
  }

  sat /= 100;
  light /= 100;

  function f(n) {
    let k = (n + hue / 30) % 12;
    let a = sat * Math.min(light, 1 - light);
    return light - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
  }

  return [f(0), f(8), f(4)];
}

/**
 * @param {number} red - Red component 0..1
 * @param {number} green - Green component 0..1
 * @param {number} blue - Blue component 0..1
 * @return {number[]} Array of HSL values: Hue as degrees 0..360, Saturation and Lightness in reference range [0,100]
 */
function rgbToHsl(red, green, blue) {
  let max = Math.max(red, green, blue);
  let min = Math.min(red, green, blue);
  let [hue, sat, light] = [NaN, 0, (min + max) / 2];
  let d = max - min;

  if (d !== 0) {
    sat = light === 0 || light === 1 ? 0 : (max - light) / Math.min(light, 1 - light);

    switch (max) {
      case red:
        hue = (green - blue) / d + (green < blue ? 6 : 0);
        break;
      case green:
        hue = (blue - red) / d + 2;
        break;
      case blue:
        hue = (red - green) / d + 4;
    }

    hue = hue * 60;
  }

  return [hue, sat * 100, light * 100];
}

// module.js
const foo = () => {
  return new Promise(resolve => resolve(1));
};
export const bar = async () => {
  await foo();
};
export const far = (...rest) => {
  console.log(rest.map(item => item?.aa));
};

// index.js
import { bar, far } from './module';

function* gen() {
  const y1 = yield 1;
  return y1;
}
const bar1 = async () => {
  await far();
};
const p1 = (...rest) => {
  return new Promise(resolve => {
    resolve(...rest);
  });
};

// module.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.far = exports.bar = void 0;

require("regenerator-runtime/runtime.js");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

require("core-js/modules/es.array.map.js");

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

var foo = function foo() {
  ...
};

var bar = /*#__PURE__*/function () {
  ...
}();

exports.bar = bar;

var far = function far() {
  ...
};

exports.far = far;

// index.js
"use strict";

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

require("regenerator-runtime/runtime.js");

var _module = require("./module");

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

var _marked = /*#__PURE__*/regeneratorRuntime.mark(gen);

function gen() {
  ...
}

var bar1 = /*#__PURE__*/function () {
  ...
}();

var p1 = function p1() {
  ...
};

// module.js
"use strict";

var \_interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "\_\_esModule", {
value: true
});
exports.far = exports.bar = void 0;

var \_regenerator = \_interopRequireDefault(require("@babel/runtime/regenerator"));

var \_asyncToGenerator2 = \_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

require("core-js/modules/es.array.map.js");

var foo = function foo() {
...
};

var bar = /_#**PURE**_/function () {
...
}();

exports.bar = bar;

var far = function far() {
};

exports.far = far;

// index.js
"use strict";

var \_interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

require("core-js/modules/es.object.to-string.js");

require("core-js/modules/es.promise.js");

var \_asyncToGenerator2 = \_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var \_regenerator = \_interopRequireDefault(require("@babel/runtime/regenerator"));

var \_module = require("./module");

var \_marked = /_#**PURE**_/\_regenerator.default.mark(gen);

function gen() {
...
}

var bar1 = /_#**PURE**_/function () {
...
}();

var p1 = function p1() {
...
};

// module.js
"use strict";

var \_interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

Object.defineProperty(exports, "\_\_esModule", {
value: true
});
exports.far = exports.bar = void 0;

var \_regenerator = \_interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));

var \_asyncToGenerator2 = \_interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));

var \_promise = \_interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));

var \_map = \_interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));

var foo = function foo() {
return new \_promise.default(function (resolve) {
return resolve(1);
});
};

var bar = /_#**PURE**_/function () {
...
}();

exports.bar = bar;

var far = function far() {
...
};

exports.far = far;

// index.js
"use strict";

var \_interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");

var \_promise = \_interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));

var \_asyncToGenerator2 = \_interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));

var \_regenerator = \_interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));

var \_module = require("./module");

var \_marked = /_#**PURE**_/\_regenerator.default.mark(gen);

function gen() {
...
}

var bar1 = /_#**PURE**_/function () {
...
}();

var p1 = function p1() {
...
};

class ClassCount extends Component {
  state = {
    count: 0,
  };

  timer() {
    setTimeout(() => {
      console.log(`点击 3 秒后的 count: ${this.state.count}`);
    }, 3000);
  }

  render() {
    return (
      <button
        onClick={() => {
          this.setState({ count: this.state.count + 1 });
          this.timer();
        }}
      >
        class 组件点击了 {this.state.count} 次
      </button>
    );
  }
}

function FunctionCount() {
  const [count, setCount] = useState(0);

  const timer = () => {
    setTimeout(() => {
      // timer 打印的 count 永远是上一次 render 中的值
      console.log(`function 组件 3 秒后的 count: ${count}`);
    }, 3000);
  };

  return (
    <button
      onClick={() => {
        setCount(count + 1);
        timer();
      }}
    >
      function 组件点击了 {count} 次
    </button>
  );
}

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button
      onClick={() => {
        setCount(count + 1);
      }}
    >
      function 组件点击了 {count} 次
    </button>
  );
}

// react 第一次渲染时
function Counter() {
  const count = 0;
  return <div>{count}</div>;
}

// 点击触发 react 重新渲染，整个函数组件被重新调用了
function Counter() {
  const count = 1;
  return <div>{count}</div>;
}

// ...

function Counter() {
  const [count, setCount] = useState(0);

  function handleAlertClick() {
    setTimeout(() => {
      alert('You clicked on: ' + count);
    }, 3000);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={handleAlertClick}>Show alert</button>
    </div>
  );
}

//  react 第一次渲染
function Counter() {
	const count = 0;

  function handleAlertClick() {
    setTimeout(() => {
      // count === 0
      alert('You clicked on: ' + count);
    }, 3000);
  }

  return (...);
}

// 点击触发 react 重新渲染，整个函数组件被重新调用了
function Counter() {
	const count = 01;

  // 创建了新的 handleAlertClick
  function handleAlertClick() {
    setTimeout(() => {
      // count === 1
      alert('You clicked on: ' + count);
    }, 3000);
  }

  return (...);
}

// ...

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`useEffect 执行, count: ${count}`);
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

function Counter4() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      // count 永远是 0
      console.log('Counter4 setInterval', count);
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <h1>count: {count}</h1>;
}

function Counter5() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Counter5 useEffect');

    const id = setInterval(() => {
      // 每次都重新生成新的定时器
      console.log('Counter5 setInterval');
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(id);
  }, [count]);

  return <h1>count: {count}</h1>;
}

function Counter6() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Counter6 useEffect');

    const id = setInterval(() => {
      // 仅指定行为，不依赖具体的值
      console.log('Counter6 setInterval');
      setCount(c => c + 1);
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <h1>count: {count}</h1>;
}

import { render } from '../index';

// hooks 存放在这个数组
let memoizedState = [];
// 当前 memoizedState 下标
let cursor = 0;

export function useState(initialValue) {
  memoizedState[cursor] = memoizedState[cursor] || initialValue;

  const currentCursor = cursor;
  function setState(newState) {
    if (typeof newState === 'function') {
      memoizedState[currentCursor] = newState(memoizedState[currentCursor]);
    } else {
      memoizedState[currentCursor] = newState;
    }

    render();
    // 每更新一次都需要将_index归零，才不会不断重复增加 memoizedState
    cursor = 0;
  }

  // cursor 加 1
  cursor++;

  // 返回当前 state
  return [memoizedState[currentCursor], setState];
}

export function useEffect(callback, depArray) {
  const hasNoDeps = !depArray;
  const deps = memoizedState[cursor];
  const hasChangedDeps = deps ? !depArray.every((el, i) => el === deps[i]) : true;
  if (hasNoDeps || hasChangedDeps) {
    setTimeout(callback);
    memoizedState[cursor] = depArray;
  }
  cursor++;
}

// 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