I have done back-end development, especially when I have used Django or express, I should be familiar with the routing functions on the server side. Wordpress, a popular blog system in foreign countries, is also a very classic routing implementation case. So, what exactly is the route? Let’s briefly talk about it through wordpress.
Those who understand the rewrite rules of wordpress are all aware that in fact, any URL access is based on index.php in the wordpress installation directory (except for access to files already exist on the server). It will be obvious when the wordpress fixed link is in the mode setting. For example, the URL of the article is index.php?p=id, and the URL of the classification page is index.php?cat=id.
Here, index.php acts as a router function, please see the following picture:
In other words, no matter what address you are visiting, all requests will eventually be redirected to index.php. The program will determine which type of page you need based on the characteristics of the access URL, and then make a query to the database, and finally return the html content to the browser.
What we mentioned above is web backend routing, so what is the front-end routing? In fact, front-end routing technology is widely used now, and many open source js library support front-end routing, such as angularJS, ember.js, director.js, etc. The principle of front-end routing is the same as back-end routing. It allows all interactions and displays them on one page to run to reduce server requests and improve customer experience. More and more websites, especially web applications, use front-end routing.
director.js is the purest route registration/parser. It uses the "#" symbol to organize different URL paths without refreshing the page and match different callback methods according to different URL paths. Director.js can not only be applied to the client, but also in the background using node.js, it can also implement the backend routing function mentioned above. Let’s take a look at the following examples about front-end routing implementation
You need to design a web desktop application similar to web QQ. There are many small icons on the desktop, and each small icon is a functional application, similar to a computer desktop. There is a Baidu News button on the desktop. Click it to pop up a window on the current page. You can view Baidu News and another icon. Click it to view the current time. Here is a simple example:
<!DOCTYPE HTML><html lang="en"><head><meta charset="UTF-8"><script src="https://rawgit.com/flatiron/director/master/build/director.min.js"></script><style> * {margin:0;padding:0} body {width:100%;height:100%;background:#3d72b8} #baidunews {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;} #tweibo {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;}</style></head><body> <a href="#/baidunews" id="baidunews"></a> <a href="#/time" id="tweibo"></a><script> //Define route var route = { "/time":nowtime, "/baidunews":[showframe,getbaidunews] } //Initialize route var router = Router(route) router.init(); //Define the callback function that displays the current time function nowtime(){ var now=new Date(); var y=now.getFullYear(); var m=now.getMonth()+1; var d=now.getDate(); var h=now.getHours(); var mi=now.getMinutes(); var s=now.getSeconds(); alert("current time/n"+y+"year"+m+"month"+d+"day"+h+"time"+mi+"minute"+s+"seconds"); } //Define the function that displays the browser framework function showframe(){ var f=document.createElement("div"); f.style.width="985px"; f.style.height="500px"; f.style.position="absolute"; f.style.top="50px"; f.style.left="200px"; f.style.background="white"; f.style.border="2px solid #ccc"; //Close button var close=document.createElement("span"); close.style.position="absolute"; close.style.right="5px"; close.style.cursor="pointer"; close.style.marginRight="5px"; close.onclick=function(){ document.body.removeChild(f); } close.innerHTML="X"; //Load the iframe outside the site var win=document.createElement("iframe"); win.id="myiframe"; win.frameBorder=0; win.style.width="100%"; win.style.height="100%"; f.appendChild(close); f.appendChild(win); document.body.appendChild(f); } //Define the function function to load Baidu News web page getbaidunew(){ document.getElementById("myiframe").src="http://news.baidu.com/"; }</script></body></html>From the above code, we can see that director.js uses "#" in the page for routing and forwarding. The above example is just a very simple example. Director.js can implement more complex and huge functions. It can interact with ajax and server data, and can coexist with other js class libraries. It is a powerful web application development tool.
Does director.js have any impact on SEO?
The client's director.js has an impact on SEO, because all the data is only on one page, and some data is stored in a way that is not conducive to search engine spiders. If you need to be SEO friendly, it means that you need to construct a "web page" instead of a "web application". Director.js is not recommended.
Reference: director.js