const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  )
}

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30
    }
  }
}

window.addEventListener('load', () => {
  const timing = performance.timing
  const firstPaint = timing.domContentLoadedEventEnd - timing.navigationStart
  console.log('首屏时间：', firstPaint)
})

const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  optimization: {
    // 开启压缩
    minimize: true, // 压缩⼯具
    minimizer: [new TerserPlugin({})]
  }
}

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 提取成单独的⽂件
          MiniCssExtractPlugin.loader,
          'css-loader'
        ],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 定义输出⽂件名和⽬录
      filename: 'asset/css/main.css'
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      // 压缩 cssnew CssMinimizerPlugin({}),
    ]
  }
}

module.export = {
  plugins: [
    new HtmlWebpackPlugin({
      // 动态⽣成 html ⽂件
      template: './index.html',
      minify: {
        // 压缩HTML
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空⽩符与换⾏符
        minifyCSS: true // 压缩内联css
      }
    })
  ]
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg|webp|svg)$/,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true
              },
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: [0.65, 0.9],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              }
            }
          }
        ],
        exclude: /node_modules/ //排除 node_modules ⽬录
      }
    ]
  }
}

module.exports = {
  //⽅式1
  mode: 'production',
  //⽅式2
  plugins: [
    // 开启 Scope Hoisting 功能new
    webpack.optimize.ModuleConcatenationPlugin()
  ]
}

const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
  plugins: [new CompressionWebpackPlugin()]
}

const path = require('path')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob') // ⽂件匹配模式module.exports = {//...
plugins: [
  ...new PurgeCSSPlugin({
    paths: glob.sync(`${PATH.src}/**/*`, { nodir: true })
  })
  // Add your plugins here// Learn more about plugins from https://webpack.js.org/configuration/plugins/
]

function formatNumber(num) {
  // 将数字转换为字符串
  let numStr = num.toString()

  // 使用正则表达式进行替换
  let formattedStr = numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  // \/B表示非单词边界，(?=(\d{3})+(?!\d))表示匹配非单词边界的数字，然后匹配三个数字，然后匹配非数字。

  return formattedStr
}

// 测试
console.log(formatNumber(1000)) // 输出: 1,000
console.log(formatNumber(1234567)) // 输出: 1,234,567
console.log(formatNumber(9876543210)) // 输出: 9,876,543,210

class MyPromise {
  constructor(executor) {
    this.state = 'pending' // 初始状态
    this.value = undefined // 成功值
    this.reason = undefined // 失败原因
    this.onFulfilledCallbacks = [] // 成功回调队列
    this.onRejectedCallbacks = [] // 失败回调队列

    const resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled'
        this.value = value
        this.onFulfilledCallbacks.forEach(callback => callback())
      }
    }

    const reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.reason = reason
        this.onRejectedCallbacks.forEach(callback => callback())
      }
    }

    try {
      executor(resolve, reject)
    } catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value
    onRejected =
      typeof onRejected === 'function'
        ? onRejected
        : reason => {
            throw reason
          }

    const promise2 = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const x = onFulfilled(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const x = onRejected(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)
      } else if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onFulfilled(this.value)
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              reject(error)
            }
          }, 0)
        })

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const x = onRejected(this.reason)
              resolvePromise(promise2, x, resolve, reject)
            } catch (error) {
              reject(error)
            }
          }, 0)
        })
      }
    })

    return promise2
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'))
  }

  let called = false
  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      const then = x.then
      if (typeof then === 'function') {
        then.call(
          x,
          y => {
            if (called) return
            called = true
            resolvePromise(promise2, y, resolve, reject)
          },
          r => {
            if (called) return
            called = true
            reject(r)
          }
        )
      } else {
        resolve(x)
      }
    } catch (error) {
      if (called) return
      called = true
      reject(error)
    }
  } else {
    resolve(x)
  }
}

// 使用示例
const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success')
  }, 1000)
})

promise
  .then(value => {
    console.log(value) // 输出: 'Success'
    return 'Next success'
  })
  .then(value => {
    console.log(value) // 输出: 'Next success'
  })
  .catch(error => {
    console.error(error)
  })

Promise.myAll = function (promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      return reject(new TypeError('Argument must be an array'))
    }

    let resolvedCount = 0
    const results = new Array(promises.length)

    promises.forEach((promise, index) => {
      Promise.resolve(promise).then(
        value => {
          results[index] = value
          resolvedCount += 1
          if (resolvedCount === promises.length) {
            resolve(results)
          }
        },
        error => {
          reject(error)
        }
      )
    })
  })
}

