Clever Geek Handbook

ジャスナブ

ページナビゲーション



JavaScriptで記述されたナビゲーションを使用するサイトがWeb上に表示されることが多くなっています。 ナビゲーションにJavaScriptを使用する一般的なケース：メニューとコンテンツのブロックを含むページ。コンテンツはAJAXを介してロードされます。







ユーザーがアイテムをクリックし、JavaScriptがネットワークからコンテンツをロードし、コンテンツブロックに挿入します。ユーザーは満足します。ページにはリロードせずに必要なページが表示されます。



しかし、ここに問題があります：ページURL。 古いscoolサイトで、各メニュー項目に新しいHTMLページが表示され、ユーザーがブラウザのアドレスバーからコピーして友人またはブックマークに送信できる健全なURIを持っている場合、AJAXインターフェイスの場合、URIページには多くの場合、リンクがありませんドキュメントの現在のコンテンツ。



ブラウザのアドレスバーから友人にリンクを送信することにより、ユーザーは、現在表示しているコンテンツでドキュメントが開くか、ページの最初のコンテンツを含むドキュメントが開くかを確認できません。



この問題を解決するために、多くのプログラマーが現在表示されているコンテンツへのリンクをドキュメントURIのアンカーにエンコードすることは秘密ではありません。 たとえば、 jqapi.com （スクリーンショットはトピックの冒頭にあります）で、メニュー項目を選択すると、ページアンカーが＃p = {contentId}に変わります。



例：

jqapi.com/#p=jQuery.ajax

jqapi.com/#p=height

jqapi.com/#p=addClass



この場合、リンクのアンカーによってページをロードした後、リクエストされたコンテンツを単純に復元して表示できます。



残念ながら、現時点では、ドキュメントの現在の内容をアンカーにエンコードする問題を解決するために、誰もが自分のバイクを発明しています。 アンカーをコーディングするための単一の標準はありません。 さらに、開発者は多くの場合、アンカーが元々使用されていたものを忘れて、ユーザーがドキュメント内を移動できないようにします。



これらの問題をどうにかして解決するために、gbezyuk habrayuzerで 、上記の問題の解決に役立つJSNAVライブラリを作成するというアイデアを思いつきました。



どのように機能しますか？


JSNAVは、ドキュメントURIでJavaScriptハンドラー呼び出しをエンコードします。 エンコードには、次の形式のRFC1630互換URIが使用されます。

user:pass@host:port/path/resource?query#anchor;navEventName;param1;param2;...







ページアンカー構文：

ページのロード後、ライブラリは変数window.location.hrefによってURIの変更の監視を開始し、変更された場合、登録されたハンドラーを呼び出します。



JSNAVは、通常のアンカーの使用もサポートしています。アンカーを使用してリンクをたどる場合、scrollToはアンカー要素に対して作成されます。 この場合、最後に登録されたイベントの説明はURIに保存されます。



ハンドラーは通常の関数オブジェクトであり、その入力にアンカーからデコードされたイベントパラメーターが送信されます。



var addClassHandler = function (className, textId) {

var elm = textId? document .getElementById(textId) : this ;

if (elm.className && elm.className.indexOf(className) < 0) {

elm.className += " " + className;

}

}

JSNAV.bind( "addClass" , addClassHandler);







例のaddClassHandlerハンドラーは、次の形式のURIで呼び出されます。

ジャスナブ


ライブラリは純粋なJSで記述されており、理論的には、よく知られているフレームワークのいずれとも競合しないはずです。



間違いを報告したり、パッチを提供したり、プロジェクトのWebサイトでコードをダウンロードしたりします。 ソースはApache2ライセンスの下で利用可能です。



このページの例で、これがどのように機能するかを確認できます 。



PS


コメント、提案を聞いて、バグレポートを受け取ってうれしいです。 さらに、コードとドキュメントの開発に参加するように皆を招待します。


More articles:


All Articles