立即函数

@IIFE

Overview

Immediately Invoked Function Expression

定义一个匿名函数并立即调用这个函数/执行

用于创建一个独立的作用域，避免变量污染全局命名空间

可用于状态初始化

函数仅仅执行1次；不需要多次调用函数

1. 使用普通函数

;(function() {
  // 这里是函数体
})();

2. 使用箭头函数

;(()=> {
// 这里是函数体
})();

3. 使用 async-await；见下例

成组定义|封装 - 早期充当类使用

通常在前面添加分号;作为前后逻辑的分隔

[] 数据加载，以 Fetch 为例

使用回调函数

; (() => {
  fetch('https://glpla.github.io/utils/data/coffee.json')
    .then(res => res.json())
    .then(data => {
      console.log(data)
    })
})()

使用 aync-await

; (async () => {
  let res = await fetch('https://glpla.github.io/utils/data/coffee.json')
  let data = await res.json()
  console.log(data)
})()

[] 数据加载，以 Supabase.com 为例

正常使用 - 封装函数并调用

const fetchData = async () => {
  const { data, error } = await supabase
    .from('goods')
    .select()
  return data;
}
goodsData.value = await fetchData();

IIFE

; (async () => {
  const { data, error } = await supabase
    .from('goods')
    .select()
  goodsData.value = data
})()