公共模塊

1

基礎(chǔ)模塊參照了vant的思路，使用bem命名規(guī)范。先創(chuàng)建一個(gè)命名空間，這個(gè)命名空間返回創(chuàng)建組件函數(shù)與生成命名方法。在創(chuàng)建組件函數(shù)中創(chuàng)建name與install屬性用于注冊(cè)vue組件

創(chuàng)建組件函數(shù)

創(chuàng)建base組件

npm run plop
# 輸入組件名稱得到packages/base模塊

在src文件夾中創(chuàng)建create文件夾并創(chuàng)建component.ts文件用于創(chuàng)建組件方法。創(chuàng)建組件與要name屬性和install方法來注冊(cè)組件

/**
 * Create a basic component with common options
 */
import { App, defineComponent, ComponentOptionsWithObjectProps } from 'vue'

/**
 *
 * @description 創(chuàng)建組件
 * @export createComponent
 * @param {string} name
 * @return {*} defineComponent
 */
export function createComponent (name: string) {
  return function (sfc: ComponentOptionsWithObjectProps) {
    sfc.name = name
    sfc.install = (app: App) => {
      app.component(name as string, sfc)
      app.component(name), sfc)
    }

    return defineComponent(sfc)
  } as typeof defineComponent
}

因?yàn)槲覀兘M件名字可能包含多個(gè)單詞所以我們把他轉(zhuǎn)換為駝峰命名法所以創(chuàng)建src/format/string.ts文件來導(dǎo)出駝峰命名函數(shù)

// base/src/format/string.ts

const camelizeRE = /-(\w)/g

/**
 *
 * @description 把-換成駝峰命名
 * @export camelize
 * @param {string} str
 * @return {*}  {string}
 */
export function camelize (str: string): string {
  return str.replace(camelizeRE, (_, c) => c.toUpperCase())
}

// base/src/create/component.ts
import { camelize } from '../format/string'
// 修改這句代碼來轉(zhuǎn)換為駝峰命名法
app.component(camelize(`-${name}`), sfc)

創(chuàng)建create/bem.ts文件生成bem的函數(shù)

Bem 函數(shù)傳入?yún)?shù)與生成的名字

• b() // 'button'
• b('text') // 'button__text'
• b({ disabled }) // 'button button--disabled'
• b('text', { disabled }) // 'button__text button__text--disabled'
• b(['disabled', 'primary']) // 'button button--disabled button--primary'

export type Mod = string | { [key: string]: any };
export type Mods = Mod | Mod[];

function gen (name: string, mods?: Mods): string {
  if (!mods) {
    return ''
  }

  if (typeof mods === 'string') {
    return ` ${name}--${mods}`
  }

  if (Array.isArray(mods)) {
    return mods.reduce<string>((ret, item) => ret + gen(name, item), '')
  }

  return Object.keys(mods).reduce(
    (ret, key) => ret + (mods[key] ? gen(name, key) : ''),
    ''
  )
}

/**
 *
 * @description 創(chuàng)建BEM命名空
 * @export
 * @param {string} name
 * @return {*} string
 */
export function createBEM (name: string) {
  return function (el?: Mods, mods?: Mods): Mods {
    if (el && typeof el !== 'string') {
      mods = el
      el = ''
    }

    el = el ? `${name}__${el}` : name

    return `${el}${gen(el, mods)}`
  }
}

export type BEM = ReturnType<typeof createBEM>;

創(chuàng)建create/index.ts文件，這個(gè)文件導(dǎo)出一個(gè)函數(shù)這個(gè)函數(shù)有一個(gè)參數(shù)，這個(gè)參數(shù)就是創(chuàng)建組件的名字，返回一個(gè)數(shù)組，這個(gè)數(shù)組的第一項(xiàng)是創(chuàng)建組件的方法，第二項(xiàng)就是根據(jù)組件名字創(chuàng)建bem命名規(guī)則的函數(shù)

import { createBEM } from './bem'
import { createComponent } from './component'

/**
 *
 *  @description 創(chuàng)建命名空間
 * @export
 * @param {string} name
 * @return {*} [createComponent(name), createBEM(name)]
 */
export function createNamespace (name: string) {
  name = 'two-' + name
  return [createComponent(name), createBEM(name)] as const
}

后續(xù)的公共的東西也會(huì)提取到公共base模塊中

原文地址:https://kspf.xyz/archives/142/