バックボーンルーティングに vue-router に似たナビゲーションフックを追加する方法
まえがき
まず、なぜ私がバックボーンを書こうと思ったかを話させてください。なぜなら、バックボーンは私が卒業以来仕事で使った最初のフロントエンドフレームワークだったからです。私の勤めている会社は安定性を重視しており、バックボーンも柔軟で軽量なのでコード量も少なくなります。
わかりました、実際、これは確かに利点ですが、私はまだ新しいテクノロジーを学ぶのが好きなので、次に構築しているブログを共有します（技術的な要点はvue2、koa2、mongodb、redis...）。
タイトルの通り、この記事は主にバックボーンルーティングの方法を拡張します。考えてみると、ルートを切り替えるときに、切り替えられたルートに対応する処理メソッドを実行する前または後にいくつかの操作を行う必要があることがわかります。このとき、なんと恥ずかしいことでしょう。 vue を使用したことのある友人は、vue-router が ナビゲーション フック を提供していることを知っているはずです。
主にプロジェクト内で単一ページの切り替えが発生した場合にこのメソッドを拡張したいと思います:
たとえば、ページ A からページ B に切り替えるときに、ページ A がバックエンドを要求すると、非常に時間がかかります。 。このとき、バックエンドがまだ応答していない場合は、ページ B に切り替えます。ページ B に切り替えた後にリクエストが失敗し、失敗プロンプト ボックスがポップアップ表示される場合、これは UX エラーであることが明らかです。
失敗プロンプトが表示されたときに、現在の URL を判断してポップアップするかどうかを決定すると考える人もいるかもしれませんが、私がやりたいのは、保留中のリクエストがあるかどうかを判断することです。切り替え前の現在のページでキャンセル要求があった場合はキャンセルされます。そこで上記のような需要が生まれます。
Text
まず、バックボーンルーティング機能を備えたインターフェイスを作成しましょう。インターフェイスは簡単なので、コードを貼り付けます
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li><ahref="#pz">pz</a></li>
<li><ahref="#wx">wx</a></li>
<li><ahref="#sp">sp</a></li>
</ul>
<pid="page"></p>
</body>
<scriptsrc="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<scriptsrc="https://cdn.bootcss.com/underscore.js/1.6.0/underscore.js"></script>
<scriptsrc="https://cdn.bootcss.com/backbone.js/1.1.0/backbone.js"></script>
<script>
varRouter = Backbone.Router.extend({
initialize:function() {
console.log('initialize');
},
routes: {
'':'pz',
'pz':'pz',
'wx':'wx',
'sp':'sp'
},
pz:function() {
console.log('pz');
document.getElementById('page').innerHTML ='Hello pz';
},
wx:function() {
console.log('wx');
document.getElementById('page').innerHTML ='Hello wx';
},
sp:function() {
console.log('sp');
document.getElementById('page').innerHTML ='Hello sp';
}
});
varrouter = newRouter();
Backbone.history.start();
</script>
</html>この時点で、バックボーンのソースコード。 bootcdnをここからダウンロードしてください。さまざまなjsライブラリのソースコードをダウンロードするのに最も便利な場所です。ここと同じように、私はバックボーンのバージョン 1.1.0 を使用しています (これは会社が使用しているもので、私はそれを変更するのが面倒です)。
特定のルーティングメソッドをトリガーする前にbeforeメソッドを追加したいので、ソースコード内のこのメソッドの部分を分析する必要があることは明らかです
見つけやすいです
この時点で、次のものを取得できます (もちろん、initialize メソッドに従って記述できます)
次に、index.html を変更します。
この時点でスイッチが表示されています
もちろん、ソースコードを直接変更するのはフレンドリーではありません。以下の通り:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li><ahref="#pz">pz</a></li>
<li><ahref="#wx">wx</a></li>
<li><ahref="#sp">sp</a></li>
</ul>
<p id="page"></p>
</body>
<scriptsrc="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<scriptsrc="https://cdn.bootcss.com/underscore.js/1.6.0/underscore.js"></script>
<scriptsrc="https://cdn.bootcss.com/backbone.js/1.1.0/backbone.js"></script>
<script>
Backbone.Router.prototype.before =function () { };
Backbone.Router.prototype.after =function () { };
Backbone.Router.prototype.route =function (route,name,callback)
{
if (!_.isRegExp(route))route =this._routeToRegExp(route);
if (_.isFunction(name)) {
callback = name;
name = '';
}
if (!callback)callback =this[name];
var router =this;
Backbone.history.route(route,function (fragment)
{
var args =router._extractParameters(route,fragment);
router.before.apply(router,args);
callback && callback.apply(router,args);
router.after.apply(router,args);
router.trigger.apply(router, ['route:' +name].concat(args));
router.trigger('route',name,args);
Backbone.history.trigger('route',router,name,args);
});
return this;
};
var Router =Backbone.Router.extend({
initialize: function () {
console.log('initialize');
},
before: function () {
console.log('before');
},
after: function () {
console.log('after');
},
routes: {
'': 'pz',
'pz': 'pz',
'wx': 'wx',
'sp': 'sp'
},
pz: function () {
console.log('pz');
document.getElementById('page').innerHTML ='Hello pz';
},
wx: function () {
console.log('wx');
document.getElementById('page').innerHTML ='Hello wx';
},
sp: function () {
console.log('sp');
document.getElementById('page').innerHTML ='Hello sp';
}
});
var router =newRouter();
Backbone.history.start();
</script>
</html>以上がバックボーンルーティングに vue-router に似たナビゲーションフックを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1653
14
1413
52
1304
25
1251
29
1224
24
win11 で新しいハードドライブを追加するチュートリアル
Jan 05, 2024 am 09:39 AM
コンピュータを購入するとき、必ずしも大容量のハードドライブを選択する必要はありませんが、現時点で、win11 に新しいハードドライブを追加したい場合は、まず購入した新しいハードドライブをインストールしてから、コンピュータにパーティションを追加できます。 win11 で新しいハード ドライブを追加するチュートリアル: 1. まず、ホストを分解し、ハード ドライブのスロットを見つけます。 2. それを見つけたら、まず「データケーブル」を接続しますが、通常はフールプルーフ設計になっており、挿入できない場合は方向を逆にします。 3. 次に、新しいハードドライブをハードドライブスロットに挿入します。 4. 挿入後、データ ケーブルのもう一方の端をコンピュータのマザーボードに接続します。 5. インストールが完了したら、ホストに戻して電源をオンにします。 6. 起動後、「このコンピュータ」を右クリックして「コンピュータの管理」を開きます。 7. 開いたら、左下隅にある「ディスクの管理」をクリックします。 8. 次に、右側で次のことができます。
Mijia にテレビを追加する方法
Mar 25, 2024 pm 05:00 PM
多くのユーザーは、現代生活において Xiaomi スマート ホーム相互接続の電子エコシステムをますます支持しています。Mijia APP に接続した後、携帯電話で接続されたデバイスを簡単に制御できます。しかし、多くのユーザーはまだ Mijia を追加する方法を知りません。このチュートリアル ガイドでは、困っているすべての人を助けるために、具体的な接続方法と手順を説明します。 1. Mijia APPをダウンロードした後、Xiaomi アカウントを作成またはログインします。 2. 追加方法: 新しいデバイスの電源を入れた後、携帯電話をデバイスに近づけて Xiaomi TV の電源を入れます。通常の状況では、接続プロンプトがポップアップ表示されます。「OK」を選択してデバイスの接続プロセスに入ります。プロンプトが表示されない場合は、スマート ホーム APP に入った後、左下の 1 番目のボタンをクリックしてデバイスを手動で追加することもできます。
Win11 でデスクトップ ショートカットをすばやく作成するチュートリアル
Dec 27, 2023 pm 04:29 PM
win11ではデスクトップショートカットを追加することでデスクトップ上のソフトやファイルを素早く起動することができ、必要なファイルを右クリックするだけで操作することができます。 win11 でデスクトップ ショートカットを追加する: 1. 「この PC」を開き、デスクトップ ショートカットを追加するファイルまたはソフトウェアを見つけます。 2. 見つけたら、右クリックして選択し、[その他のオプションを表示] をクリックします。 3. 次に、[送信] - [デスクトップ ショートカット] を選択します。 4. 操作が完了すると、デスクトップにショートカットが表示されます。
MetaMask ウォレットで Polygon ネットワークに接続するにはどうすればよいですか? MetaMask ウォレットを Polygon ネットワークに接続するためのチュートリアル ガイド
Jan 19, 2024 pm 04:36 PM
PolygonMainnet ネットワークの追加方法 Metamask で MATIC (Polygon) を使用するには、「PolygonMainnet」というプライベート ネットワークを追加する必要があります。間違ったネットワーク アドレスで転送すると問題が発生する可能性があるため、$MATIC から転送する前に必ず「PolygonMainnet」ネットワークを使用してください。 Metamask ウォレットはデフォルトで Ethereum メインネットに接続されていますが、単に「PolygonMainnet」を追加して $MATIC を使用することもできます。簡単なコピー＆ペーストの手順をいくつか行うだけで完了です。まず、メタマスクウォレットで、右上隅のネットワークオプションをクリックし、「C」を選択します
Vue で画像に透かしを追加するにはどうすればよいですか?
Aug 19, 2023 pm 12:37 PM
Vue で画像に透かしを追加するにはどうすればよいですか? Vue は、Web アプリケーションの構築に広く使用されている人気のある JavaScript フレームワークです。画像の著作権を保護したり、画像の認識性を高めたりするために、Vue アプリケーションで画像に透かしを追加する必要がある場合があります。この記事では、Vue で画像にウォーターマークを追加する方法と、対応するコード例を紹介します。最初のステップは、Vue にウォーターマークを追加するためのサードパーティ ライブラリを導入することです。ウォーターマークを使用することをお勧めします
Tampermonkey で新しいスクリプトを追加する方法 - Tampermonkey でスクリプトを削除する方法
Mar 18, 2024 pm 12:10 PM
Tampermonkey Chrome 拡張機能は、スクリプトを通じてユーザー効率とブラウジング エクスペリエンスを向上させるユーザー スクリプト管理プラグインです。では、Tampermonkey はどのようにして新しいスクリプトを追加するのでしょうか?スクリプトを削除するにはどうすればよいですか?エディターに以下の答えを与えてもらいましょう! Tampermonkey に新しいスクリプトを追加する方法: 1. GreasyFork を例に挙げます。GreasyFork Web ページを開いて、従うスクリプトを入力します。ここでは、エディターはワンクリックのオフライン ダウンロードを選択します。 2. スクリプトを選択します。スクリプト ページに入ると、このスクリプトをインストールするボタンが表示されます。 3. クリックしてこのスクリプトをインストールすると、インストール インターフェイスが表示されます。ここをクリックしてインストールしてください。 4. インストール スクリプトでワンクリックでインストールされたことが確認できます。
![Outlook がアカウントの追加中にスタックする [修正済み]](https://img.php.cn/upload/article/000/887/227/171116770937641.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
Outlook がアカウントの追加中にスタックする [修正済み]
Mar 23, 2024 pm 12:21 PM
Outlook でアカウントを追加する際に問題が発生した場合は、次の解決策を試して解決できます。通常、これはネットワーク接続の障害、ユーザー プロファイルの破損、またはその他の一時的な問題によって発生する可能性があります。この記事で説明する方法を使用すると、これらの問題を簡単に解決し、Outlook を正常に実行できるようになります。 Outlook がアカウントの追加で停止する Outlook がアカウントの追加で停止する場合は、以下の修正を使用してください。 インターネットを切断して再接続する ウイルス対策ソフトウェアを一時的に無効にする 新しい Outlook プロファイルを作成する セーフ モードでアカウントの追加を試行する IPv6 を無効にする Microsoft サポートと回復アシスタントの修復を実行するOffice アプリケーション Outlook アカウントの追加が必要です
Java 配列に要素を追加する一般的な方法
Feb 21, 2024 am 11:21 AM
Java 配列に要素を追加する一般的な方法、特定のコード例が必要 Java では、配列は同じ型の複数の要素を格納できる共通のデータ構造です。実際の開発では、配列に新しい要素を追加する必要があることがよくあります。この記事では、Java で配列に要素を追加する一般的な方法を紹介し、具体的なコード例を示します。ループを使用して新しい配列を作成する簡単な方法は、新しい配列を作成し、古い配列の要素を新しい配列にコピーし、新しい要素を追加することです。コード例は次のとおりです。 //元の配列 i
