Director.js はフロントエンドルーティングの使用例を実装します

ホームページ

ウェブフロントエンド

jsチュートリアル

Director.js はフロントエンドルーティングの使用例を実装します_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:16 PM

フロントエンドルーティング

バックエンド開発を行ったことがある方、特に 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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

See all articles