快捷導(dǎo)航

用原生js做單頁(yè)應(yīng)用

更新時(shí)間：2017年01月17日 11:22:08 作者：小蚊

本文主要介紹了用原生js做單頁(yè)應(yīng)用的相關(guān)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

最近在公司接到一個(gè)需求，里面有一個(gè)三級(jí)跳轉(zhuǎn)。類(lèi)似于選擇地址的時(shí)候，選擇的順序是：省份->市->區(qū)。如果分三個(gè)頁(yè)面跳轉(zhuǎn)，那么體驗(yàn)非常不好，如果引入其他框架做成單頁(yè)應(yīng)用，又比較麻煩。所以可以用js把這一塊做成單頁(yè)應(yīng)用的樣子。。。

主要思路

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

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

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

<div class="wrap">
 <div id="Brand">
  <div>品牌</div>
   <ul class="mycar_hot_list">
    <li>
     <p>大眾</p>
    </li>
   </ul>
  </div>
  <div id="Type" style="display:none">
   <dl>
   <dt>比亞迪汽車(chē)</dt>
   <dd>宋</dd>
  </dl>
 </div>
 <div id="Series" style="display:none">
  <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();
}
//選擇車(chē)型
info.selectType=function(){
   document.title = '選擇車(chē)型';
   document.body.scrollTop = 0; //滾到頂部
    window.scrollTo(0, 0);
    typeEvent(); //為該模塊的dom綁定事件或做其他邏輯
}
//選擇車(chē)系
info.selectSeries=function(){
   document.title = '選擇車(chē)系';
   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 = '選擇車(chē)型';
  }else {
    location.hash = tag;
  }
}

④js入口文件（這里用了zepto.js來(lái)選擇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();
}

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: