ホームページ > 記事 > ウェブフロントエンド > Director.js はフロントエンド ルーティングの使用例を実装します_JavaScript スキル
Director.js はフロントエンド ルーティングの使用例を実装します_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 16:16:111816ブラウズ
バックエンド開発を行ったことがある方、特に Django や Express を使用したことがある方は、海外の人気ブログ システムである WordPress も非常に古典的なルーティング実装ケースであることに精通しているはずです。では、WordPress を介したルーティングとは何でしょうか?
WordPress の書き換えルールを理解している人なら誰でも、実際には、あらゆる URL へのアクセスは WordPress インストール ディレクトリ内の Index.php に基づいていることを知っています (WordPress の固定リンクがサーバー上に既に存在するファイルへのアクセスを除く)。 pattern たとえば、記事のURLはindex.php?p=id、カテゴリーページのURLはindex.php?cat=idとなります。
ここでは、index.php がルーターとして機能します。以下の図を参照してください:
言い換えると、どのアドレスにアクセスしても、すべてのリクエストは最終的にはindex.phpにリダイレクトされ、プログラムはアクセスされたURLの特性に基づいて必要なページの種類を判断し、そこにクエリを実行します。データベースにアクセスし、最後に HTML コンテンツをブラウザに返します。
上記は Web バックエンド ルーティングに関するものですが、フロントエンド ルーティングとは何でしょうか?実際、フロントエンド ルーティング テクノロジは現在広く使用されており、angularJS、ember.js、director.js など、フロントエンド ルーティングをサポートするオープン ソースの JS ライブラリが多数あります。フロントエンド ルーティングの原理はバックエンド ルーティングの原理と同じで、すべてのインタラクションと表示を 1 つのページ上で実行してサーバー リクエストを削減し、顧客エクスペリエンスを向上させるというものです。フロントエンド ルーティングを使用する Web サイト、特に Web アプリケーションがますます増えています。ルーティングを終了します。
Director.js は、最も純粋なルート登録/パーサーであり、「#」記号を使用して、ページを更新せずにさまざまな URL パスを整理し、さまざまな URL パスに応じてさまざまなコールバック メソッドを照合します。 Director.js はクライアントに適用できるだけでなく、node.js を使用してバックグラウンドで前述のバックエンド ルーティング機能を実装することもできます。次のフロントエンドルーティングの実装例を見てください
Web QQ に似た Web デスクトップ アプリケーションをデザインする必要があります。デスクトップには、コンピューターのデスクトップに似た機能的なアプリケーションが多数あります。デスクトップに [Baidu News] ボタンがあります。これをクリックすると、現在のページにウィンドウが表示され、別のアイコンをクリックすると、現在の時刻が表示されます。
<!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" title="百度新闻"></a>
<a href="#/time" id="tweibo" title="当前时间"></a>
<script>
//定义路由
var route = {
"/time":nowtime,
"/baidunews":[showframe,getbaidunew]
}
//初始化路由
var router = Router(route)
router.init();
//定义显示当前时间的回调函数
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("现在时间\n"+y+"年"+m+"月"+d+"日 "+h+"时"+mi+"分"+s+"秒");
}
//定义显示浏览器框架的函数
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";
//关闭按钮
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";
//加载站外的iframe
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);
}
//定义加载百度新闻网页的函数
function getbaidunew(){
document.getElementById("myiframe").src="http://news.baidu.com/";
}
</script>
</body>
</html>
上記のコードからわかるように、director.js はルーティングと転送にページ内の「#」を使用します。上記の例は非常に単純なものですが、Director.js はより複雑で巨大な機能を実装でき、ajax を介してサーバー側のデータを操作でき、他の JS ライブラリと共存できます。
director.js は SEO に影響を与えますか?
クライアント側の Director.js は SEO に影響します。これは、すべてのデータが 1 ページにのみ存在し、一部のデータの保存方法が、SEO に配慮する必要がある場合に検索エンジン スパイダーによるクロールに適さないためです。 , これは、「Web アプリケーション」ではなく「Web ページ」を構築する必要があることを意味し、director.js は非推奨になります。
参考: director.js