1.0.2 • Published 11 months ago

@ouyangzhigang/common v1.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
11 months ago

@ouyangzhigang/common

Note: 该 npm 类库是一个通用的前端 class 封装类库,主要用于将前端中不同领域的方向和技术实现进行整体抽象,提供了一种便捷的方式来处理前端开发的各个方面。每个类都被设计 为可以处理特定领域的问题,并且可以通过简单的配置来实现定制化需求的处理。该类库提供了一些通用的前端 class,如请求、验证、缓存等等。同时,它还提供了抽象不同领域的方向, 如数据可视化、前端组件、移动端开发等,提供统一的封装和接口,方便快捷的开发。

功能

该库提供了以下功能:

  1. 封装通用的前端 class: 包括了一些通用的 class,如请求、验证、缓存等等,可以通过继承和配置快速实现具体功能的编写。

  2. 抽象不同领域的方向: 可以通过该库实现不同领域的前端开发,如数据可视化、前端组件、移动端开发等,提供统一的封装和接口,方便快捷的开发。

  3. 提供了定制化配置: 该库提供了一些通用的配置方法,可以实现不同场景的需求定制化。同时,用户可以通过继承和重写方法等方式,实现更加符合自身业务需求的定制化编写。

优势

该库有以下优势:

  1. 功能丰富: 该库提供了丰富的 class 封装和接口,可以快速高效的实现前端开发。

  2. 通用性强: 该库被设计为通用的前端 class 封装,可以应用于不同领域。

  3. 高度可定制: 用户可以通过继承和配置方法,实现不同场景下的定制化需求。

示例代码

以下是一个示例代码的演示:

import { RequestService } from "@ouyangzhigang/common";

const requestService = new RequestService({
  baseURL: "https://api.example.com",
});

requestService.get("/users").then((response) => {
  // 处理请求返回数据
});

安装

支持使用 npm 或者 yarn 进行安装:

npm install @ouyangzhigang/common --save

# 或者

pnpm add @ouyangzhigang/common --save

文档

IndexDb

随着浏览器的功能不断增强,越来越多的网站开始考虑将大量的数据存储在客户端,相比后端接口,获取数据更快一些。现有的浏览器存储方案都不适合存储大量的数据。Cookie 的大小不超过 4KB,而且每次请求都会发送到服务器,LocalStorage 在 2.5 ~ 10MB 直接,浏览器不同,存储的大小还不一样,而且不提供搜索功能,也不能建立自定义索引,webSQL 大家可以课外了解一下,因为 Web SQL Database 规范已经被废弃,官方文档也解释的很清楚,webSQL 规范底层采用 SQLite 的 SQL 方言,而作为一个标准,这是不可接受的,每个浏览器都有自己的实现以后就很能统一标准了,就像 IE 一样。最后,也是最重要的一个客户端存储大量数据的方案:IndexedDB。

==为了简化 indexDb 操作,本类库基于 webIndexDb API 封装和继承 Dexie 强化了此类库功能==


import

import { IndexDb } from '@ouyangzhigang/common'

create
// create database
const DB = new IndexDb({ databaseName: location.origin, version: 1 });
// create table
DB.version(1).stores({
  test: `++id, name, text`,
});
useage
if (!DB.test) {
  DB.test.add({
    name: "hello",
    text: "world!",
  });

  DB.test.add({
    name: "hehe",
    text: "How much is this shirt?",
  });
}

function put() {
  DB.test.put({
    id: 3,
    name: "Banana",
    text: "Anna is good math teacher!",
  });
}

async function get() {
  const res = await DB.test.get(1);
  console.log(res);
}
const dbPut = document.querySelector("#db_put");
const dbGet = document.querySelector("#db_get");

dbPut.onclick = () => put();
dbGet.onclick = () => get();

文档参考与鸣谢(https://dexie.org/docs/Tutorial/Hello-World) 实战操作 indexDb 封装

Storage

storage 是浏览器一种简单键值对存储,只接受接受字符值,在存储过程中需要对数据进行字符转化,本类库基于 sessionStorage 和 localStorage API 对其操作进行了封装和简化,并集成加密特性避免数据泄露

了解更多有关该类库的详细信息,请查阅API 文档

贡献

如果您有任何贡献或建议,请在该库的 Github 仓库上提出Issue,或者直接提出Pull Request。我们非常欢迎您的贡献和参与!

协议

该类库基于 MIT 协议发布。请仔细阅读LICS,以便了解有关使用该类库的条款和条件。

1.0.2

11 months ago

1.0.0

12 months ago