使用 ESM 抽出重複代碼

既然可在 ESM 中使用 createApp()，搭配 Composition API 我們也可以 Module Pattern 形式管理重複代碼。

Version

Petite-vue 0.41
Hugo 0.121.1

ESM

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <div>
      <button @click="onClick">+</button>
      <div>[[ states.count ]]</div>
    </div>
  </body>
</html>

<script type="module">
import { createApp, reactive } from './petite-vue.es.js'

let states = reactive({
    count: 0
  }
)

let onClick = () => states.count++

createApp({
  $delimiters: ['[[', ']]'],
  states,
  onClick
}).mount()
</script>

Petite-vue 也支援 Composition API 風格
一樣使用 createApp() 統整
State 改使用 reactive() 管理
每個 method 都是獨立 function，不再使用 this 存取 state

Extract Module

static/useCounter.js

import { reactive } from './petite-vue.es.js'

export default () => {
  let states = reactive ({
    count: 0
  })

  let onClick = () => states.count++

  return {
    states,
    onClick
  }
}

我們可將重複部分抽成 module，以 module pattern 重複使用
在 Hugo 可將 module 放在 static 目錄下

index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <div>
      <button @click="onClick">+</button>
      <div>[[ states.count ]]</div>
    </div>
  </body>
</html>

<script type="module">
import { createApp } from './petite-vue.es.js'
import useCounter from "./useCounter.js"

let { states, onClick } = useCounter()

createApp({
  $delimiters: ['[[', ']]'],
  states,
  onClick
}).mount()
</script>

Line 17

import useCounter from './useCounter.js'

直接引用 useCounter.js，在 static 目錄下可直接抓到

Line 12

let { states, onClick } = useCounter()

直接從 useCounter() 解構出 states 與 onClick，其他代碼都不必修改

Conclusion

由於 Composition API 沒使用 this，因此很容易將重複代碼抽成 module，以 module pattern 重複使用
將 module 放在 static 目錄下可直接 import() 使用