Director.js를 사용하여 프런트엔드 라우팅 사용 예제 구현
- 高洛峰원래의
- 2017-02-03 13:59:251423검색
director.js란 무엇인가요?
이해: Director.js 클라이언트의 경로 등록/파서인 프런트엔드 경로 프레임워크는 "#" 기호를 사용하여 새로 고치지 않고 다양한 URL 경로에 따라 다양한 URL 경로를 구성합니다. 다른 메소드 호출을 수행합니다. 이는 어떤 경로에 있든 방법이 있다는 것을 의미합니다.
경우: 클라이언트 브라우저 및 node.js 서버 애플리케이션. 새로 고침이 필요하지 않은 단일 페이지 애플리케이션 및 node.js 애플리케이션을 개발하는 데 매우 적합합니다.
호환성: 어떤 라이브러리에도 의존하지 않습니다. 예를 들어 jquery 등이 있습니다. 그러나 jquery와 잘 통합됩니다.
클라이언트 측 라우팅:
클라이언트 측 라우팅(해시 라우팅이라고도 함)을 사용하면 사용에 대한 정보와 관련하여 일부를 지정할 수 있습니다. URL 적용 상태, 사용자가 고정 URL을 지정하면 해당 페이지가 표시됩니다.
간단한 예
1. 단독으로 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Gentle Introduction</title>
<script
src="https://rawgit.com/flatiron/director/master/build/director.min.js">
</script>
<script>
var author = function () { console.log("author"); };
var books = function () { console.log("books"); };
var viewBook = function (bookId) {
console.log("viewBook: bookId is populated: " + bookId);
};
var routes = {
'/author': author,
'/books': [books, function() {
console.log("An inline route handler.");
}],
'/books/view/:bookId': viewBook
};
var router = Router(routes);
router.init();
</script>
</head>
<body>
<ul>
<li><a href="#/author">#/author</a></li>
<li><a href="#/books">#/books</a></li>
<li><a href="#/books/view/1">#/books/view/1</a></li>
</ul>
</body>
</html>2 jquery와 결합 시
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Gentle Introduction 2</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script
src="https://rawgit.com/flatiron/director/master/build/director.min.js">
</script>
<script>
$('document').ready(function() {
//
// create some functions to be executed when
// the correct route is issued by the user.
//
var showAuthorInfo = function () { console.log("showAuthorInfo"); };
var listBooks = function () { console.log("listBooks"); };
var allroutes = function() {
var route = window.location.hash.slice(2);
var sections = $('section');
var section;
section = sections.filter('[data-route=' + route + ']');
if (section.length) {
sections.hide(250);
section.show(250);
}
};
//
// define the routing table.
//
var routes = {
'/author': showAuthorInfo,
'/books': listBooks
};
//
// instantiate the router.
//
var router = Router(routes);
//
// a global configuration setting.
//
router.configure({
on: allroutes
});
router.init();
});
</script>
</head>
<body>
<section data-route="author">Author Name</section>
<section data-route="books">Book1, Book2, Book3</section>
<ul>
<li><a href="#/author">#/author</a></li>
<li><a href="#/books">#/books</a></li>
</ul>
</body>
</html>Director는 일반적인 작성 방법을 지원합니다
예제는 다음과 같습니다.
var director = require('director');
var router = new director.cli.Router();
router.on('create', function () {
console.log('create something');
});
router.on(/destroy/, function () {
console.log('destroy something');
});
// You will need to dispatch the cli arguments yourself
router.dispatch('on', process.argv.slice(2).join(' '));초기화 및 라우터 등록
var router = Router(routes);
또한 생성자에 전달된 Routes 매개변수는 경로입니다. 키-값 쌍 구조의 객체인 객체는 여러 수준에 중첩될 수 있습니다. 키 쌍에 해당하는 URL에 전달된 경로는 일반적으로 키 값은 구분 기호에 따라 잘린 후 특정 부분에 해당하고 키 값 쌍의 값은 트리거되어야 하는 콜백 함수의 이름에 해당합니다. 경로를 위해. 콜백 함수는 라우팅 테이블 객체가 사용되기 전에 선언되어야 합니다. 그렇지 않으면 js가 오류를 보고합니다.
또한, 콜백 함수는 특별한 경우가 아닌 이상 일반적으로 익명 함수를 사용하지 않는 것이 좋습니다.
var routes = {
'/dog': bark,
'/cat': [meow, scratch]
};
여기의 URL은 #dog 및 #cat입니다.
Router 개체를 선언한 후 초기화를 위해 init() 메서드를 호출해야 합니다. as:
router.init();
라우팅된 이벤트
라우팅 이벤트는 라우팅 레지스트리의 고정 이름 속성으로, 라우팅 방법이 router.dispatch( )이 호출되며 경로가 성공적으로 일치할 때 트리거되어야 하는 정의된 콜백 메서드입니다(여러 콜백 메서드를 정의할 수 있음). 위 즉시등록 함수의 "on" 메소드가 이벤트입니다. 구체적인 정보는 다음과 같습니다.
on: 경로 매칭 성공 시 실행해야 하는 메소드
before: 이전에 실행되는 메소드" on" 메소드가 트리거됩니다
클라이언트 측에서만 유효한 메소드:
after: 현재 등록 경로를 떠날 때 실행해야 하는 메소드
once: 현재 등록 경로는 한 번만 실행하는 방법입니다.
위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트에 가입하겠습니다.
director.js를 사용하여 프런트엔드 라우팅을 구현하는 것과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!