Use director.js to implement front-end routing usage examples

What is director.js?

Understanding: The front-end route framework, the route registration/parser of the director.js client, use the "#" sign to organize different URL paths without refreshing, and according to different URLs Path to make different method calls. This means that there is a method for whatever path there is.

Occasion: client browser and node.js server application. It is very suitable for developing single-page applications and node.js applications that do not require refreshing.

Compatibility: Does not depend on any library. For example jquery etc. But it can be well integrated with jquery;

Client-side routing:

Client-side routing (also called hash routing) allows you to specify some Regarding the information about using URL application status, when the user specifies a fixed URL, the corresponding page is displayed.

Simple example

1. Use alone

 
  
  
  
  
 

 
  

   
#/author
   
#/books
   
#/books/view/1
  
 

2When combined with jquery

 
  
  
  
  
  
 

 
  
Author Name
  
Book1, Book2, Book3
  

   
#/author
   
#/books
  
 

Director supports common writing method

Examples are as follows:

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(' '));

Initialization and router registration

var router = Router(routes);

In addition, the routes parameter passed in the constructor is a route Object, which is an object with a key-value pair structure, can be nested in multiple levels. The path passed in the URL corresponding to the key pair, generally a key value corresponds to a certain part after being cut according to the separator; and the value of the key value pair corresponds to the name of the callback function that needs to be triggered for the path. The callback function must be declared before the routing table object is used, otherwise js will report an error.

In addition, unless there are special circumstances, it is generally not recommended to use anonymous functions for callback functions. Please try to declare them first before using them.

　 var routes = {
 '/dog': bark, 
 '/cat': [meow, scratch]
};

The URLs here are #dog and #cat

After declaring the Router object, you need to call the init() method for initialization, such as:

router.init();

Routed events

Routing events are a fixed-named attribute in the routing registry, which refers to when the routing method router.dispatch() is called. , the defined callback method that needs to be triggered when the route matches successfully (multiple callback methods are allowed to be defined). The "on" method in the instant registration function above is an event. The specific information is as follows:

on: When the route is matched successfully, the method that needs to be executed

before: The method that is executed before the "on" method is triggered

Methods that are only valid on the client side:

after: Methods that need to be executed when leaving the current registration path

once: The current registration path is only Method of executing once

The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

For more articles related to using director.js to implement front-end routing, please pay attention to the PHP Chinese website!