हैश-कुंजी नेविगेशन को कैसे कार्यान्वित करें?

Question

मैं एक ajax लागू करना चाहते हैं आधारित हैश कुंजी इस तरह नेविगेशन:

http://www.foo.bar/#/about/ 
http://www.foo.bar/#/news/ 
http://www.foo.bar/#/products/ 

यहाँ किसी भी सलाह?

अग्रिम धन्यवाद!

Answer 1

हैश आधारित नेविगेशन संरचना के साथ, आप ब्राउज़र में जेएस के माध्यम से अपने मार्गों और उनके हैंडलर को परिभाषित करेंगे ... जब हैश बदल जाता है, तो 'हैशचेंज' ईवेंट निकाल दिया जाता है, और 'window.onhashchange' 'हैंडलर फ़ंक्शन कहा जाता है। *

उदा।

if ("onhashchange" in window) { 
    alert("The browser supports the hashchange event!"); 
} 

function locationHashChanged() { 
    if (location.hash === "#somecoolfeature") { 
    somecoolfeature(); 
    } 
} 

window.onhashchange = locationHashChanged; 

हाल ही में एचटीएमएल 5 पुशस्टेट का उपयोग करने का विकल्प भी है।

कुछ अच्छे जेएस रूटिंग पुस्तकालयों के लिए http://www.microjs.com/#spa देखें - उनमें से कुछ एचटीएमएल 5 पुशस्टेट के साथ-साथ पुराने ब्राउज़र के लिए हैशचेंज के लिए फॉलबैक के लिए समर्थन प्रदान करते हैं।

यदि आप एक गंभीर एप्लिकेशन बनाने की सोच रहे हैं तो आप मॉडल, विचार, रूटिंग इत्यादि को संभालने के लिए बैकबोन.जेएस जैसे कुछ का उपयोग कर सकते हैं। आपको क्रॉस रोड.जेएस (रूटिंग लाइब्रेरी) और उसके साथ हैशर.जेएस भी देखना चाहिए (हैशचेंज/पुशस्टेट लाइब्रेरी) यदि आपको बैकबोन के साथ आने वाले सभी एक्स्ट्रा की आवश्यकता नहीं है।

... या लेवी रूट्स (केवल HTML5 पुशस्टेट है, नोड.जेएस के लिए एक्सप्रेस में रूटिंग की तरह बहुत अधिक)।

... या jQuery बीबीक्यू (Jquery/hashchange आधारित/कुछ अच्छा सुविधाओं के लिए - (github.com/cowboy/jquery-bbq)

... और फिर, वहाँ निदेशक (hashchange/टन Node.js में सुविधाओं/कार्यों/एक्सप्रेस/रूटिंग के समान ब्राउज़र/ज्यादातर नोडजित्सु में लोगों द्वारा विकसित)

* नोट: यदि आप एसईओ पर ध्यान केंद्रित कर रहे हैं, तो हैशचेंज/AJAX कुछ समस्याएं पेश करेगा। ..आप Google के वेबमास्टर दिशानिर्देशों के माध्यम से पढ़ना चाहेंगे - http://code.google.com/web/ajaxcrawling/docs/getting-started.html

** पीएस आप MicroJS.com पर सभी उपरोक्त पुस्तकालयों को पा सकते हैं साइट है, सिवाय इसके Jquery बीबीक्यू

Answer 2

के लिए उदाहरण आप ऊपर दी का उपयोग करना, और चीजों को सरल रखने, तो आप निम्न कर सकता है:

function aboutHandler() { 
    //Do stuff--e.g. get via AJAX -> render template (optional) -> append HTML to an element 
} 

function newsHandler() { 
    //Do stuff 
} 

function productsHandler() { 
    //Do stuff 
} 

function locationHashChanged() { 
    (location.hash === "#/about/") && aboutHandler(); 
    (location.hash === "#/news/") && newsHandler(); 
    (location.hash === "#/products/") && productsHandler(); 
    } 
} 

window.onhashchange = locationHashChanged; 

Answer 3

ऐसा लगता है कि आप एक ही पृष्ठ आवेदन विकसित कर रहे हैं। तो, मैं आपको Backbone.js का उपयोग करने की सलाह दूंगा। यहां आपके कार्य के लिए एक कोड स्निपेट है।

<script> 
    var Controller = Backbone.Router.extend({ 
     routes: { 
      "/about/": "about", 
      "/news/": "news", 
      "/products/": "products" 
     }, 
     about: function(){ 
      // ... 
     }, 
     news: function(){ 
      // ... 
     }, 
     products: functions(){ 
      // ... 
     } 
    }); 

    var controller = new Controller(); 
    Backbone.history.start(); 

</script> 

Backbone. What is a router?