Đường dẫn tương đối JavaScript

Question

con đường tương đối

JSDoc

Solve the relative path from {from} to {to}.
At times we have two absolute paths, and we need to derive the relative path from one to the other. This is actually the reverse transform of path.resolve.

Nội dung chính Show

Các chức năng đường dẫn được sử dụng nhiều nhất
Phổ biến trong JavaScript
Bước 2. Liên kết tệp Javascript với tài liệu HTML
Giới thiệu đường dẫn tệp tương đối
Giới thiệu đường dẫn tệp tuyệt đối
Đường dẫn tệp tương đối vs Đường dẫn tệp tuyệt đối
Sau khi liên kết tệp, hãy viết mã Javascript bên trong tệp javascript
JavaScript có đường dẫn tương đối là gì?
Làm cách nào để tìm đường dẫn tương đối của tệp trong JavaScript?
Đường dẫn tuyệt đối và tương đối trong JavaScript là gì?
Sự khác biệt giữa đường dẫn và đường dẫn tương đối là gì?

Các chức năng đường dẫn được sử dụng nhiều nhất

Đường dẫn nền tảng. tham gia
Đường dẫn nền tảng. giải quyết
Đường dẫn nền tảng. basename
Đường dẫn nền tảng. quan hệ
Đường dẫn nền tảng. là tuyệt đối

Đường dẫn nền tảng. tên phụ,
Đường dẫn nền tảng. dấu phân cách,
tham gia,
giải quyết,
Đường dẫn nền tảng. tháng chín,
basename,
Đường dẫn nền tảng. phân tích,
ParsedPath. Tên,
Đường dẫn nền tảng. bình thường hóa,
là Tuyệt đối,
dấu phân cách,
dirname,
tên phụ

Phổ biến trong JavaScript

q
Một thư viện cho các lời hứa (CommonJS/Promises/A,B,D)
tìm nạp nút
Một mô-đun trọng lượng nhẹ mang lại cửa sổ. tìm nạp đến nút. js
js-yaml
YAML 1. 2 trình phân tích cú pháp và trình tuần tự hóa
tiền điện tử
làm lại
Thư viện máy khách Redis
tối giản
phân tích các tùy chọn đối số
yargs
yargs hiện đại, theo chủ đề cướp biển, kế thừa của người lạc quan
mkdirp
Đệ quy mkdir, như `mkdir -p`
fs
Các plugin PhpStorm hàng đầu

Đường dẫn tuyệt đối bắt đầu bằng / và trỏ đến thư mục gốc của trang web của bạn. URL là ví dụ điển hình về đường dẫn tuyệt đối

Đường dẫn tương đối không bắt đầu bằng / và trỏ đến vị trí liên quan đến tài liệu mà tham chiếu đường dẫn được tạo trong

Nếu gốc là. http. //máy chủ cục bộ. 3000/

Sau đó, một ví dụ về một đường dẫn tuyệt đối là

/index.html

Mà điểm đến. http. //máy chủ cục bộ. 3000/chỉ số. html

Ví dụ về đường dẫn tương đối

../views/login.html

Nếu đường dẫn tương đối nằm trong một tài liệu nằm trong. http. //máy chủ cục bộ. 3000/công

Sau đó, nó chỉ đến. http. //máy chủ cục bộ. 3000/lượt xem/đăng nhập. html

__tên thư mục

Tôi chắc rằng nhiều bạn đã thấy

app.use(express.static(__dirname + '/'));

Nút. js điền vào không gian tên chung với '__dirname', dùng để chỉ tên của thư mục mà tập lệnh hiện đang thực thi nằm trong đó, tôi. e. máy chủ này ở đâu

Vì vậy, nếu bạn có ///Users/me/desktop/coding/project/server/server. js thì nếu chúng ta điều khiển. đăng nhập __dirname trong máy chủ. js, bảng điều khiển của chúng tôi sẽ hiển thị '/Users/me/desktop/coding/project/server/'