// 使用示例
const promise1 = Promise.resolve(3)
const promise2 = 42
const promise3 = new Promise(resolve => setTimeout(resolve, 100, 'foo'))

Promise.myAll([promise1, promise2, promise3])
  .then(values => {
    console.log(values) // 输出: [3, 42, 'foo']
  })
  .catch(error => {
    console.error(error)
  })

Promise.myRace = function (promises) {
  return new Promise((resolve, reject) => {
    for (let promise of promises) {
      Promise.resolve(promise).then(resolve, reject)
    }
  })
}

// 使用示例
const promise1 = new Promise(resolve => setTimeout(resolve, 500, 'one'))
const promise2 = new Promise(resolve => setTimeout(resolve, 100, 'two'))

Promise.myRace([promise1, promise2])
  .then(value => {
    console.log(value) // 输出: 'two'
  })
  .catch(error => {
    console.error(error)
  })

document.addEventListener('DOMContentLoaded', function () {
  const lazyImages = document.querySelectorAll('.lazy')

  if ('IntersectionObserver' in window) {
    const lazyImageObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const lazyImage = entry.target
          lazyImage.src = lazyImage.getAttribute('data-src')
          lazyImage.removeAttribute('data-src')
          lazyImage.classList.remove('lazy')
          observer.unobserve(lazyImage)
        }
      })
    })

    lazyImages.forEach(image => {
      lazyImageObserver.observe(image)
    })
  } else {
    // 在不支持 IntersectionObserver 的浏览器中
    function debounce(func, delay) {
      let timeoutId

      return function (...args) {
        // 清除之前的定时器
        if (timeoutId) {
          clearTimeout(timeoutId)
        }

        // 设置一个新的定时器
        timeoutId = setTimeout(() => {
          func.apply(this, args)
        }, delay)
      }
    }
    const lazyLoad = debounce(() => {
      lazyImages.forEach(image => {
        if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {
          image.src = image.getAttribute('data-src')
          image.removeAttribute('data-src')
          image.classList.remove('lazy')
        }
      })

      if (lazyImages.length === 0) {
        document.removeEventListener('scroll', lazyLoad)
        window.removeEventListener('resize', lazyLoad)
        window.removeEventListener('orientationchange', lazyLoad)
      }
    })

    document.addEventListener('scroll', lazyLoad)
    window.addEventListener('resize', lazyLoad)
    window.addEventListener('orientationchange', lazyLoad)
  }
})

function customSetInterval(callback, interval) {
  function intervalFunction() {
    callback()
    setTimeout(intervalFunction, interval)
  }
  setTimeout(intervalFunction, interval)
}

// 使用 customSetInterval 模拟 setInterval
customSetInterval(() => {
  console.log('模拟的 setInterval，定时任务执行中...')
}, 1000)

function render(template, data) {
  return template.replace(/{{(.*?)}}/g, (match, key) => {
    // 去除键的前后空格
    key = key.trim()
    // 查找数据中是否有对应的值，如果没有则返回 'undefined'
    return key in data ? data[key] : 'undefined'
  })
}

// 示例
let template = '我是{{name}}，年龄{{age}}，性别{{sex}}'
let data = {
  name: '姓名',
  age: 18
}

console.log(render(template, data)) // 输出：我是姓名，年龄18，性别undefined

// 下划线转驼峰
function snakeToCamel(snakeStr) {
  return snakeStr.replace(/(_\w)/g, match => {
    return match[1].toUpperCase()
  })
}

// 驼峰转下划线
function camelToSnake(camelStr) {
  return camelStr.replace(/([A-Z])/g, match => {
    return '_' + match.toLowerCase()
  })
}

// 测试
console.log(snakeToCamel('hello_world_example')) // 输出: helloWorldExample
console.log(camelToSnake('helloWorldExample')) // 输出: hello_world_example

function ajaxRequest(url, method = 'GET', data = null) {
  // xhr：open,onreadystatechange,send error
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open(method, url, true)

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        // 请求完成
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.responseText) // 请求成功，解析响应数据
        } else {
          reject(new Error(`Request failed with status code ${xhr.status}`)) // 请求失败，返回错误信息
        }
      }
    }

    xhr.onerror = function () {
      reject(new Error('Network error')) // 网络错误
    }

    if (method === 'POST' && data) {
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(JSON.stringify(data)) // 发送 POST 请求数据
    } else {
      xhr.send() // 发送 GET 请求
    }
  })
}

