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à một shebang hoặc hashbang ( #!), mà trước đây tôi chỉ thấy trong các kịch bản shell và kịch bản Perl.

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

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

Liệu #!bây giờ chơi một số vai trò đặc biệt trong URL, như cho một khuôn khổ Ajax nhất định hoặc một cái gì đó từ Facebook và Twitter giao diện mới hiện nay chủ yếu Ajaxified?
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?

Kỹ thuật này hiện không được chấp nhận .

Đ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.

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 một URL. Nếu bạn sử dụng Wikipedia, bạn sẽ thấy 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_Turingxác định trang và Early_computers_and_the_Turing_testlà mỏ neo. Lý do mà Facebook và các ứng dụng điều khiển Javascript khác (như Wood & Stones của riêng tôi ) 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 một 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 một 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 .

ps 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 đó đưa 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.

pps 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 thông tin 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 SPI với một neo.

Đây là liên kết chính một lần nữa: Tuyên ngôn giao diện trang đơn

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ự !này 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 về 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 với #!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 các trang web SPI tương thích SEO cho bất kỳ trình thu thập dữ liệu web nào (Yahoo, Bing ...).

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

Hãy xem hướng dẫn này , 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 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 SPI hoặc trang dựa trên SEO (hoặc khi JavaScript bị tắt cho khả năng tiếp cận). 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 dựa trên SPI 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.

Tôi sẽ 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 hashbang, bạn không thể quay lại. Đây có lẽ là vấn đề dính nhất. Bài đăng của Ben đưa ra quan điểm rằng khi PushState được chấp nhận 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 không 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ẻ không thay đổi. Chúng tôi không muốn ngắt 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. 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 , bởi 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 khổng lồ và vĩnh viễn đối với hashbang.

Để 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ũ.

Điều về điều này là ở đây.

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! vị trí của trang gốc hoặc tên miền. Về mặt lý thuyết, nó có thể là bất cứ thứ gì, nhưng có vẻ như API thu thập dữ liệu Google AJAX 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, đó là 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.

Câu trả lời ở trên mô tả tốt lý do tại sao và làm thế nào nó được sử dụng trên twitter và facebook, điều tôi bỏ lỡ là giải thích những gì #làm theo mặc định ...

Trên một 'bình thường' (không phải là một ứng dụng trang), bạn có thể thực hiện neo với hashbất kỳ phần tử nào có id bằng cách đặt id phần tử đó vào url sau khi băm#

Thí dụ:

(trên Chrome) Nhấp F12hoặc Rihgt MousevàInspect element

sau đó lấy id="answer-10831233"và thêm vào url như sau

/programming/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

và bạn sẽ nhận được một liên kết nhảy đến yếu tố đó trên trang

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

Bằng cách sử dụng #theo cách được mô tả trong các câu trả lời ở trên, bạn đang đưa ra hành vi mâu thuẫn ... mặc dù tôi sẽ không ngủ quên vì nó ... vì Angular đã trở thành một tiêu chuẩn ....