Tôi làm cách nào để sử dụng history.js trên trang web của mình

Question

Tôi đã đọc tất cả các bài đăng về history.js trên stackoverflow bao gồm, this, this và this và nhìn vào source code nhưng là một người mới đến javascript/jquery, tôi gặp khó khăn trong việc tìm ra cách thực sự triển khai để có hỗ trợ lịch sử html 5 và dự phòng để hỗ trợ các trình duyệt html4 như ie8/9. Vì tôi có thể đánh giá cao lợi ích của UX khi trình bày URL nhất quán càng nhiều càng tốt, cách này giải quyết liên kết sâu và cho phép đánh dấu trang tôi muốn triển khai nhưng tôi bị mất một chút khi cố gắng thực sự sử dụng trang này trên trang web của mình.

Sau khi thêm kịch bản history.js đến trang của tôi

Mã này để sửa đổi như tôi undertand nó là:

function(window,undefined){ 

    // Prepare 
    var History = window.History; // Note: We are using a capital H instead of a lower h 
    if (!History.enabled) { 
     // History.js is disabled for this browser. 
     // This is because we can optionally choose to support HTML4 browsers or not. 
     return false; 
    } 

    // Bind to StateChange Event 
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate 
     var State = History.getState(); // Note: We are using History.getState() instead of event.state 
     History.log(State.data, State.title, State.url); 
    }); 

    // Change our States 
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1" 
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2" 
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3" 
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4" 
    History.back(); // logs {state:3}, "State 3", "?state=3" 
    History.back(); // logs {state:1}, "State 1", "?state=1" 
    History.back(); // logs {}, "Home Page", "?" 
    History.go(2); // logs {state:3}, "State 3", "?state=3" 

})(window); 

Là //Change our states nơi tất cả các mã mới diễn ra như mã này chỉ đưa ra ví dụ của điều khiển lịch sử?

Hoặc tôi có nên viết mã của riêng mình thay cho toàn bộ khối mã này không (tôi sử dụng jquery để giúp tôi vào thời điểm này, do tính mới của tôi để mã hóa).

Tôi đã đọc bài này article về tải nội dung động và cố gắng triển khai trên trang web của tôi (Tôi có thể làm mã này hoạt động nhưng tôi biết rằng nó sẽ không hoạt động tốt trong ie8/9), nhưng đang gặp sự cố khi cố gắng tìm hiểu cách kết hợp với history.js

Thứ hai, tôi đang cố gắng tìm hiểu cách history.js phát với modernizr?

có phải là một sự thay thế cho modernizr.history (nơi thực hiện thử nghiệm và nếu không có sự hỗ trợ cho .js rơi trở lại để tải trang điển hình) hoặc nó sẽ hoạt động như thế này:

if (Modernizr.history) { 
    //Code goes here that works if it's HTML 5 Browser with .history support? I know some HTML5 browsers deal with .history oddly (read buggy) so what happens in those cases? 
} else { 
    //code from above goes here? with function(window, undefined){...etc... ? 
} 

Answer 1

Chỉ cần thêm hỗ trợ lịch sử cho trang web của bạn sẽ không giúp bạn theo bất kỳ cách nào trừ khi bạn thực sự có các chức năng tại chỗ để tận dụng nó.

Theo như hiện đại hóa đi nó chỉ cho bạn biết nếu lịch sử được hỗ trợ trên các trình duyệt hiện tại và nếu bạn hành động y x khác hành động

Ok vì vậy đây là như thế nào lịch sử sẽ làm việc:

xem xét history.js giống như máy ghi macro. Một khách hàng nhấp chuột một cái gì đó và bạn đẩy một số biến mà bạn liên kết với một url thực tạo thành hay:

khách hàng nhấp vào một tìm kiếm ví dụ, bạn gọi:

function search(params) { 
    // record your current UI position 
    // data (to save), title (to set on page), url (to set on page) 
    History.pushState({ params: params }, "Search", "?search"); 


    // now run whatever should happen because client triggered search() 
} 

Và bây giờ khi khách hàng nhấp vào nút trở , bạn có thể lấy trạng thái đã lưu trước đó để làm điều gì đó với nó. Vì khách hàng truy cập vào nút backbutton của mình, nó sẽ kích hoạt statechange. Và vì bạn đã đăng ký với sự kiện đó, bạn có thể xác định trạng thái nào bạn đã lưu trước đó và gọi hàm để thay đổi giao diện người dùng cho phù hợp.

// Bind to StateChange Event 
History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState(); 

    // returns { data: { params: params }, title: "Search": url: "?search" } 
    console.log(State); 

    // or you could recall search() because that's where this state was saved 
    if (State.url == "?search") { 
    search(data.params); 
    } 
}); 

Điều đó khá nhiều. Khách hàng kích hoạt một chức năng, bạn chỉ định một state/url và khi khách hàng nhấp lại, bạn nhìn vào trạng thái trước đó của bạn và chạy các chức năng tùy thuộc vào việc bạn muốn khôi phục giao diện người dùng hay khác.

Điều này tất cả có thể nhanh chóng trở thành mã phức tạp và phức tạp và tôi không thấy điều gì khác để giải thích, vì vậy trừ khi bạn chỉ có AHA! và bây giờ biết phải làm gì, tôi chỉ quên những thứ này ngay bây giờ.

Hoàn toàn không có gì tự động xảy ra ở đây cho các trạng thái saving/restoring, mọi thứ khác trong ứng dụng của bạn sẽ cần phải được mã hóa tay để xem xét điều gì sẽ xảy ra nếu trạng thái thay đổi.

Liên kết sâu cũng không liên quan gì đến những thứ này. Ứng dụng của bạn phải có khả năng tự khởi tạo và hiển thị các phần tử giao diện người dùng cụ thể dựa trên việc gọi trực tiếp thông qua url. Lịch sử chỉ dành cho quản lý nhà nước khi người dùng đã sử dụng ứng dụng của bạn, vì vậy bạn có thể kiểm soát những gì xảy ra khi họ nhấn nút back/forward.

Và bất cứ điều gì xảy ra thông qua JS, sẽ cung cấp cho bạn lợi ích không xa như công cụ tìm kiếm có liên quan vì họ không quan tâm đến js và sẽ chỉ lập chỉ mục văn bản thô của trang của bạn. Vì vậy, nếu bạn muốn liên kết sâu tương thích với công cụ tìm kiếm, bạn cần mã phía máy chủ hiển thị giao diện người dùng cho một trạng thái cụ thể tùy thuộc vào URL được yêu cầu.