it-swarm-vi.com

Shebang / hashbang (#!) Trong Facebook và các URL Twitter mới để làm gì?

Tôi vừa nhận thấy rằng các URL Facebook dài, phức tạp mà chúng ta sử dụng bây giờ trông giống như thế này:

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

Theo như tôi có thể nhớ lại, đầu năm nay, nó chỉ là một chuỗi giống như đoạn URL bình thường (bắt đầu bằng #), không có dấu chấm than. Nhưng bây giờ, đó là Shebang hoặc hashbang (#!), mà trước đây tôi chỉ thấy trong các tập lệnh Shell và tập lệnh Perl.

Twitter mới URL hiện cũng có các ký hiệu #!. Một URL hồ sơ Twitter, ví dụ, bây giờ trông như thế này:

http://Twitter.com/#!/BoltClock

Bây giờ #! có vai trò đặc biệt nào đó trong các URL, như đối với một khung Ajax nhất định hoặc một cái gì đó do giao diện Facebook và Twitter mới hiện đã được Ajax hóa? Việc sử dụng điều này trong các URL của tôi có lợi cho ứng dụng Web của tôi theo bất kỳ cách nào không?

735
BoltClock

Kỹ thuật này là hiện không dùng nữa .

Điều này được sử dụng để cho Google biết cách lập chỉ mục trang.

https://developers.google.com/webmasters/ajax-crawling/

Kỹ thuật này chủ yếu được thay thế bằng khả năng sử dụng API Lịch sử JavaScript được giới thiệu cùng với HTML5. Đối với một URL như www.example.com/ajax.html#!key=value, Google sẽ kiểm tra URL www.example.com/ajax.html?_escaped_fragment_=key=value để tìm nạp phiên bản nội dung không phải là AJAX.

480
ceejayoz

Dấu bát phân/dấu số/dấu băm có một ý nghĩa đặc biệt trong một URL, nó thường xác định tên của một phần của tài liệu. Thuật ngữ chính xác là văn bản theo sau hàm băm là phần neo của URL. Nếu bạn sử dụng Wikipedia, bạn sẽ thấy rằng hầu hết các trang đều có mục lục và bạn có thể chuyển đến các phần trong tài liệu bằng một neo, chẳng hạn như:

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turing xác định trang và Early_computers_and_the_Turing_test là mỏ neo. Lý do mà Facebook và các ứng dụng điều khiển Javascript khác (như của riêng tôi Wood & Stones ) sử dụng các neo là vì họ muốn làm cho các trang có thể đánh dấu trang (như được đề xuất bởi nhận xét về câu trả lời đó) hoặc hỗ trợ nút quay lại mà không cần tải lại toàn bộ trang từ máy chủ .

Để hỗ trợ đánh dấu trang và nút quay lại, bạn cần thay đổi URL. Tuy nhiên, nếu bạn thay đổi phần trang (với cái gì đó như window.location = 'http://raganwald.com';) thành một URL khác hoặc không chỉ định một neo, trình duyệt sẽ tải toàn bộ trang từ URL. Hãy thử điều này trong bảng điều khiển Javascript của Fireorms hoặc Safari. Tải http://minimal-github.gilesb.com/raganwald. Bây giờ trong bảng điều khiển Javascript, gõ:

window.location = 'http://minimal-github.gilesb.com/raganwald';

Bạn sẽ thấy làm mới trang từ máy chủ. Bây giờ gõ:

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

Aha! Không làm mới trang! Kiểu:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

Vẫn không làm mới. Sử dụng nút quay lại để xem các URL này có trong lịch sử trình duyệt. Trình duyệt thông báo rằng chúng tôi đang ở trên cùng một trang nhưng chỉ thay đổi neo, vì vậy nó không tải lại. Nhờ hành vi này, chúng tôi có thể có một ứng dụng Javascript duy nhất xuất hiện trên trình duyệt để ở trên một 'trang' nhưng có nhiều phần có thể đánh dấu được, tôn trọng nút quay lại. Ứng dụng phải thay đổi neo khi người dùng nhập các 'trạng thái' khác nhau và tương tự nếu người dùng sử dụng nút quay lại hoặc dấu trang hoặc liên kết để tải ứng dụng có neo, ứng dụng phải khôi phục trạng thái thích hợp.

Vậy là bạn đã có nó: Các neo cung cấp cho các lập trình viên Javascript một cơ chế để tạo các ứng dụng thân thiện với dấu trang, có thể lập chỉ mục và có thể quay lại. Kỹ thuật này có tên: Đó là Giao diện trang đơn .

p.s. Có một lợi ích thứ tư cho kỹ thuật này: Tải nội dung trang thông qua AJAX và sau đó tiêm nó vào DOM hiện tại có thể nhanh hơn nhiều so với tải trang mới. Ngoài việc tăng tốc độ, các thủ thuật khác như tải một số phần nhất định trong nền có thể được thực hiện dưới sự kiểm soát của lập trình viên.

p.p.s. Với tất cả những điều đó, dấu 'bang' hoặc dấu chấm than là một gợi ý thêm cho trình thu thập dữ liệu web của Google rằng cùng một trang có thể được tải từ máy chủ tại một URL hơi khác. Xem Thu thập dữ liệu Ajax . Một kỹ thuật khác là làm cho mỗi liên kết trỏ đến một URL có thể truy cập của máy chủ và sau đó sử dụng Javascript không phô trương để thay đổi nó thành một SPI với một neo.

Đây lại là liên kết chính: Bản tuyên ngôn giao diện trang đơn

215
raganwald

Trước hết: Tôi là tác giả của Bản tuyên ngôn về giao diện trang đơn được trích dẫn bởi raganwald

Như raganwald đã giải thích rất rõ, khía cạnh quan trọng nhất của phương pháp Giao diện trang đơn (SPI) được sử dụng trong FaceBook và Twitter là việc sử dụng hàm băm # trong URL

Ký tự ! chỉ được thêm cho mục đích của Google, ký hiệu này là "tiêu chuẩn" của Google để thu thập dữ liệu các trang web chuyên sâu trên AJAX (trong các trang web Giao diện trang đơn cực đoan). Khi trình thu thập thông tin của Google tìm thấy một URL có #!, nó biết rằng một URL thông thường thay thế tồn tại cung cấp cùng một "trạng thái" nhưng trong trường hợp này là về thời gian tải.

Mặc dù kết hợp #! rất thú vị đối với SEO, nhưng chỉ được Google hỗ trợ (theo tôi biết), với một số thủ thuật JavaScript bạn có thể xây dựng SPI trang web tương thích SEO cho bất kỳ trình thu thập dữ liệu web nào (Yahoo, Bing. ..).

SPI Manifesto và demos không sử dụng định dạng ! của Google trong băm, ký hiệu này có thể được thêm dễ dàng và SPI thu thập thông tin có thể dễ dàng hơn nữa (CẬP NHẬT: ngay bây giờ! tương thích với các công cụ tìm kiếm khác).

Hãy xem điều này hướng dẫn , là một ví dụ về trang web ItsNat SPI đơn giản nhưng bạn có thể chọn một số ý tưởng cho các khung công tác khác, ví dụ này tương thích SEO cho bất kỳ trình thu thập dữ liệu web nào.

Vấn đề khó là tạo ra bất kỳ (hoặc được chọn) "trạng thái trang AJAX" nào dưới dạng HTML đơn giản cho SEO, trong ItsNat rất dễ dàng và tự động, cùng một trang web trong cùng một thời điểm SPI hoặc trang dựa trên SEO (hoặc khi JavaScript bị vô hiệu hóa để truy cập). Với các khung web khác mà bạn có thể theo cách tiếp cận trang web kép, một trang web là SPI dựa trên và một trang khác dựa trên SEO, ví dụ Twitter sử dụng kỹ thuật "trang web kép" này.

111
jmarranz

Tôi sẽ là rất cẩn thận nếu bạn đang xem xét áp dụng quy ước hashbang này.

Khi bạn băm, bạn có thể quay lại. Đây có lẽ là vấn đề khó khăn nhất. Bài đăng trên Ben Ben đưa ra quan điểm rằng khi PushState được áp dụng rộng rãi hơn thì chúng ta có thể để lại các hashbang phía sau và quay lại các URL truyền thống. Vâng, thực tế là, bạn có thể. Trước đó tôi đã nói rằng các URL là mãi mãi, chúng được lập chỉ mục và lưu trữ và thường được giữ xung quanh. Để thêm vào đó, các URL mát mẻ thay đổi. Chúng tôi không muốn kết nối bản thân khỏi tất cả các liên kết có giá trị đến nội dung của chúng tôi. Nếu bạn đã triển khai URL hashbang tại bất kỳ thời điểm nào thì muốn thay đổi chúng mà không ngắt liên kết theo cách duy nhất bạn có thể làm là bằng cách chạy một số JavaScript trên tài liệu gốc của tên miền. Mãi mãi. Nó không có cách nào tạm thời, bạn bị mắc kẹt với nó.

Bạn thực sự muốn sử dụng PushState thay vì hashbang , vì làm cho URL của bạn xấu đi và có thể bị hỏng - mãi mãi - là một nhược điểm lớn và vĩnh viễn đối với hashbang.

85
Jeff Atwood

Để có một sự theo dõi tốt về tất cả những điều này, Twitter - một trong những người tiên phong của URL hashbang và giao diện một trang - thừa nhận rằng hệ thống hashbang chậm trong thời gian dài và họ thực sự đã bắt đầu đảo ngược quyết định và quay trở lại liên kết trường học cũ.

Bài viết về điều này ở đây.

16
kingmaple

Tôi luôn giả sử ! chỉ ra rằng đoạn băm theo sau tương ứng với một URL, với ! thay thế cho trang gốc hoặc tên miền. Về lý thuyết, nó có thể là bất cứ thứ gì, nhưng có vẻ như Google AJAX API thu thập dữ liệu thích nó theo cách này.

Tất nhiên, hàm băm chỉ cho biết rằng không có tải lại trang thực sự đang xảy ra, vì vậy, vâng, nó cho mục đích AJAX. Chỉnh sửa: Raganwald thực hiện một công việc đáng yêu giải thích điều này chi tiết hơn.

9
Alan H.