Thông thường, hầu hết mọi người đặt tên cho tệp script Javascript của họ là

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 hoặc

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

2 nhưng bạn có thể đặt tên cho tệp của mình theo bất kỳ thứ gì bạn muốn

Quy ước đặt tên ở trên là một thông lệ phổ biến nếu bạn đang phát triển một trang web chỉ có một vài tệp Javascript

Nhưng nếu bạn bắt gặp mã nguồn của một ứng dụng web, thông thường sẽ sử dụng

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

3 hoặc

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

4 vì chúng hoạt động như một điểm vào cho các mô-đun nhỏ khác của tệp Javascript

Bước 2. Liên kết tệp Javascript với tài liệu HTML

Chúng tôi sử dụng thẻ

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

5 cho công việc này

Thẻ

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

5 có thuộc tính

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

7 và nó chấp nhận đường dẫn tệp

Giả sử tên của tệp Javascript là

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 và nó được đặt trong thư mục

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

9 của dự án của bạn

/index.html

3

Đây là cách bạn liên kết tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 với tệp

/index.html

51

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

Trong trường hợp này, chúng tôi đang cung cấp một đường dẫn tương đối của tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 tới tài liệu HTML

Phần tiếp theo là giải thích chi tiết về đường dẫn tệp tương đối và đường dẫn tệp tuyệt đối và khi nào nên sử dụng cái gì

💡

Nếu bạn đã thực hiện bất kỳ số lượng mã hóa CSS nào, bạn có thể có một chút kinh nghiệm làm việc với đường dẫn tệp khi bao gồm các tệp

/index.html

53 của bạn bằng thẻ

/index.html

54.

Các quy tắc tương tự cũng áp dụng cho các tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

9 có thẻ

/index.html

56.

Vì vậy, nếu bạn đã giỏi với chúng, hãy chuyển sang bài học tiếp theo trực tiếp

Giới thiệu đường dẫn tệp tương đối

Hãy nói rằng đây là cấu trúc tệp của dự án HTML của bạn

/index.html

5

Nếu bạn để ý, cả tệp

/index.html

51 và tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 đều nằm ở cùng một cấp trong hệ thống tệp

Nói cách khác, có những tập tin nằm cạnh nhau trên hệ thống tập tin

Bây giờ, giả sử chúng ta phải liên kết

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 với

/index.html

51 bằng đường dẫn tương đối

Nhận một đường dẫn tương đối chỉ đơn giản là hỏi câu hỏi sau

Câu hỏi. Tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 nằm ở đâu so với tệp

/index.html

51?

Câu trả lời. Nó nằm ở cùng cấp độ

Tuyệt quá. Nếu các tệp được đặt ở cùng cấp độ, thì chúng ta chỉ cần sử dụng tên tệp cho đường dẫn tương đối

../views/login.html

8

Bây giờ với đường dẫn tương đối ở trên, bạn đang nói với trình duyệt rằng "Này. bạn có thể tìm thấy tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 trong cùng thư mục với tệp

/index.html

51"

Dù sao đi nữa, hãy nhanh chóng nói về một tình huống phổ biến hơn để hiểu rõ hơn về các đường dẫn tương đối

/index.html

3

Lần này, tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 nằm trong thư mục

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

9

Vì vậy, trước tiên, chúng ta phải truy cập vào thư mục

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

9 và sau đó truy cập vào tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 bên trong thư mục đó

Và thư mục

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

9 nằm ở đâu so với tệp

/index.html

51?

Vì vậy, đây là đường dẫn tệp tương đối cho tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0

app.use(express.static(__dirname + '/'));

9

Đơn giản, phải không?

Giới thiệu đường dẫn tệp tuyệt đối

Trong thế giới trình duyệt web, đường dẫn tệp tuyệt đối là đường dẫn đầy đủ cho tệp liên quan đến giao thức HTTP

