Analyse d'URL facile avec JavaScript isomorphe

JavaScript isomorphe: analyse universelle de l'URL

Cet article explore l'analyse d'URL dans le contexte des applications JavaScript isomorphes. Le JavaScript isomorphe permet au code de s'exécuter de manière transparente sur le client (navigateur) et le serveur (Node.js), l'amélioration de la polyvalence et des performances de l'application. Un aspect clé de ceci est la gestion cohérente de l'URL dans les deux environnements.

Concepts clés:

• Amélioration progressive: Les applications isomorphes exploitent l'amélioration progressive, assurant des fonctionnalités entre divers navigateurs et même les robots de moteur de recherche.
• Analyse du côté client: Les navigateurs utilisent l'interface DOM Location pour l'analyse d'URL.
• Analyse côté serveur: Node.js propose une API dédiée url pour une manipulation efficace d'URL.
• Bibliothèques autochtones de l'environnement: Ces bibliothèques résument les différences spécifiques à l'environnement, fournissant une API cohérente pour l'analyse d'URL quel que soit le contexte d'exécution.

Structure URL:

Le diagramme suivant illustre une structure URL typique:

Alors que les expressions régulières peuvent Analyser les URL, elles sont complexes et moins efficaces que les API dédiées.

Sanage URL côté serveur (Node.js):

node.js fournit le module url:

// Server-side JavaScript
const url = require('url');
const parsedUrl = url.parse('http://site.com:81/path/page?a=1&b=2#hash');

console.log(parsedUrl.href); // Full URL
console.log(parsedUrl.protocol); // http:
console.log(parsedUrl.hostname); // site.com
console.log(parsedUrl.port); // 81
console.log(parsedUrl.pathname); // /path/page
console.log(parsedUrl.search); // ?a=1&b=2
console.log(parsedUrl.hash); // #hash

La méthode parse() renvoie un objet contenant toutes les composants d'URL.

Analyse de l'URL côté client:

Le navigateur n'a pas un équivalent direct au module url de Node.js. Cependant, l'interface Location des éléments d'ancrage (<a></a>) fournit des fonctionnalités similaires:

// Client-side JavaScript
const url = document.createElement('a');
url.href = 'http://site.com:81/path/page?a=1&b=2#hash';

console.log(url.hostname); // site.com

Cette approche évite les expressions régulières complexes.

Analyse d'URL isomorphe:

La création d'une bibliothèque auto-agrative de l'environnement simplifie l'analyse d'URL isomorphe. L'exemple lib.js suivant le démontre:

// lib.js
const isNode = typeof module !== 'undefined' && module.exports;

(function(lib) {
  "use strict";

  const urlModule = isNode ? require('url') : null;

  lib.URLparse = function(str) {
    if (isNode) {
      return urlModule.parse(str);
    } else {
      const url = document.createElement('a');
      url.href = str;
      return url;
    }
  };
})(isNode ? module.exports : this.lib = {});

Cette bibliothèque utilise une vérification simple (typeof module) pour déterminer l'environnement et utilise la méthode appropriée. L'API reste cohérente sur le client et le serveur.

en utilisant la bibliothèque isomorphe:

• côté serveur: const lib = require('./lib.js'); const parsedUrl = lib.URLparse(...);
• côté client: inclure lib.js et utiliser lib.URLparse(...) directement.

Conclusion:

Bien que les applications isomorphes complètes puissent être difficiles, les bibliothèques agnostiques de l'environnement comme celle ont démontré de manière significative simplifier considérablement l'analyse d'URL, permettant du code cohérent entre les environnements client et serveur. Cette approche favorise la réutilisabilité et la maintenabilité du code dans les projets de JavaScript isomorphe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!