readme-fr.md

Langues

• English
• 简体中文
• 日本語
• 한국어
• Français

Introduction

• Outils couramment utilisés en développement frontend.
• Exemples : Encodage/Décodage Base64, copie profonde des données, extraction des paramètres d'URL, etc.

Utilisation

Utilisation dans des projets traditionnels

<script src="https://unpkg.com/@xlou/webtools@1.1.9/dist/umd/webtools.min.js"></script>
<!-- Il est recommandé de télécharger le fichier et de l'utiliser localement -->
<script>
  /* Après avoir inclus ce fichier JS, l'objet tools sera disponible dans la fenêtre */
  let query = tools.getQuery()
</script>

Utilisation dans des projets Vue, React, Angular et autres projets Node

Installation

npm i @xlou/webtools -S

Dans main.js ou main.ts

/* Utilisation de fonctions spécifiques */
import { getQuery } from '@xlou/webtools'

let query = getQuery()

/* Utilisation du package complet */
import tools from '@xlou/webtools'

let query = tools.getQuery()

API

deepCopy   Copie profonde pour les types de référence

Détails des paramètres

function deepCopy(obj: any, set?: Set<any>): any;

Exemple d'utilisation

let objA = { m: "bonjour", n: [1, 2, 3] }
let objB = deepCopy(a) // objB => { m: "bonjour", n: [1, 2, 3] }
objA.m = "salut"
objB.n[0] = 4 // objB => { m: "salut", n: [4, 2, 3] }
console.log(objA) // objA => { m: "bonjour", n: [1, 2, 3] }

getQuery   Obtenir les paramètres d'URL

Détails des paramètres

interface GeneralObject {
  [prop: string]: string | number | boolean | null | undefined;
}
function getQuery(href?: string): GeneralObject;
/* Si href n'est pas fourni, il obtient les paramètres de l'URL de la page actuelle. */

Exemple d'utilisation

/* Si l'URL de la page actuelle est www.xxx.com?name=tom&id=1 */
let q0 = getQuery() // q0 => { name: "tom", id: 1 }
let q1 = getQuery("www.xxx.com?type=1") // q1 => { type: 1 }

queryString   Convertir un objet en chaîne de requête

Détails des paramètres

function queryString(obj: GeneralObject, bol?: boolean): string;

Exemple d'utilisation

let a = { name: "tom", id: 1 }
let m = queryString(a) // m => "name=tom&id=1"
let n = queryString(a, true) // n => "?name=tom&id=1"

filterObject   Filtrer un objet

Détails des paramètres

function filterObject(obj: Object, str?: string, bol?: boolean): Object;

Exemple d'utilisation

let a = { m: 123, n: "bonjour", p: 456, q: 789 }
let b = filterObject(a, "p, q") // b => { p: 456, q: 789 }
let c = filterObject(a, "p, q", false) // b => { m: 123, n: "bonjour" }

toFixed   Format des décimales

Détails des paramètres

function toFixed(num?: number | string, s?: number | string): string | undefined;

Exemple d'utilisation

let a = 1.335
let m = a.toFixed(2) // m => 1.33 L'utilisation de la méthode toFixed par défaut peut entraîner des résultats inattendus
let n = toFixed(a, 2) // n => 1.34
let p = toFixed(a) // p => 1

formSubmit   Simuler la soumission de formulaire pour le téléchargement de fichiers

Détails des paramètres

function formSubmit(obj: FormOptions): void;

Exemple d'utilisation

formSubmit({
  method: "post", // Type de requête
  action: "./hello", // URL de la requête
  /* ... Autres paramètres de formulaire */
  data: { name: "tom" } // Données de la requête
})

readText   Lire des fichiers texte

Détails des paramètres

function readText(url: string): Promise<string>;

Exemple d'utilisation

readText("./hello.txt")
.then(res => {
  console.log(res)
})

readJSON   Lire des fichiers JSON

Détails des paramètres

function readJSON(url: string): Promise<any>;

Exemple d'utilisation

readJSON("./hello.json")
.then(res => {
  console.log(res)
})

getStore   Lire depuis localStorage, analyse JSON si applicable

Détails des paramètres

function getStore(str: string): any;

Exemple d'utilisation

/* clé : a, valeur : {

 "m": "bonjour" } */
let b = getStore("a") // b => { m: "bonjour" }

setStore   Écrire dans localStorage, analyser les objets en JSON si applicable

Détails des paramètres

function setStore(str: string, data: any): void;

Exemple d'utilisation

let a = { m: "bonjour" }
let b = "tom"
setStore('p', a) // clé : p, valeur : { "m": "bonjour" }
setStore('q', b) // clé : q, valeur : tom

Base64   Encoder et décoder des chaînes en utilisant Base64

Détails des paramètres

class Base64 {
  constructor(key?: string);
  private key;
  encode(input: string): string;
  decode(input: string): string;
  private utf8_encode;
  private utf8_decode;
}

Exemple d'utilisation

const base64 = new Base64()
let a = base64.encode("Bonjour, le monde !") // a => 'SGVsbG8sIEJyb3duLCBsZS1tb25kIQ=='
let b = base64.decode('SGVsbG8sIEJyb3duLCBsZS1tb25kIQ==') // b => "Bonjour, le monde !"

unid   Générer une chaîne d'ID unique

Détails des paramètres

function unid(): string;

Exemple d'utilisation

let a = unid() // a => 'xenj1qoj5lbei4nh2'

colorRGB   Obtenir les valeurs RGB d'une couleur

Détails des paramètres

function colorRGB(str: string): Array<number> | undefined;

Exemple d'utilisation

colorRGB("#f00") // [255, 0, 0]
colorRGB("#ff7300") // [255, 115, 0]
colorRGB("rgb(128, 55, 255)") // [128, 55, 255]

clipboardWrite   Copier le contenu spécifié dans le presse-papiers.

Détails des paramètres

function clipboardWrite(content: any, type?: string): Promise<void>;

Exemple d'utilisation

function copyText() {
  clipboardWrite("Bonjour, le monde !") // Si le paramètre 'type' n'est pas spécifié, il est défini par défaut sur 'text/plain'.
  .then(() => {
    console.log("Copie réussie")
  })
}
async function copyImage() {
  const res = await fetch("./flower.png")
  const blob = await res.blob()
  clipboardWrite(blob, blob.type)
  .then(() => {
    console.log("Copie réussie")
  })
}