個人サイトの再構築

最近個人のウェブサイトを最適化して、1ページの応用になって、フロントエンドのルーティング用のhistory API、いくつかの問題に出会って、ここで記録します:

はまず泥棒穴のwebpack公式ドキュメントで、更新が早すぎると推定され、ドキュメントの例は変更に間に合わない.jsonファイルを導入するにはjsonファイルの接尾辞をカスタム接尾辞(非json)に変更し、プロファイルでjson-loaderで接尾辞のファイル(例えばstr)を解析し、const json=require('./hello.str');でjsonファイル

を導入する.

historyは後退と前進の時にpopstateをトリガーし、pushstateの時にトリガーしません.1つ以上の後退キーをクリックすると、historyスタックはpopでstateを出さず、ポインタが移動するのでhistory.lengthは変わらない;他の詳細ページに進むと、新しいstateがpushされ、ポインタ以上の他のstateが

削除されます.

この単一ページアプリケーションはcssのdisplayを制御して表示ページを決定するために使用され、まずすべてのページhideを暴力的に表示し、urlパラメータに基づいて対応するページを表示し、多くのイベント依頼を使用するため、新しいページをロードするときは、現在のページのすべてのイベントバインドをクリアする必要があります(jqueryは.off()関数を使用します).イベントが複数回トリガーされるバグ

が発生しない

$(this)==$(e.currentTarget)==現在のバインドイベントの要素.$(e.target)はイベントをトリガする要素である.$('#a').on('click','#b',function(){})ここでの$(e.currentTarget)はa

を指す

フロントエンドフレームはjquery-weuiで、スライドの効果があり、swiperを使用しています.js、jquery-weuiが提供するswiperを使わないことをお勧めします.js、バージョンが古いのでバグのある

を使いました

htmlに空いているdom要素であれば、jsで動的にデータをロードする場合は、$().html()ではなく$().append()で、複数のページに重複するclassの要素がある場合は、セレクタでそれらを選択する際にページidのセレクタを追加しなければならない.そうしないと、すべて

に変更される
ソースアドレスを添付します.star:https://github.com/variinlkt/foodiess-rebuild