JS 구현 전단 루트 기능 예시[원생 루트]

5049 단어 JS전단 경로
본 논문 의 사례 는 JS 가 전단 경로 기능 을 실현 하 는 것 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
경로 란 서로 다른 url 주소 에 따라 서로 다른 내용 이나 페이지 를 보 여 주 는 것 이다.초기 경로 의 개념 은 백 엔 드 에 나타 나 고 서버 엔 드 를 통 해 렌 더 링 한 후에 페이지 로 돌아 가 는 것 이다.페이지 가 점점 복잡 해 지면 서 서버 엔 드 의 압력 이 점점 커진다.나중에 ajax 비동기 리 셋 의 등장 으로 전단 도 url 을 관리 할 수 있 게 되 었 습 니 다.이때 전단 경로 가 나 타 났 습 니 다.
단일 페이지 는 전단 경로 의 유래 로 이 루어 진 것 이다.즉,사 이 트 는 한 페이지 만 있 고 네 비게 이 션 을 클릭 하면 서로 다른 내용 을 표시 하 며 대응 하 는 url 도 변화 하고 있다.이 과정 에서 js 는 url 의 변 화 를 실시 간 으로 감지 하여 표 시 된 내용 을 바 꿉 니 다.

경로 구현 원리:window 는 감청 함 수 를 연결 하고 url 의 hash 값 이 변 할 때 hashchange 리 셋 을 촉발 하여 리 셋 에서 서로 다른 조작 을 하고 바로 페이지 를 새로 고침 하여 서로 다른 페이지 를 표시 합 니 다.
다음은 전단 경로 의 간단 한 실현 입 니 다.경로 로 url 의 전환,페이지 내용 의 변 화 를 실현 합 니 다.
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>      </title>
  <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
 
  <style>
      *{
        margin:0;
        padding: 0;
      }

      .content{
        width: 500px;
        height: 300px;
        margin-top: 30px;
        margin:20px auto 0;
      }

      #click_btn{
        width: 500px;
        height: 50px;
        margin:100px auto 0;
      }

      #click_btn a{
        display: block;
        background: #333;
        color: #fff;
        text-decoration: none;
        line-height: 50px;
        text-align: center;
        float: left;
        margin-right: 15px;
        padding: 0px 15px;
      }

      #click_btn a:hover{
        background: #666;
      }
  </style>
 
</head>
<body>
<div id="click_btn">
  <a href="#/one" rel="external nofollow" >     </a>
  <a href="#/two" rel="external nofollow" >     </a>
  <a href="#/three" rel="external nofollow" >     </a>
</div>

<div class="content"></div>
 
<script src="router.js"></script>
<script src="test.js"></script>
 
</body>
</html>
router.js

//    
function Router() {
  this.routes = {};
  this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
  this.routes[path] = callback || function(){};//    hash         
};
Router.prototype.refresh = function() {
  console.log(location.hash.slice(1));//      hash 
  this.currentUrl = location.hash.slice(1) || '/';//    hash     ，    hash  /
  // console.log(this.currentUrl);
  if(this.currentUrl&&this.currentUrl!='/'){
    this.routes[this.currentUrl]();//     hash            
  }
 
};
Router.prototype.init = function() {
  window.addEventListener('load', this.refresh.bind(this), false);
  window.addEventListener('hashchange', this.refresh.bind(this), false);
}
// window      
window.Router = new Router();
window.Router.init();
test.js

Router.route('/one', function () {
  $(".content").html("<p>          url             ，              ，             ，         ，          。  ajax               url    ，  ，        。</p>");
});
Router.route('/two', function () {
  $(".content").html("<h3>              ，            ，            ，   url      。      ，js     url   ，         。</h3>");
});
Router.route('/three', function () {
  $(".content").html("<img src='https://upload-images.jianshu.io/upload_images/12890819-f8665293cc8d0dcf.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp' width='500'/>");
});
메모:router.js 는 test.js 전에 호출 해 야 합 니 다.그렇지 않 으 면 test.js 를 먼저 불 러 와 서 찾 을 수 없습니다.router.js 가 정의 되 지 않 았 습 니 다.
위의 router 대상 실현 은 주로 세 가지 방법 을 제공 합 니 다.
1.init 감청 브 라 우 저 url 의 hash 값 업데이트 이벤트.
2.route 저장 경로 가 업데이트 되 었 을 때 리 셋 배열 routes 로 되 돌 립 니 다.리 셋 함 수 는 페이지 를 업데이트 하 는 것 을 책임 집 니 다.
3.refresh 는 현재 url 의 리 셋 함 수 를 실행 하고 페이지 를 업데이트 합 니 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 전단 코드 디 버 깅 실행 도 구 를 사용 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
asp fckeditor 사용자 정의 업로드 파일 이름
CSS 에서 Float(부동)관련 기술 문장

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage