백본 라우팅에 vue-router와 유사한 탐색 후크를 추가하는 방법
- 一个新手원래의
- 2017-09-23 09:48:472117검색
서문
우선 왜 백본을 작성하고 싶었는지 말씀드리겠습니다. 왜냐하면 백본은 제가 졸업 후 업무에 사용한 첫 번째 프론트엔드 프레임워크였기 때문입니다. 제가 근무하는 회사는 규모가 큰 회사라 안정성에 더 중점을 두고 있습니다. 게다가 백본이 유연하고 가벼우며, 코드의 양도 더 적을 것입니다.
알겠습니다. 사실 이게 장점이긴 합니다만, 저는 여전히 새로운 기술을 배우는 것을 좋아하므로 다음에 만들고 있는 블로그를 공유하겠습니다. (기술 스틱은 vue2, koa2, mongodb, redis...) .
제목에서 알 수 있듯이 이 기사는 주로 백본 라우팅 방법을 확장합니다. 경로를 전환할 때 전환된 경로에 해당하는 처리 방법을 실행하기 전이나 후에 몇 가지 작업을 수행해야 할 수도 있습니다. 이때 백본이 제공되지 않는다는 것을 알게 됩니다. vue를 사용해 본 친구들은 vue-router가 탐색 후크를 제공한다는 것을 알아야 합니다.
프로젝트에서 단일 페이지 전환이 발생할 때 주로 이 방법을 확장하고 싶습니다.
예를 들어페이지 A에서 페이지 B로 전환할 때 페이지 A가 백엔드에 요청하면 매우 시간이 많이 걸립니다. 이때 백엔드가 아직 응답이 없으면 페이지 B로 전환한다. 페이지 B로 전환한 후 요청이 실패하고 실패 프롬프트 박스가 뜨면 이는 UX 실패임이 분명하다.
어떤 친구들은 실패 프롬프트가 뜨면 현재 URL을 판단한 후 팝업 여부를 결정한다고 생각할 수도 있지만, 제가 하고 싶은 것은 대기 중인 요청이 있는지 판단하는 것입니다. 전환 전 현재 페이지에서 취소 요청이 있으면 취소됩니다. 그래서 위에서 언급한 수요가 옵니다.
Text
먼저 백본 라우팅 기능이 있는 인터페이스를 만들어 보겠습니다. 인터페이스가 간단하므로 코드를 붙여넣겠습니다
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li><ahref="#pz">pz</a></li>
<li><ahref="#wx">wx</a></li>
<li><ahref="#sp">sp</a></li>
</ul>
<pid="page"></p>
</body>
<scriptsrc="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<scriptsrc="https://cdn.bootcss.com/underscore.js/1.6.0/underscore.js"></script>
<scriptsrc="https://cdn.bootcss.com/backbone.js/1.1.0/backbone.js"></script>
<script>
varRouter = Backbone.Router.extend({
initialize:function() {
console.log('initialize');
},
routes: {
'':'pz',
'pz':'pz',
'wx':'wx',
'sp':'sp'
},
pz:function() {
console.log('pz');
document.getElementById('page').innerHTML ='Hello pz';
},
wx:function() {
console.log('wx');
document.getElementById('page').innerHTML ='Hello wx';
},
sp:function() {
console.log('sp');
document.getElementById('page').innerHTML ='Hello sp';
}
});
varrouter = newRouter();
Backbone.history.start();
</script>
</html>이때 확인해야 할 부분이 있습니다. 백본 소스 코드. 여기에서 bootcdn을 다운로드하세요. 다양한 js 라이브러리의 소스 코드를 다운로드할 수 있는 가장 편리한 장소입니다. 여기서처럼 저는 백본 버전 1.1.0을 사용하고 있습니다. (이것은 회사에서 사용하는 버전이고 저는 너무 게으르기 때문에 변경할 수 없습니다.)
특정 라우팅 메소드를 트리거하기 전에 before 메소드를 추가하려고 하므로 소스 코드에서 이 메소드의 일부를 분석해야 한다는 것은 명백합니다
입니다. 우리가 쉽게 찾을 수 있습니다
이 시점에서 다음을 얻을 수 있습니다. (물론 조롱박 그림에 따른 초기화 방법에 따라 작성할 수 있습니다.)
그러면 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>Document</title>
</head>
<body>
<ul>
<li><ahref="#pz">pz</a></li>
<li><ahref="#wx">wx</a></li>
<li><ahref="#sp">sp</a></li>
</ul>
<p id="page"></p>
</body>
<scriptsrc="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<scriptsrc="https://cdn.bootcss.com/underscore.js/1.6.0/underscore.js"></script>
<scriptsrc="https://cdn.bootcss.com/backbone.js/1.1.0/backbone.js"></script>
<script>
Backbone.Router.prototype.before =function () { };
Backbone.Router.prototype.after =function () { };
Backbone.Router.prototype.route =function (route,name,callback)
{
if (!_.isRegExp(route))route =this._routeToRegExp(route);
if (_.isFunction(name)) {
callback = name;
name = '';
}
if (!callback)callback =this[name];
var router =this;
Backbone.history.route(route,function (fragment)
{
var args =router._extractParameters(route,fragment);
router.before.apply(router,args);
callback && callback.apply(router,args);
router.after.apply(router,args);
router.trigger.apply(router, ['route:' +name].concat(args));
router.trigger('route',name,args);
Backbone.history.trigger('route',router,name,args);
});
return this;
};
var Router =Backbone.Router.extend({
initialize: function () {
console.log('initialize');
},
before: function () {
console.log('before');
},
after: function () {
console.log('after');
},
routes: {
'': 'pz',
'pz': 'pz',
'wx': 'wx',
'sp': 'sp'
},
pz: function () {
console.log('pz');
document.getElementById('page').innerHTML ='Hello pz';
},
wx: function () {
console.log('wx');
document.getElementById('page').innerHTML ='Hello wx';
},
sp: function () {
console.log('sp');
document.getElementById('page').innerHTML ='Hello sp';
}
});
var router =newRouter();
Backbone.history.start();
</script>
</html>위 내용은 백본 라우팅에 vue-router와 유사한 탐색 후크를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!