URI.js: Tương lai của Việc Biến đổi URL trong JavaScript

URI.js

QUAN TRỌNG: Bạn có thể không cần URI.js nữa! Trình duyệt hiện đại cung cấp các giao diện URL và URLSearchParams.

LƯU Ý: Tên gói npm đã thay đổi thành urijs

Tôi luôn muốn tự bắn đầu mình khi nhìn vào mã như dưới đây:

var url = "http://example.org/foo?bar=baz";
var separator = url.indexOf('?') > -1 ? '&' : '?';

url += separator + encodeURIComponent("foo") + "=" + encodeURIComponent("bar");

Tình hình đã khá hơn với URL và URL spec nhưng cho đến khi chúng ta có thể tin cậy vào API đó, hãy xem xét URI.js với một API sạch sẽ và đơn giản để biến đổi các URI:

var url = new URI("http://example.org/foo?bar=baz");
url.addQuery("foo", "bar");

URI.js ở đây để giúp bạn với điều đó.

Ví dụ về API

// mutating URLs
URI("http://example.org/foo.html?hello=world")
  .username("rodneyrehm")
    // -> http://rodneyrehm@example.org/foo.html?hello=world
  .username("")
    // -> http://example.org/foo.html?hello=world
  .directory("bar")
    // -> http://example.org/bar/foo.html?hello=world
  .suffix("xml")
    // -> http://example.org/bar/foo.xml?hello=world
  .query("")
    // -> http://example.org/bar/foo.xml
  .tld("com")
    // -> http://example.com/bar/foo.xml
  .query({ foo: "bar", hello: ["world", "mars"] });
    // -> http://example.com/bar/foo.xml?foo=bar&hello=world&hello=mars

// cleaning things up
URI("?&foo=bar&&foo=bar&foo=baz&")
  .normalizeQuery();
    // -> ?foo=bar&foo=baz

// working with relative paths
URI("/foo/bar/baz.html")
  .relativeTo("/foo/bar/world.html");
    // -> ./baz.html

URI("/foo/bar/baz.html")
  .relativeTo("/foo/bar/sub/world.html")
    // -> ../baz.html
  .absoluteTo("/foo/bar/sub/world.html");
    // -> /foo/bar/baz.html

// URI Templates
URI.expand("/foo/{dir}/{file}", {
  dir: "bar",
  file: "world.html"
});
// -> /foo/bar/world.html

Xem thêm về About Page và API Docs để biết thêm nhiều thứ khác.

Sử dụng URI.js

URI.js (không kèm theo các plugin) có kích thước nén gzip khoảng 7KB – nếu bạn bao gồm tất cả các tiện ích mở rộng, bạn sẽ có khoảng 13KB. Vì vậy, trừ khi bạn cần hỗ trợ tên miền cấp 2 và sử dụng các mẫu URI, chúng tôi đề xuất bạn không nên bao gồm chúng trong quy trình xây dựng của bạn. Nếu bạn không cần một công cụ biến đổi URI đầy đủ tính năng, có thể đáng xem xét các lựa chọn nhỏ hơn chỉ có trình phân tích.

URI.js có sẵn thông qua npm, bower, bowercdn, cdnjs và thủ công từ build page:

# using bower
bower install uri.js

# using npm
npm install urijs

Trình duyệt

Tôi đoán bạn sẽ quản lý sử dụng build tool hoặc tuân thủ hướng dẫn dưới đây để kết hợp và nén các tệp khác nhau thành URI.min.js – và tôi rất chắc chắn rằng bạn biết cách <script src=".../URI.min.js"></script> nó, đúng không?

Node.js và NPM

Cài đặt bằng npm install urijs hoặc thêm "urijs" vào các phụ thuộc trong package.json của bạn.

// load URI.js
var URI = require('urijs');
// load an optional module (e.g. URITemplate)
var URITemplate = require('urijs/src/URITemplate');

URI("/foo/bar/baz.html")
  .relativeTo("/foo/bar/sub/world.html")
    // -> ../baz.html

Cảm ơn bạn!

RequireJS

