如何使用原生js做單頁應(yīng)用

這篇文章將為大家詳細(xì)講解有關(guān)如何使用原生js做單頁應(yīng)用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

主要思路

通過改變url的hash值，跳到相應(yīng)模塊。先把默認(rèn)模塊顯示出來，其他模塊隱藏，分別給三個(gè)模塊定義三個(gè)hash值，點(diǎn)擊默認(rèn)模塊的選項(xiàng)的時(shí)候，改變hash值，同時(shí)在window上監(jiān)聽hashchange事件，并作相應(yīng)模塊跳轉(zhuǎn)邏輯處理。這樣即可模擬瀏覽器的前進(jìn)后退，而且用戶體驗(yàn)也比較好。

下面詳細(xì)來看看，現(xiàn)在有一個(gè)場景，選擇順序是：車牌子->車型->車系。

首先HTML部分。默認(rèn)顯示車牌子選擇列表，其他兩個(gè)模塊隱藏。

<div class="wrap">
 <div id="Brand">
  <div>品牌</div>
   <ul class="mycar_hot_list">
    <li>
     <p>大眾</p>
    </li>
   </ul>
  </div>
  <div id="Type" >
   <dl>
   <dt>比亞迪汽車</dt>
   <dd>宋</dd>
  </dl>
 </div>
 <div id="Series" >
  <ul class="mycar_datalist">
    <li>
     2013年款
    <li>
  </ul>
 </div>
</div>

js邏輯控制部分

①定義一個(gè)變量對(duì)象，存儲(chǔ)三個(gè)模塊中分別選擇的數(shù)據(jù)、定義hash值、相應(yīng)模塊的處理邏輯函數(shù)。

info={
      brand:'',
      carType:'',
      carSeries:'',
      pages:['Brand','Type','Series'] 
    };
info.selectBrand=function(){
   document.title = '選擇商標(biāo)';
   brandEvent();
}
//選擇車型
info.selectType=function(){
   document.title = '選擇車型';
   document.body.scrollTop = 0; //滾到頂部
    window.scrollTo(0, 0);
    typeEvent(); //為該模塊的dom綁定事件或做其他邏輯
}
//選擇車系
info.selectSeries=function(){
   document.title = '選擇車系';
   document.body.scrollTop = 0;
   window.scrollTo(0, 0);
   seriesEvent();
}

②dom綁定事件&其他邏輯

 function brandEvent(){
//綁定跳轉(zhuǎn)
  $('#Brand ul li').click(function(){
    info.brand=$(this).find('p').text();
    goPage('Type');
  })
 }
 function typeEvent(){
//綁定跳轉(zhuǎn)
  $('#Type dd').click(function(){
    info.carType=$(this).text();
    goPage('Series');
  })
 }
 function seriesEvent(){...}

③goPage邏輯跳轉(zhuǎn)控制

function goPage(tag) {
  if ((tag == 'Brand')&&(location.hash.indexOf('Type')!=-1)){ // 后退操作
      history.back();
      document.title = '選擇商標(biāo)'; 
  }else if ((tag == 'Type')&&(location.hash.indexOf('Series')!=-1)){
      history.back();
      document.title = '選擇車型';
  }else {
    location.hash = tag;
  }
}

④js入口文件（這里用了zepto.js來選擇dom）

window.onload=function(){
    info.selectBrand(); //為默認(rèn)顯示的模塊中的元素綁定相應(yīng)的事件及其他邏輯
    $(window).on("hashchange", function (e) {
      doHashChange();
    });
}

⑤最重要的hash改變邏輯控制

function doHashChange(){
  //獲取hash的值
  var hash = location.hash.split('|')[0],
    tag = hash.replace(/#/g, '');
  if (info.pages.indexOf(tag) == -1) {
    tag = 'Brand';
  }
  $('.wrap').children('div').hide();  
  //執(zhí)行每個(gè)模塊不同的方法
  if(typeof(info['select' + tag]) == "function"){
    info['select' + tag]();
  }
  //展示對(duì)應(yīng)dom
  $('#' + tag).show();
}

關(guān)于“如何使用原生js做單頁應(yīng)用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。