js

window.location 没有 query 属性，只有 search 属性

可以通过 js 的 URLSearchParams 来解析 search 参数。注意不能解析 hash 后面的参数，如果想解析，那么就先获取 window.hash.slice(2) 的部分，再使用。

const searchParams = new URLSearchParams(window.location.search);
const query = searchParams.get('q');  // 获取参数 q 的值
const page = searchParams.get('page');  // 获取参数 page 的值

window.loaction.search 是路径后面紧跟着？及后面键值对的字符串。

JS 生成二维码

https://github.com/davidshimjs/qrcodejs

JS 媒体查询

主要使用 API：

// 媒体查询，系统是否使用深色主题？（return boolean）
// 类似还有当前浏览器窗口是否小于 780px？还是小于 560px？
const query = window.matchMedia(`(prefers-color-scheme: dark)`)

query.onchange = (e) => {
    log(e.matches)
}

// 获取类列表
const classList = document.documentElement.classList
classList[dark ? 'add' : 'remove']('dark')

对 HTML 根元素添加或删除 dark 类来切换主题。然后对很多元素 (body，头部导航等等) 来说，使用交集选择器（当 html 拥有 dark 类时）,设置背景为

css

html.dark body{
    /* 定义 css 变量 */
    --vt-c-bg: var(--vt-c-black);
}

-->了解 css 变量

还可以用 js 来操作获取 css 变量哟！

解析 marked 格式

使用 "marked" 库

usePromise 函数（封装状态）

问题：什么是 promise？promise 可以理解为一个会变化的结果。

编写一个公共函数 usePromise 函数需求如下：

传入一个 function 类型参数，里面执行异步代码。要求 usePromise 返回以下属性。

results：返回 Promise 执行结果
loading：返回 Promise 运行状态
- PENDING：true
- REJECTED：false
- RESOLVED: false
error：返回执行错误

在 promise 变化前后，封装的响应式数据 loading，results，error 也会做出响应改变。

vue

<script setup lang="ts">
import { ref, watch } from 'vue'
// 输入框值
let input = ref("")
// 根据输入框值，搜索函数
const searchInput = (str: String) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(str.length)
    }, 1000)
  })
}
// 使用 Promise，
// promise 是什么？状态集
let res = usePromise(searchInput)

watch(input, (newValue) => {
  if (newValue === '') {
    res.results.value = ''
  } else {
    res.createPromise(newValue)
  }
})
// 使用状态集
function usePromise(fn: Function) {
  let loading = ref(false)
  let error = ref(null)
  let results = ref('')
  // 一个方法，改变状态集，也属于状态集，
  async function createPromise(...args: any[]) {
    loading.value = true
    error.value = null
    results.value = ''
    try {
      results.value = await fn(...args)
    } catch (error: any) {
      error.value = error.value
    } finally {
      loading.value = false
    }
  }
  // 返回状态集
  return { loading, error, results, createPromise }
}

</script>

<template>
  输入：
  <input type="text" v-model="input" />
  <div></div>
  loading:{{ res.loading }}
  <div></div>
  error:{{ res.error }}
  <div></div>
  results:{{ res.results }}
</template>

<style scoped>
</style>

is 属性与 v-is

is 属性只能用在 component 标签上。

dom 内模板解析使用 v-is 代替。

input 的 type，为 number 或 tel 的区别

input 元素中的 type 属性可以用来指定不同类型的输入框，其中 type="number" 和 type="tel" 是两种不同的类型。

type="number" 用于输入数字类型的数据，只允许输入数字和一些特定的符号，如正负号、小数点和指数符号。当用户在 type="number" 的输入框中输入非数字字符时，浏览器会自动阻止输入或忽略该字符。此外，type="number" 的输入框还可以使用 min、max、step 等属性来指定可输入的范围和步长等限制条件。

type="tel" 用于输入电话号码，允许输入数字、加号、减号、空格和一些特定的符号，如左右括号、斜杠和点号等。当用户在 type="tel" 的输入框中输入非数字字符时，浏览器不会自动阻止输入或忽略该字符，因此用户可以输入一些额外的符号。此外，type="tel" 的输入框还可以使用 pattern 属性来指定一个正则表达式来限制输入的格式。

总的来说，type="number" 和 type="tel" 的区别在于它们用于输入不同类型的数据，并且对于非数字字符的处理方式不同。type="number" 只允许输入数字和特定的符号，而 type="tel" 允许输入一些额外的符号。如果您需要输入电话号码，建议使用 type="tel"，如果需要输入数字，建议使用 type="number"。

window.localStorage 只能存储字符串数据吗？

是的。

存储时需要先使用 JSON.stringfiy 将数据字符串化，取数据时再使用 JSON.parse 解析。这样除了函数，嵌套属性对象等外，其它数据都可以被正确本地存储。

比如数字 1，存储时变为 "1"，取出时又恢复为 1。

JavaScript 中 Promise 的异常捕获问题怎么解决？

感谢亿速云一篇有用的文章：https://www.yisu.com/zixun/722019.html。

首先要明确try catch只能捕获同步代码，不能捕获异步代码。

// 这段代码捕获不到错误
try {
  setTimeout(() => {
    throw Error('出错了')
  })
} catch (error) {
  console.log('这里不会被执行')
}

// 改为同步代码就可以了
try {
  throw Error('出错了')
} catch {
  console.log('会被执行')
}

Promise 有自己的错误处理回调函数，也就是 then 方法的第二个参数。

Promise.reject('error').then(() => {
  console.log('我不会被打印')
}, () => {
  console.log('会被打印')
})

我们一般不会这么写。因为 try catch 捕获不到错误，Promise 自己会处理错误。

try {
  Promise.reject('error').then(() => {
    console.log('我不会被打印')
  }, () => {
    console.log('会被打印')
  })
} catch (error) {
  // ...
  console.log('不会执行')
}

但是如果我们使用 async、await，就没有类似 then 方法的第二个参数了。

try {
  await Promise.reject('error')
} catch (error) {
  // ...
  console.log('会执行')
}

await 后面的值如果是一个 Promise，会等它的状态改变，如果为成功状态，返回成功的值。如果为失败状态，会被 try catch 所捕获。

await 后面的值如果是非 Promise，则直接返回该值。

综上所述，处理 Promise 的异常捕获，可以再 Promise 实例的 then 方法第二个参数里捕获，也可以利用 async await 配合 try catch 捕获。

js ​

window.location 没有 query 属性，只有 search 属性 ​

JS 生成二维码 ​

JS 媒体查询 ​

解析 marked 格式 ​

usePromise 函数（封装状态） ​

is 属性与 v-is ​

input 的 type，为 number 或 tel 的区别 ​

window.localStorage 只能存储字符串数据吗？ ​

JavaScript 中 Promise 的异常捕获问题怎么解决？ ​

js