soso-kit.utils

前端開發中非常簡單的工具封裝庫，該庫為子庫，內置工具如下

• [x] 網絡請求 Request - 基於 fetch 支持瀏覽器和 node端
• [x] 國際化 N18n
• [x] 顏色處理 RGBA

如何安裝 - To install dependencies:

# npm
npm i soso-kit.utils

# bun
bun install soso-kit.utils

# yarn
yarn add soso-kit.utils

# pnpm
pnpm install soso-kit.utils

文檔 - Doc

Request - 網絡請求工具

基於 fetch 封裝的網絡請求工具，支持請求攔截，支持報文處理中間件

例子 - demo

import { request } from 'soso-kit.utils';

const api = (param) => request.get('api/xxx/xx', param);

N18n

基於String類封裝的字符串工具，適用各種前端框架的國際化工具。它不依賴任何前端框架

N18n例子 - demo

import { useState } from 'react';
import { N18n, Word } from 'soso-kit.utils';

const n18 = new N18n({
  zh_CN: {
    你好: '妳好',
    操作: {
      登錄: '登錄'
    },
  },
  en_US: {
    你好: 'hello',
    操作: {
      登錄: 'login'
    },
  },
});

const list = [n18.translate('你好'), n18.translate('操作.登錄')]

function App() {
  const btn = {
    label: n18.translate('操作.登錄'),
  };
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => {
          setCount(v => v + 1);
          n18.language = ['en_US', 'zh_CN'][count % 2] as ('zh_CN' | 'en_US');
          console.log(n18.language);
        }}>
          {`${btn.label}`} {count} <span>{btn.label}</span>
        </button>
        <p>{list[0]}</p>
        <p>{list[1]}</p>
        {list.map((x, i) => (
          <p key={i}>{x}</p>
        ))}
      </div>
    </div>
  )
}

export default App

Api

constructor

構造函數

• 支持設置詞典，該詞典會影響後面 t | translate 參數提示功能
• 如果沒有設置詞典，也可以通過泛型替補參數提示功能，後面需要自己手動執行.setup(dict)設置詞典
• dict構造參數詞典第一層必須是多語言的標識，如: zh_CN | en_US | zh_MO 或者 zh-CN等，該值與切換多語言時一致，不能在設置時用 zh_CN，在切換時用zh-CN。第二層之後可以自用設置，你可以全部單詞放同一層，也可以根據自己需要，進行單詞嵌套以獲得更好的管理。
• 詞典支持參數，取值需要用{}包裹，如 hello, {name}，name為翻譯時需要傳入的字段，如果不傳，則默認為空字符串

const dict = {
  zh_CN: { hello: '你好' },
  en_US: { hello: 'hello' },
};
const n18n1 = new N18n(dict);

const n18n2 = new N18n<typeof dict>();
n18n2.setup(dict);

t | translate - 翻譯單詞

const dict = {
  zh_CN: { hello: '你好', 問候: { 早上好: '早上好，{name}' } },
  en_US: { hello: 'hello' },
};
const n18n = new N18n(dict);

const text = n18n.t('hello');

const message = n18n.t('問候.早上好', {name: '小明' });

• t 是 translate的別名，這裡為了簡短方便，二者並無二致
• 參數為單詞在字典中的索引，如上面的 hello，問候.早上好
• 支持動態參數，參數需要與詞典中定義的字段保持一致
• 如果傳入的單詞索引不存在，則返回該索引（在ts環境中，會直接提示不存在該索引的，所以請用ts吧😁）

language - 設置語言

• 用於切換當前語言
• 會觸發切換事件，相關訂閱事件會被執行，詳細見下一段

const n18n = new N18n(dict);

n18n.language = 'en_US'; // 切換語言

console.log(n18n.language) // en_US

book((language) => void) 訂閱切換語言事件

const n18n = new N18n(dict);

n18n.book((language) => {
console.log(language) // en_US
});

n18n.language = 'en_US'; // 切換語言

dispose((language) => void) 取消訂閱切換語言事件

const n18n = new N18n(dict);
const book = (language) => {
  console.log(language) // en_US
};

n18n.book(book); // 訂閱事件

n18n.language = 'en_US'; // 切換語言

n18n.dispose(book); // 取消訂閱

init() - 初始化 - 為了方便使用而提供的方法，也可以用其他方式代替

const n18n = new N18n(dict).init((instance)=>{
  // instance === n18n
  instance.language = 'en_US'; // 設置默認語言
});

extend - 擴展實例 - 擴展詞庫

有時候在開發庫時定義了一些內置單詞，在項目中使用時想節省重複定義這部分單詞的工作，可以使用extend來擴展，相關的訂閱事件也會同步過來，不用擔心會影響原來的功能

// package: utils
const dict = {
  zh_CN: { hello: '你好' },
  en_US: { hello: 'hello' },
};
const n18n = new N18n(dict);

export { n18n };

// package: project
import { n18n } from 'utils';
const dict = {
  zh_CN: { bye: '再見' },
  en_US: { bye: 'bye' },
};
const myN18n = n18n.extend(dict);
// 可同時使用以下單詞
myN18n.t('hello'); 
myN18n.t('bye');