私はテストコードを書き、require.jsを使用して、そのプラグインText.jsと協力して、最も単純な単一ページアプリケーションを実装しました。簡単に記録し、将来のレビューを促進できます。
gitアドレス：https：//github.com/lily1010/requirespa
以下のディレクトリを見てみましょう
上記のプロジェクトからわかるように、CSSを個別に抽出し、オンデマンド負荷を実装しました。つまり、test1.htmlがロードされるとtest1.cssがロードされ、test2.htmlがロードされるとtest2.cssがロードされます。
最初にエントリindex.htmlコードを見てみましょう
<！Doctype html> <html> <head> <meta charset = "utf-8"/> <title> </title> <meta name = "viewport" content = "device-width =" device-width = 1、minimut-scale = 1、maximing-scale = 1、user-scalable = no "/> <スタイルタイプ= data-main = "js/main" src = "js/require.js"> </scrip> <div> </div> </body> </html>
上記は非常に簡単です。最初に、requirejsエントリデータメインを定義します。さらに、CSSをオンデマンドでロードするために、クラスCSSアトリブを定義しました。
2。パスを構成し、main.jsで論理処理を行います
require.config（{paths：{"jquery"： "lib/jquery-1.11.0"、 "text"： "lib/text"、 "text1"： "../ template/test1.html"、//パスに注意を払う "text2"： "../ template/test2.html"、 " "css2"： "../ style/test2.css"}}）require（['jquery'、 'text！text1'、 'text！text！text！text！css2']、function（$、template1、template2、css1、css2）{/html.html.html.html.html.htmlの設定を設定します。 $（ "。CSS-Attribute"）。html（css1）; html（template1）; $（ "。ページ"）。html（template2）}）上記は最も基本的な要件構成です。Text.jsの使用に注意してください、それは非常に簡単です
3つ、2つのページの構造とスタイルを見てみましょう
test1.htmlコードは次のとおりです。
<div> <butth>私をクリックしてスパの2番目のページにジャンプします</button> </div>
test1.htmlのCSS、つまり、test1.cssコードは次のとおりです。
.test1 {position：absolute;上：0;下：0;左：0;右：0;バックグラウンドカラー：red;}。skip {position：absolute;トップ：50％;左：50％; -webkit-transform：翻訳（-50％、-50％）;変換：翻訳（-50％、-50％）;}効果は次のとおりです。
test2.htmlコードは次のとおりです。
<div> <butth>私は2番目のページです。私をクリックして最初のページに戻ります</button> </div>
test2.htmlのCSS、つまり、test2.cssコードは次のとおりです。
.test2 {position：absolute;上：0;下：0;左：0;右：0;バックグラウンドカラー：ピンク;}。skip2 {position：absolute;トップ：50％;左：50％; -webkit-transform：翻訳（-50％、-50％）;変換：翻訳（-50％、-50％）;}効果は次のとおりです。
上記の記事では、シングルページアプリケーション（SPA）の簡単な実装が必要です。これは、私があなたと共有したすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。