Debbl

你好

Debbl

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符

Debbl

{
  "compilerOptions": {
    // 目标代码 esnext 是指 es6 以后
    // 交给 Babel　来转化　根据　browserslistrc
    "target": "esnext",
    // 目标代码使用的模块化方案 umd 支持多种模块化
    "module": "esnext",
    // 严格模式 'use strict'
    "strict": true,
    // 对 jsx 进行怎么样的处理 preserve 保持默认

Debbl

/**
 - https 代理
 - 用户名
 - 邮箱
 - 中文乱码
*/

https.proxy=http://127.0.0.1:10808
user.name=Debbl
user.email=me@aiwan.run

Debbl

const path = require('path');
const { merge } = require('webpack-merge');
const { DefinePlugin } = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

Debbl

// https://promisesaplus.com/


// 状态定义
const PROMISE_STATUS_PENDING = 'pending';
const PROMISE_STATUS_FULFILLED = 'fulfilled';
const PROMISE_STATUS_REJECTED = 'rejected';

class MYPromise {
  constructor(executor) {

Debbl

宏任务和微任务

宏任务队列（macrotask queue）

• ajax
• setTimeout
• setInterval
• DOM 监听
• UI Rendering 等

Debbl

CommonJS 模块化

导出

• 导出的是对象的引入，指向同一个对象
• exports={} 是错误的

module.exports = {};
exports.name = name;
// 重点 最终导出的一定的是 module.exports
exports = {} // 这个导出是错误的，exports 指向了其他的对象，无法修改 module.epxorts 所指向的对象
// 源码中

Debbl

function debounce(fn, delay) {
  // 定时器，保留上一个触发的定时器
  let timer = null;
  const _debounce = function () {
    // 没有达到延时，在次触发，清空上一次的定时器，不执行 fn
    if (timer) clearTimeout(timer);
    // 定时器
    timer = setTimeout(() => {
      fn();
    }, delay);

Debbl

1. 初始化

npm init

2. git 初始化

git init

3. 安装 React 和 ReactDOM