Vì vậy, đường dẫn tệp tuyệt đối bắt đầu bằng giao thức HTTP

Ví dụ: giả sử tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 được lưu trữ trên thư mục nội dung của trang web

/index.html

33

Trong trường hợp này, đường dẫn tệp tuyệt đối cho tệp

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

0 sẽ như thế này

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

3

Bây giờ, điều này giống như

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

4

Nếu bạn để ý, đường dẫn tệp ở trên đang bắt đầu bằng dấu gạch chéo xuôi 135 thay vì giao thức HTTP

Trong thế giới của các trình duyệt web, dấu gạch chéo lên phía trước

/index.html

35 giống như tên miền đầy đủ bao gồm cả giao thức HTTP

Vì vậy, hầu hết mọi người sẽ chỉ sử dụng mẫu

/index.html

35 thay vì nhập tên miền đầy đủ. Nó dễ dàng hơn nhiều và ít bị lỗi nhất trong một số thiết lập máy chủ

Đường dẫn tệp tương đối vs Đường dẫn tệp tuyệt đối

Các đường dẫn tương đối được khuyến nghị khi chúng tôi đang phát triển một trang web cục bộ

Các đường dẫn tuyệt đối được khuyến nghị khi chúng tôi đang sử dụng máy chủ web để phục vụ các tệp trang web của mình hoặc nếu chúng tôi đang liên kết với một tài nguyên Javascript bên ngoài như jQuery

Giải thích này sẽ rõ ràng hơn khi chúng ta xây dựng dự án AJAX vì các dự án AJAX yêu cầu máy chủ web hoạt động

💡

Hầu hết các bài tập trong khóa học này không cần máy chủ web để hoạt động. Vì vậy, bạn sẽ thấy tôi sử dụng đường dẫn tương đối để liên kết các tệp javascript trong phần lớn khóa học này

Sau khi liên kết tệp, hãy viết mã Javascript bên trong tệp javascript

Và trình duyệt sẽ lo phần còn lại

💡

Quan trọng. Khi chúng tôi viết mã Javascript bên trong tệp Javascript, chúng tôi không bọc mã bên trong thẻ

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
    <p>Some HTML Content</p>
    <script src="js/main.js"></script>
</body>
</html>

5

Trong bài học tiếp theo, chúng ta sẽ nói về lý do tại sao việc đặt các thẻ ở cuối tài liệu HTML lại quan trọng

JavaScript có đường dẫn tương đối là gì?

Một liên kết có đường dẫn tuyệt đối sẽ cho máy tính biết máy chủ nào sẽ truy cập và sau đó là tất cả các thư mục mà bạn phải xem chi tiết để đến đích. Một liên kết có đường dẫn tương đối sẽ được viết để cho máy tính biết cách chuyển từ thư mục có chủ đề đang xem đến mục tiêu .

Làm cách nào để tìm đường dẫn tương đối của tệp trong JavaScript?

Đường dẫn . Phương thức relative() được sử dụng để tìm đường dẫn tương đối từ một đường dẫn đã cho đến một đường dẫn khác dựa trên thư mục làm việc hiện tại. Nếu cả hai đường dẫn đã cho đều giống nhau, nó sẽ phân giải thành một chuỗi có độ dài bằng không.

Đường dẫn tuyệt đối và tương đối trong JavaScript là gì?

Đường dẫn tham chiếu đến thư mục gốc được gọi là tuyệt đối. Đường dẫn có tham chiếu đến thư mục hiện tại được gọi là tương đối .

Sự khác biệt giữa đường dẫn và đường dẫn tương đối là gì?

Đường dẫn tương đối mô tả vị trí của tệp so với thư mục (đang hoạt động) hiện tại*. Đường dẫn tuyệt đối mô tả vị trí từ thư mục gốc . Khi học cách truy cập các tệp dữ liệu thông qua lập trình, chúng tôi thường sử dụng các đường dẫn tệp tương đối.

programming javascript