Sao chép kho URI.js hoặc sử dụng trình quản lý gói để đưa URI.js vào dự án của bạn.

require.config({
  paths: {
    urijs: 'where-you-put-uri.js/src'
  }
});

require(['urijs/URI'], function(URI) {
  console.log("URI.js and dependencies: ", URI("//amazon.co.uk").is('sld') ? 'loaded' : 'failed');
});
require(['urijs/URITemplate'], function(URITemplate) {
  console.log("URITemplate.js and dependencies: ", URITemplate._cache ? 'loaded' : 'failed');
});

Tối ưu hóa

Xem build tool hoặc sử dụng Google Closure Compiler:

// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name URI.min.js
// @code_url http://medialize.github.io/URI.js/src/IPv6.js
// @code_url http://medialize.github.io/URI.js/src/punycode.js
// @code_url http://medialize.github.io/URI.js/src/SecondLevelDomains.js
// @code_url http://medialize.github.io/URI.js/src/URI.js
// @code_url http://medialize.github.io/URI.js/src/URITemplate.js
// ==/ClosureCompiler==

Tài nguyên

Tài liệu chỉ định cách URL hoạt động:

• URL – Living Standard
• RFC 3986 – Uniform Resource Identifier (URI): Generic Syntax
• RFC 3987 – Internationalized Resource Identifiers (IRI)
• RFC 2732 – Format for Literal IPv6 Addresses in URL’s
• RFC 2368 – The mailto: URL Scheme
• RFC 2141 – URN Syntax
• IANA URN Namespace Registry
• Punycode: A Bootstring encoding of Unicode for Internationalized Domain Names in Applications (IDNA)
• application/x-www-form-urlencoded (Tham số xâu truy vấn) và application/x-www-form-urlencoded encoding algorithm
• What every web developer must know about URL encoding

Những thứ không chính thức

• Parsing URLs for Fun and Profit
• Naming URL components

Cách các môi trường khác làm việc

• Java URI Class
• Java Inet6Address Class
• Node.js URL API

Discussion on Hacker News

Forks / Mượn mã

• node-dom-urls Hiện thực một phần của W3C URL Spec Draft cho Node bởi passy
• urlutils Constructor window.URL của cofounders cho Node

Các Lựa chọn

Nếu bạn không thích URI.js, bạn có thể thích một trong các thư viện sau đây. (Nếu của bạn không được liệt kê, hãy liên hệ với tôi…)

Polyfill

• DOM-URL-Polyfill Polyfill của arv cho DOM URL spec cho trình duyệt
• inexorabletash của inexorabletash WHATWG URL API

Biến đổi URL

• The simple “Hack” Biến đổi URL (jsPerf comparison)
• URL.js
• furl (Python)
• mediawiki Uri (cần mw và jQuery)
• jurlp
• jsUri

Trình phân tích URL

• The simple “Hack” Biến đổi URL (jsPerf comparison)
• URI Parser
• jQuery-URL-Parser
• Google Closure Uri
• URI.js by Gary Court

URI Template

• uri-template (hỗ trợ trích xuất) bởi Rezigne
• uri-templates (hỗ trợ trích xuất) bởi Geraint Luff
• uri-templates bởi Marc Portier
• uri-templates bởi Geraint Luff (bao gồm cả thao tác đảo ngược)
• URI Template JS bởi Franz Antesberger
• Temple bởi Brett Stimmerman
• (jsperf comparison)

Đa dạng

• TLD.js – tên miền cấp 2
• Public Suffix – tên miền cấp 2
• uri-collection – tiện ích dựa trên gạch dưới cho việc làm việc với nhiều URI

Chứa Mã từ

• punycode.js – Mathias Bynens
• IPv6.js – Rich Brown – (viết lại từ phiên bản gốc)

Lịch sử thay đổi

đã được chuyển đến Lịch sử thay đổi

• About
• Understanding URIs
• Documentation
• jQuery URI Plugin
• Author
• Changelog

Chi tiết Tải về:

Tác giả: medialize
Mã nguồn: https://github.com/medialize/URI.js
Giấy phép: MIT license

Cảm ơn bạn!