// 使用示例
const url = 'https://jsonplaceholder.typicode.com/posts'
const data = {
  title: 'foo',
  body: 'bar',
  userId: 1
}

ajaxRequest(url, 'POST', data)
  .then(response => {
    console.log('Success:', response)
  })
  .catch(error => {
    console.error('Error:', error)
  })

const arr = [1, [2, [3, [4, 5]]]]
const flattenedArr = arr.flat(Infinity)
console.log(flattenedArr) // 输出: [1, 2, 3, 4, 5]

function flattenArray(arr) {
  return arr.reduce((acc, val) => (Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val)), [])
}

const arr = [1, [2, [3, [4, 5]]]]
const flattenedArr = flattenArray(arr)
console.log(flattenedArr) // 输出: [1, 2, 3, 4, 5]

function flattenArray(arr) {
  const stack = [...arr]
  const result = []

  while (stack.length) {
    const next = stack.pop()
    if (Array.isArray(next)) {
      stack.push(...next) // 压回到堆栈中
    } else {
      result.push(next)
    }
  }

  return result.reverse() // 因为堆栈是 LIFO 结构，需要反转结果数组
}

const arr = [1, [2, [3, [4, 5]]]]
const flattenedArr = flattenArray(arr)
console.log(flattenedArr) // 输出: [1, 2, 3, 4, 5]

function myNew(constructor, ...args) {
  // 1. 创建一个空的简单 JavaScript 对象
  const obj = {}

  // 2. 将这个空对象的原型指向构造函数的 prototype 属性
  Object.setPrototypeOf(obj, constructor.prototype)

  // 3. 将这个空对象作为 this 的上下文执行构造函数
  const result = constructor.apply(obj, args)

  // 4. 如果构造函数返回一个对象，则返回该对象；否则，返回这个新创建的对象
  return result !== null && (typeof result === 'object' || typeof result === 'function') ? result : obj
}

// 测试
function Person(name, age) {
  this.name = name
  this.age = age
}

const person = myNew(Person, 'Yupi', 18)
console.log(person) // 输出: Person { name: 'Yupi', age: 18 }
console.log(person instanceof Person) // 输出: true

function hasCircularReference(obj) {
  // 使用 Set 记录访问过的对象
  const seenObjects = new Set() // const seenObjects = new WeakSet()

  function detect(obj) {
    // 如果 obj 不是对象或为 null，直接返回 false
    if (obj === null || typeof obj !== 'object') {
      return false
    }

    // 如果对象已经在 Set 中，说明存在循环引用
    if (seenObjects.has(obj)) {
      return true
    }

    // 将对象加入 Set
    seenObjects.add(obj)

    // 递归检查对象的每个属性
    for (let key in obj) {
      if (obj.hasOwnProperty(key) && detect(obj[key])) {
        return true
      }
    }

    // 检查完毕后，将对象从 Set 中移除
    seenObjects.delete(obj) // 如果使用的 WeakSet，则这句代码不用添加

    return false
  }

  return detect(obj)
}

// 测试
const obj1 = {}
obj1.a = obj1 // 循环引用
console.log(hasCircularReference(obj1)) //  true

const obj2 = { a: 1, b: { c: 2 } }
console.log(hasCircularReference(obj2)) //  false

const obj3 = { a: 1 }
obj3.b = obj3 // 循环引用
console.log(hasCircularReference(obj3)) //  true

function formatDate(date, format) {
  // 获取日期的各个部分
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0') // 月份从0开始，需要加1
  const day = date.getDate().toString().padStart(2, '0')
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  const seconds = date.getSeconds().toString().padStart(2, '0')

  // 定义格式化规则
  const formatMap = {
    YYYY: year,
    MM: month,
    DD: day,
    HH: hours,
    mm: minutes,
    ss: seconds
  }

  // 替换格式字符串中的占位符
  return format.replace(/YYYY|MM|DD|HH|mm|ss/g, match => formatMap[match])
}

// 测试
const date = new Date()
console.log(formatDate(date, 'YYYY-MM-DD')) // 输出: 2024-08-13
console.log(formatDate(date, 'MM/DD/YYYY')) // 输出: 08/13/2024
console.log(formatDate(date, 'DD-MM-YYYY HH:mm:ss')) // 输出: 13-08-2024 22:29:29