前端技术总结

一，本地存储插件

1. web-storage-cache

  支持数据过期时间:

/* 原生 localStorage 和 sessionStorage 不支持过期时间，数据一旦存入，
就会一直保留。web-storage-cache 
可以为存储的数据设置过期时间，到期自动清除，实现更精细的缓存管理。
*/

const cache = new WebStorageCache();
cache.set('key', 'value', { exp: 600 }); // 600 秒后过期

 序列化和反序列化自动处理：

/*
web-storage-cache 会自动将复杂数据结构（如数组和对象）序列化为 JSON 字符串，并在取出时自动反序列化，这样就可以直接存储非字符串类型的数据，使用起来更便捷。
*/
cache.set('key', { name: 'Alice', age: 30 });
const user = cache.get('key'); // 自动解析为对象

二，多端开发框架

1. uni-app

• 特点：适配 H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ 小程序、快应用、iOS、Android 和 Web 等多个端。
• 技术栈：Vue 或 nVue（基于 Weex），使用 Vue 语法，可以快速上手。
• 优势：拥有丰富的插件和生态，官方维护并更新频繁，适合小程序和 App 开发。
• 使用场景：适合多端小程序开发、简单的移动应用开发。

2. Taro

• 特点：由京东凹凸实验室推出，支持 React 和 Vue 的开发方式，可以适配微信、支付宝、百度、字节跳动、QQ 等小程序，以及 H5 和 RN 端。
• 技术栈：React 风格，支持 TypeScript。
• 优势：使用 React 风格代码开发多端，支持小程序、H5、RN 等多个平台，有较好的跨平台表现。
• 使用场景：适合 React 开发者，且需要多个小程序端支持的场景。

3. Flutter

• 特点：由 Google 开发的跨平台 UI 框架，支持 iOS、Android、Web、Linux、macOS 和 Windows。
• 技术栈：Dart 编程语言，基于自定义渲染引擎。
• 优势：性能接近原生，适合复杂动画、UI 的应用开发，有统一的设计语言。
• 使用场景：高性能需求的移动端应用、复杂 UI 交互场景。

4. React Native

• 特点：Facebook 推出的跨平台开发框架，支持 Android 和 iOS。
• 技术栈：React 语法，使用 JavaScript 编写业务逻辑，原生模块渲染。
• 优势：接近原生性能，丰富的社区资源，适合有 React 技术栈的开发团队。
• 使用场景：需要较高性能的移动端 App，已经有 React 经验的团队。

5. Weex

• 特点：阿里巴巴出品的多端开发框架，支持 iOS、Android、Web。
• 技术栈：Vue 语法，使用 JavaScript 编写业务逻辑。
• 优势：接近原生性能，但目前社区较为冷清。
• 使用场景：适合已有 Vue 技术栈的开发团队。

6. NativeScript

• 特点：可以用 JavaScript、TypeScript、Angular 或 Vue 开发 Android 和 iOS 应用。
• 技术栈：JavaScript/TypeScript，并支持 Angular 和 Vue。
• 优势：可以直接调用原生 API，扩展性较强。
• 使用场景：需要调用原生功能较多的移动端项目。

7. Quasar Framework

• 特点：基于 Vue 的跨平台开发框架，支持 Web、移动端（通过 Cordova 和 Capacitor）、桌面端（Electron）。
• 技术栈：Vue，使用一套代码适配不同平台。
• 优势：适配面较广，支持 TypeScript。
• 使用场景：Web、移动、桌面端的多端应用开发。

三，pinia，vuex自动化本地存储

1.pinia-plugin-persist：

 自动持久化存储,自动同步到 localStorage 或 sessionStorage

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
    isLoggedIn: false,
  }),
  actions: {
    login() {
      this.isLoggedIn = true;
    },
  },
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'user',
        storage: localStorage,
        paths: ['isLoggedIn'], // 持久化存储指定字段
      },
    ],
  },
});

 2.vuex-persistedstate：

  自动持久化存储，自动同步到 localStorage 或 sessionStorage

import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const store = createStore({
  state: {
    user: null,
    // 其他状态
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    // 其他 mutations
  },
  plugins: [
    createPersistedState({
      storage: window.localStorage, // 使用 localStorage 存储
      // 或者使用 sessionStorage：
      // storage: window.sessionStorage,
    }),
  ],
});

export default store;

四，文件上传和大文件分片

  1.分片上传：将文件切成小块逐个上传，断点续传
  2.多文件并发上传：通过限制并发数量来控制上传速度和流量
  3.上传进度显示：通过进度条显示上传状态，提升用户体验

