一、概述
sc-business-lodash 是一个为公司业务场景定制的 JavaScript 组件库，包括了一系列工具函数和服务，旨在提高开发效率和简化常见的编程任务。该库提供了从数据处理到配置管理，再到网络请求和消息通知等多方面的功能支持。
主要组成
- 初始化与配置 (init.ts)
• 功能: 管理全局配置，如 HTTP 设置和警告消息回调。
• 主要函数: initConfig, getConfig, setConfig, isInitConfig.
- 工具函数 (tool.ts)
• 功能: 提供 JSON 序列化和反序列化的扩展功能，包括对函数和 undefined 的处理。
• 主要函数: JSONStringify, JSONParse, evalFn.
- 认证服务 (auth.ts)
• 功能: 处理用户认证相关的功能，包括令牌的获取、设置和清除。
• 主要函数: loginPassword, getToken, setToken, clearToken.
- HTTP 服务封装 (http.ts)
• 功能: 封装 axios 库以支持配置化的网络请求，包括错误处理和响应状态管理。
• 主要函数: get,post,delete,patch
- 缓存管理 (cache.ts)
• 功能: 提供本地存储和会话存储的数据管理，支持数据的安全存取和清除操作。
• 关键函数: setLocalStorage, getLocalStorage, clearLocalStorage, setSessionStorage, getSessionStorage, clearSessionStorage.
- 消息通知 (message.ts)
• 功能: 提供基于配置的消息通知服务，包括加载、成功、错误和警告消息。
• 主要函数: StartLoading, EndLoading, SuccessToast, ErrorToast, WarningToast.
特点
• 配置灵活性: 通过 init.ts 配置文件，用户可以定制和预设库的行为，适应不同的业务需求。
• 扩展性强: 组件和函数被设计为模块化，易于集成和扩展。
• 简化开发: 提供常用功能的抽象，减少重复代码，提升开发效率。二、项目结构
/sc-business-lodash
│
├── lib/ # 核心库文件
│ ├── init.ts # 初始化配置和管理
│ ├── tool.ts # 工具函数，如JSON序列化/反序列化
│ ├── auth.ts # 认证相关功能，如令牌管理
│ ├── http.ts # 网络请求封装
│ ├── Message.ts # 消息提示功能
│ └── cache.ts # 缓存管理功能
│
├── example/ # 示例项目，用于测试和演示组件库
│
├── package.json # 包管理和项目依赖文件
├── tsconfig.json # TypeScript 配置文件
├── pnpm-lock.yaml # pnpm 包锁定文件
└── README.md # 项目README文件，包含基本信息和使用指南三、快速使用
安装
pnpm install sc-business-lodash --registry=https://sczlcq-npm.pkg.coding.net/platform/sc/使用
初始化配置：
使用 initConfig 方法来配置必要的参数，例如 API 的基础 URL、超时时间等。
http请求示例初始化和请求（测试阶段有bug）
import { initConfig, $get, $post } from 'sc-business-lodash';
// 初始化配置
initConfig({
http: {
baseUrl: 'https://www.baidu.com/api',
timeout: 5000 // 请求超时时间，单位为毫秒
},
alert: {
successToastCallback: message => console.log(`成功: ${message}`),
errorToastCallback: message => console.error(`失败: ${message}`)
}
});
// 使用 $get 方法发起 GET 请求
$get({
url: '/api/data'
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});
// 使用 $post 方法发起 POST 请求
$post({
url: '/api/submit',
data: { key: 'value' }
}).then(response => {
console.log(response);
}).catch(error => {
console.error(error);
});认证服务示例
使用认证模块来管理用户的登录状态和令牌：
import { loginPassword, getToken, setToken, clearToken } from 'sc-business-lodash';
// 登录示例
loginPassword({ username: 'zhangsan', password: '123456' });
// 获取令牌
const token = getToken();
console.log('token:', token);
// 设置新的令牌
setToken('newToken123');
// 清除令牌
clearToken();缓存管理示例
展示如何使用本地存储和会话存储来保存和检索数据：
import { setLocalStorage, getLocalStorage, clearLocalStorage, setSessionStorage, getSessionStorage, clearSessionStorage } from 'sc-business-lodash';
// 设置本地存储
setLocalStorage('userInfo', { name: '张三', age: 30 });
// 获取本地存储
const userInfo = getLocalStorage('userInfo');
console.log('User Info:', userInfo);
// 清除本地存储
clearLocalStorage('userInfo');
// 设置会话存储
setSessionStorage('sessionData', { sessionKey: 'abc123' });
// 获取会话存储
const sessionData = getSessionStorage('sessionData');
console.log('Session Data:', sessionData);
// 清除会话存储
clearSessionStorage('sessionData');消息提示功能
import { StartLoading, EndLoading, SuccessToast, ErrorToast, WarningToast } from 'sc-business-lodash';
// 显示加载提示
StartLoading('加载中...');
// 结束加载提示
EndLoading();
// 显示成功提示
SuccessToast('操作成功！');
// 显示错误提示
ErrorToast('操作失败，请重试！');
// 显示警告提示
WarningToast('网络连接异常！');四、开发和测试
方式一（使用组件库内置测试项目）
为了在本地进行开发和测试，您可以使用 example 项目。example 项目是一个用于测试和演示 sc-business-lodash 组件的独立项目。
将git源代码clone到本地，
安装依赖pnpm install （组件库环境和playground项目环境会自动安装）
运行cd example && pnpm run dev (需要先构建组件库才能正常使用组件，往下有说明构建流程)
方式二（使用自己的项目）
**1. 在组件库目录中运行 ****npm link**
首先，在你的组件库目录中运行 npm link。
这会在全局 node_modules 目录中创建一个符号链接，指向你的组件库。
**2.在你的项目目录中运行 ****npm link <包名>**
这会在项目的 node_modules 目录中创建一个符号链接，指向全局的 sc-business-lodash 链接。
五、构建发布
构建
要构建组件库，请运行以下命令：
pnpm run build构建后的文件将输出到 dist 目录。
ps：如果你还在开发测试阶段可以使用pnpm run debug来持续监听文件，自动构建测试
发布
发布只会上传dist文件夹，src组件里的源码文件不会上传
配置好自己的npmrc文件
自动打包编译（方式一）
pnpm run build:publish手动打包编译（方式二）
pnpm run build
pnpm publish