La gestion des divisions administratives chinoises (provinces, villes, districts et cantons) représente souvent un défi technique majeur pour les développeurs travaillant sur des applications destinées au marché chinois. Entre les changements de noms, les fusions de districts et la complexité des hiérarchies, maintenir une base de données à jour est une tâche ardue. La bibliothèque province-city-china offre une solution robuste, modulaire et prête à l'emploi pour surmonter ces obstacles.
Pourquoi les données administratives chinoises sont-elles complexes ?
Dans un environnement de développement standard, l'intégration d'un sélecteur de région se heurte généralement à plusieurs problèmes :
- Obsolescence rapide : Les ajustements administratifs sont fréquents en Chine (un comté devenant une ville de niveau district, par exemple).
- Hétérogénéité des formats : Passer du JSON pour le front-end au SQL pour le back-end nécessite souvent des scripts de conversion complexes.
- Poids des données : Inclure l'intégralité des données jusqu'au niveau des rues peut considérablement alourdir une application mobile ou web.
Architecture modulaire : la force de province-city-china
Contrairement aux solutions monolithiques, ce projet adopte une approche granulaire. Vous pouvez installer uniquement les segments de données dont vous avez besoin, réduisant ainsi l'empreinte de vos dépednances.
| Module | Contenu | Cas d'usage type |
|---|---|---|
@province-city-china/province |
34 divisions de niveau provincial | Sélecteurs globaux, statistiques nationales |
@province-city-china/city |
337 villes de niveau préfecture | Plateformes de services régionaux |
@province-city-china/area |
2846 districts et comtés | Services de livraison locale |
@province-city-china/street |
Données complètes des rues/villages | Logistique de précision, adresses de fatcuration |
Mise en œuvre technique
L'installation s'effectue simplement via le gestionnaire de paquets NPM :
# Installation de l'ensemble complet
npm install province-city-china
# Installation ciblée (recommandé pour le web)
npm install @province-city-china/province @province-city-china/city
Voici comment structurer un sélecteur d'adresses performant en utilisant l'importation de données :
// Importation des données sources
import { province as provData, city as cityData } from 'province-city-china/data';
/**
* Service de gestion des localisations
*/
class GeoService {
constructor() {
this.provinces = provData;
this.cities = cityData;
}
/**
* Récupère les villes rattachées à une province spécifique
* @param {string} provinceCode Code de la province (ex: "11")
*/
getCitiesByProvince(provinceCode) {
return this.cities.filter(item => item.province === provinceCode);
}
}
const geoManager = new GeoService();
console.log(geoManager.getCitiesByProvince("11")); // Retourne les villes de Pékin
Flexibilité des formats de données
Le projet ne se limite pas au JavaScript. Il fournit des fichiers sources dans des formats variés pour s'adapter à votre infrastructure :
Format JSON (Idéal pour le Front-end)
{
"code": "440300",
"name": "Shenzhen",
"province": "44"
}
Format SQL (Insertion directe en base de données)
INSERT INTO `villes` (`code`, `nom`, `province_id`) VALUES
('440300', 'Shenzhen', '44'),
('440100', 'Guangzhou', '44');
Optimisation des performances : Chargement dynamique
Pour éviter de charger plusieurs mégaoctets de données au démarrrage de l'application, il est préférable d'utiliser l'importation dynamique (Dynamic Import).
async function fetchDistricts(cityId) {
// Le module n'est chargé que lorsque cette fonction est appelée
const { area: allAreas } = await import('@province-city-china/area');
const filteredResults = allAreas.filter(a => a.city === cityId);
return filteredResults;
}
Bonnes pratiques pour la gestion des zones géographiques
- Stratégie de cache : Stockez les données dans le
localStorageouIndexedDBaprès le premier chargement pour améliorer la réactivité. - Validation côté serveur : Utilisez les fichiers CSV ou SQL fournis pour valider les entrées utilisateurs en base de données avec les codes officiels.
- Mises à jour régulières : Configurez une alerte de dépendance (comme Dependabot) pour rester synchronisé avec les mises à jour des divisions administratives publiées par le projet.
En utilisant province-city-china, vous éliminez la maintenance manuelle des données géographiques, garantissant ainsi une précision maximale pour vos utilisateurs tout en réduisant le temps de développement.