五，错误处理与监控

  1.全局错误捕获：使用 window.onerror、try-catch 捕获异常
  2.错误上报工具：如 Sentry、Fundebug，实时监控和上报前端错误
  3.回退机制：在关键功能出现错误时执行回退，保障用户体验

六，性能优化

  1.代码分割：按需加载模块，如 import() 异步加载，减少首屏资源大小
  2.懒加载：图片、视频等非首屏资源在用户滚动到可视区时加载
  3.缓存优化：使用缓存（Service Worker）和本地存储来保存静态资源
  4.压缩与优化：图片压缩（使用 webp 格式），代码压缩（Gzip、Brotli）
  5.CDN：使用内容分发网络（CDN）来加快资源加载速度

七，h5屏幕适配px

  1.postcss-mobile-forever：将 px 单位自动转换成基于 rem 的布局适配（常用）

module.exports = {
  plugins: {
    'postcss-mobile-forever': {
      rootWidth: 375, // 基于375px的设计稿宽度，通常根据设计稿选择
      minPixelValue: 1, // 小于1px不转换
      precision: 5 // 保留5位小数
    }
  }
};

  2.amfe-flexible + postcss-px-to-viewport: 将 px 单位自动转换成基于 rem 的布局适配（常用）

// 1.在项目入口文件中引入 amfe-flexible
import 'amfe-flexible';
// 2.在 postcss.config.js 中配置：
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 设计稿宽度
      viewportHeight: 667, // 设计稿高度（可选）
      unitPrecision: 5, // 转换精度
      viewportUnit: 'vw', // 转换单位
      selectorBlackList: ['.ignore', '.hairlines'], // 忽略的类
      minPixelValue: 1, // 最小转换数值
      mediaQuery: false, // 不转换媒体查询中的px
    },
  },
};

  3.PostCSS-Pxtorem: 将 px 单位自动转换成基于 rem 的布局适配

八，扫码功能

1.uni.scanCode：不适用h5

2.plus.barcode：是 DCloud 提供的用于原生 App 的条码扫描 API，它依赖于 plus 对象，这个对象只能在 UniApp 的真机 App 环境下运行

3.Zxing：二维码识别库，可用于 JavaScript，适合自定义扫码需求较高的项目，适合在 React、Vue

九，原子化 CSS 框架

1.WindiCSS：它类似于 Tailwind CSS，但具有更快的编译速度和即时使用的特点
        高性能：使用虚拟 CSS，解析速度更快，适合于大型项目。
        原子化：每个类名对应一个单独的 CSS 属性，避免了冗余的全局 CSS 文件。
        即时编译：支持 “按需生成”，在你定义类时实时编译所需样式。
        配置灵活：支持所有 Tailwind 配置项，且支持深度自定义。
        与框架集成良好：与 Vue、React、Svelte、Nuxt 等集成，支持指令式的语法（如 v-bind 和 @apply）
2.Tailwind CSS: 是一种“原子化” CSS 框架，它提供了许多单一用途的类，每个类负责一个 CSS 属性
         原子化的类：每个类名代表一个样式属性，比如 .text-center 表示文本居中、.p-4 表示 1rem 的内边距。
         高度可定制：通过配置文件（tailwind.config.js）可以轻松自定义颜色、间距、字体等主题，适应项目需求。
         无强制样式：不附带预设的组件样式，使样式系统具有高度灵活性，适合多种风格的 UI 设计。
         JIT 编译：Tailwind 提供 Just-In-Time (JIT) 模式，只编译使用到的类，极大地减少了最终 CSS 文件的大小。
 

// 1.以 Vite 项目为例，安装 WindiCSS 插件并进行配置：

npm install -D vite-plugin-windicss

// 2. 在 Vite 配置文件中引入并使用 WindiCSS 插件 vite.config.js

import { defineConfig } from 'vite';
import WindiCSS from 'vite-plugin-windicss';

export default defineConfig({
  plugins: [
    WindiCSS(),
  ],
});

// 3.接着在 main.js 中引入 WindiCSS 的文件：
import 'virtual:windi.css';

// 4.可以创建 windi.config.js 配置文件自定义颜色、字体、断点等内容
// windi.config.js
import { defineConfig } from 'windicss/helpers';

export default defineConfig({
  theme: {
    extend: {
      colors: {
        primary: '#1e90ff',
        secondary: '#ff6347',
      },
    },
  },
});

// 5.使用示例

<div class="p-4 bg-primary text-white rounded-lg shadow-lg">
  Hello, WindiCSS!
</div>