轻松解析同构JavaScript

>异态JavaScript：通用URL解析

本文探讨了在同构JavaScript应用程序的上下文中的URL解析。 同构JavaScript允许代码在客户端（浏览器）和服务器（node.js）上无缝运行，从而增强了应用程序的多功能性和性能。 一个关键的方面是在两个环境中都一致的URL处理。

>

密钥概念：

• 渐进式增强：同构应用程序利用渐进式增强，确保跨不同浏览器甚至搜索引擎机器人的功能。>
• 客户端解析：浏览器利用DOM的接口进行URL解析。Location
• >服务器端解析：api用于有效的URL操纵。 url环境 - 不可能的库：
这些库抽取特定于环境的差异，为URL解析提供了一致的API，而不论执行上下文。
• >

URL结构：

以下图说明了一个典型的URL结构：

虽然正则表达式可以解析URL，但它们比专用的API复杂且效率较低。

>服务器端URL解析（node.js）：> Node.js提供模块：>>>

方法返回一个包含所有URL组件的对象。>

客户端URL解析： url

浏览器缺乏与Node.js的

// 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

模块直接相等的。但是，锚元素的

接口（parse()）提供了类似的功能：

这种方法避免了复杂的正则表达式。

url同构URL解析：Location<a></a>

创建环境库库简化了同构URL解析。 以下

// 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

示例证明了这一点：

>

>该库使用简单的检查（）来确定环境并使用适当的方法。 API在客户端和服务器上均保持一致。>

使用同构库：lib.js

>

// 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 = {});

typeof module服务器端：

>客户端：

include
• 并直接使用。> const lib = require('./lib.js'); const parsedUrl = lib.URLparse(...);
• 结论：

  >

  虽然完整的同构应用程序可能具有挑战性，但像该库这样的环境不足的库可以显着简化URL解析，从而在客户端和服务器环境中启用一致的代码。 这种方法促进了同构JavaScript项目中的代码可重复性和可维护性。

以上是轻松解析同构JavaScript的详细内容。更多信息请关注PHP中文网其他相关文章！