기본 js를 사용하여 단일 페이지 애플리케이션 구축-JS 튜토리얼-php.cn

기본 js를 사용하여 단일 페이지 애플리케이션 구축

高洛峰

풀어 주다： 2016-11-30 17:04:40

원래의

1138명이 탐색했습니다.

기본 아이디어

URL의 해시 값을 변경하여 해당 모듈로 이동합니다. 먼저 기본 모듈을 표시하고 다른 모듈을 숨깁니다. 3개 모듈에 대해 각각 3개의 해시 값을 정의합니다. 기본 모듈의 옵션을 클릭하면 해시 값을 변경하는 동시에 창에서 해시 변경 이벤트를 모니터링합니다. 해당 모듈 점프 논리 처리를 수행합니다. 이러한 방식으로 브라우저의 앞뒤 이동을 시뮬레이션할 수 있으며 사용자 경험이 더 좋습니다.

아래에서 자세히 살펴보겠습니다. 이제 선택 순서는 자동차 브랜드->자동차 모델->자동차 시리즈입니다.

먼저 HTML 부분입니다. 차량 브랜드 선택 목록은 기본적으로 표시되며 나머지 두 모듈은 숨겨집니다.

<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>比亚迪汽车</dt>
      <dd>宋</dd>
    </dl>
  </div>
  <div id="Series" style="display:none">
    <ul class="mycar_datalist">
       <li>
         2013年款
       <li>
    </ul>
  </div>
</div>

로그인 후 복사

js 로직 제어부

① 세 개의 모듈에서 선택된 데이터를 저장할 변수 객체를 정의하고, 해시 값을 정의하며, 해당 모듈의 처리 로직 기능을 정의합니다.

   info={
            brand:&#39;&#39;,
            carType:&#39;&#39;,
            carSeries:&#39;&#39;,
            pages:[&#39;Brand&#39;,&#39;Type&#39;,&#39;Series&#39;] 
        };
info.selectBrand=function(){
      document.title = &#39;选择商标&#39;;
      brandEvent();
}
//选择车型
info.selectType=function(){
      document.title = &#39;选择车型&#39;;
      document.body.scrollTop = 0;  //滚到顶部
       window.scrollTo(0, 0);
       typeEvent();  //为该模块的dom绑定事件或做其他逻辑
}
//选择车系
info.selectSeries=function(){
      document.title = &#39;选择车系&#39;;
      document.body.scrollTop = 0;
      window.scrollTo(0, 0);
      seriesEvent();
}

로그인 후 복사

②dom 바인딩 이벤트 및 기타 로직

  function brandEvent(){
//绑定跳转
   $(&#39;#Brand ul li&#39;).click(function(){
       info.brand=$(this).find(&#39;p&#39;).text();
       goPage(&#39;Type&#39;);
   })
  }
  function typeEvent(){
//绑定跳转
   $(&#39;#Type  dd&#39;).click(function(){
       info.carType=$(this).text();
       goPage(&#39;Series&#39;);
   })
  }
  function seriesEvent(){...}

로그인 후 복사

③goPage 로직 점프 제어

function goPage(tag) {
    if ((tag == &#39;Brand&#39;)&&(location.hash.indexOf(&#39;Type&#39;)!=-1)){ // 后退操作
            history.back();
            document.title = &#39;选择商标&#39;; 
    }else if ((tag == &#39;Type&#39;)&&(location.hash.indexOf(&#39;Series&#39;)!=-1)){
            history.back();
            document.title = &#39;选择车型&#39;;
    }else {
        location.hash = tag;
    }
}

로그인 후 복사

④js 항목 파일(여기에서는 zepto.js가 사용됨) dom 선택 )

window.onload=function(){
        info.selectBrand();  //为默认显示的模块中的元素绑定相应的事件及其他逻辑
        $(window).on("hashchange", function (e) {
            doHashChange();
       });
}

로그인 후 복사

⑤가장 중요한 해시 변경 논리 제어

function doHashChange(){
    //获取hash的值
    var hash = location.hash.split(&#39;|&#39;)[0],
        tag = hash.replace(/#/g, &#39;&#39;);
    if (info.pages.indexOf(tag) == -1) {
        tag = &#39;Brand&#39;;
    }
    $(&#39;.wrap&#39;).children(&#39;div&#39;).hide();   
    //执行每个模块不同的方法
    if(typeof(info[&#39;select&#39; + tag]) == "function"){
        info[&#39;select&#39; + tag]();
    }
    //展示对应dom
    $(&#39;#&#39; + tag).show();
}

로그인 후 복사