周囲に非常に多くの新しいテクノロジーが存在する場合、どの時間を探索する価値があるかを理解するのは容易ではありません。
（カール・セギン）
いくつかの新しいテクノロジーが他の新しいテクノロジーと急速に変化し、それらもまた急速に変化している興味深い時代がやってきました。 このプロセスの正の派生物は、この技術的な万華鏡が回転している間、開発者のための仕事があるということです。 しかし、時には問題が発生し、その解決のために、比fig的な言葉で言えば、新しいチェーンソーではなく、古いペンナイフの爪やすりが良いです。
この記事は、オープンスタンダードの基本的なメカニズムを使用して主な結果が得られる場合のサイト開発手法を示しています。
アーキテクチャ：フロントエンド、静的HTTPサーバー、XmlHttpRequest（XHR）、REST。
IDE：メモ帳、メモ帳++（Windows）、Gedit（Linux）。
互換性：ブラウザはJavaScriptとHTML DOMをサポートする必要があります。
レセプションの本質
このサイトは、コンテンツファイルへのアクセスを編成するHTMLページに基づいて開発されています。 開発者が設計したHTMLページはいくつでもかまいませんが、完全な機能を実現するには1つで十分です。 HTMLページでは、コンテンツファイルへのリンクはRESTルールに従って通常のHTMLリンクとして記述されます。 リンクが1か所にあるため、参照整合性が実現します。
コンテンツはテキストファイルにあり、一般的なHTMLマークアップでフォーマットされたテキストです。 コンテンツファイルの場所に制限はありませんが、テーマセクション（ディレクトリ）に配置する場合は論理的です。 コンテンツファイルはHTMLページに関連付けられておらず、1つ以上のHTMLページに表示できます。
HTMLページが最初にロードされます。 次に、コンテンツファイルが決定され、アップロードされます。 コンテンツファイルの名前はHTMLリンクのURLに書き込まれ、RESTルールによって決定されます。 コンテンツファイルはXHRを介してアップロードされます。
制限はありません。 このような開発では、設計、コード、変数名、およびその他の開発契約が一般的です。 テンプレートに一般的に使用される特別なマークアップはありません。
これはすべて、フロントエンドでのみSSIに似ています。
仕組み
HTMLリンクのURLを読み取り、パラメーターを決定します。
function getUrlParametr(parName) { var params = location.search.substring(1).split("&"); for (var i = 0; i < params.length; i++) { if (params[i].split("=")[0] == parName) { return params[i].split("=")[1]; } } return ""; }
パラメーターの数と名前は開発者が決定します。主なことは、HTMLページがそれらを処理する機能を提供することです。
コンテンツをダウンロードして表示する：
function loadXMLDoc(divName, contentFile) { var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById(divName).innerHTML = xmlhttp.responseText; // } } xmlhttp.open("GET",contentFile,true); xmlhttp.send(); }
パラメータ「id」は、コンテンツファイルの場所を設定します。これは、HTMLページのロード後に決定されます。
function onPageLoad() { var paramId = getUrlParametr("id"); if(paramId == "") paramId = "/xdata/news.htm"; // loadXMLDoc("div_body",paramId); }
<body onload='onPageLoad()'>
HTMLリンクは、HTMLページがそれ自体を参照するように設計されていますが、idパラメーターの値が異なります。
<a href='site-1-page.htm?id=/it/it-box.txt'> </a>
新しいコンテンツを追加するには、コンテンツファイルを作成し、HTMLリンクを追加するだけです。 コンテンツファイルの拡張子は任意ですが、「txt」や「htm」などのよく知られたMIMEタイプに一致する方が便利です。 そのため、サイトを外部リソースに簡単に転送できます。
これらは、情報サイトを作成するための重要な側面です。 必要に応じて、Webサービスに基づいて対話機能を追加できます。 複数のHTMLページを使用する場合、たとえば、すべてのページに対して1つのメニューを作成し、コンテンツと同じ原理でロードすることができます。 これにより、参照整合性の維持が容易になりますが、回収は追加のXHRリクエストになります。
コンテンツファイルの代わりにHTMLページを挿入する方法
別のHTMLページをベースHTMLページに挿入する最も簡単な方法は、iframe HTMLタグを使用することです。 この場合、XHRは必要ありません。 URLに、「iframe」などの別のパラメーターを追加し、基本的なHTMLページを読み込むときに処理する必要があります。
function onPageLoad() { var paramId = getUrlParametr("id"); var paramIframe = getUrlParametr("iframe"); if(paramId == "") paramId = "/it/it-box.txt"; // if(paramIframe == "" || paramIframe == "0") loadXMLDoc("div_body",paramId); if(paramIframe == "1") document.getElementById("div_body").innerHTML = "<iframe src='" + paramId + "'></iframe>"; }
主な違いは、コンテンツファイルはベースHTMLページのDOMに埋め込まれ、単一のCSSで処理されますが、iframeに読み込まれたHTMLページは処理されないことです。
HTMLページがルートにない場合
サイト全体ではなく、たとえばテーマ別のセクションを開発する必要がある場合があります。 HTMLリンクの関連性を維持するには、セクションへのパスを考慮する必要があります。
function onPageLoad(rootPath) { var paramId = getUrlParametr("id"); var paramIframe = getUrlParametr("iframe"); if(paramIframe == "" || paramIframe == 0) { if(paramId == "") paramId = rootPath + "/it/it-box.txt" else paramId = rootPath + paramId; loadXMLDoc("div_body",paramId); } if(paramIframe == 1) { paramId = rootPath + paramId; document.getElementById("div_body").innerHTML = "<iframe src='" + paramId + "' width='100%' height='400'></iframe>"; } if(paramIframe == 2) { document.getElementById("div_body").innerHTML = "<iframe src='" + paramId + "' width='100%' height='400'></iframe>"; } } }
<body onload='onPageLoad("/stencil-html-site-on-one-page")'>
これは、たとえば、GitHubの記事のサンプルコードです。
準備ができたテンプレート
質問がある場合は、 デモサイト（GitHub）を見て、サイトテンプレート（GitHub）をダウンロードできます。 デモとテンプレートは既製のレイアウトであり、無害なコンテンツで満たされています。
開発は、ローカルにインストールされた任意の静的HTTPサーバーで実行でき、ネットワーク上の任意の場所に「そのまま」転送できます。
長所と短所
強い：
- コードのシンプルさ、モビリティ、コンパクトさ。
- テクノロジーおよびデータベースへのバインドはありません（データベースシステムはファイルシステムです）。 コアとなるのは、オープンな仕様と標準のみです。
- バックアップの作成と保守が簡単（簡単なコピー）。
弱い：
- Frondendは機能のバックエンドを失います。 複雑な機能は、開発に非常に時間がかかります。
- ブラウザでJavaScriptを有効にする必要があります。
記事へのリンク
RESTアーキテクチャ
HTTPリクエストの種類とREST哲学
XMLHTTPRequest：説明、アプリケーション、一般的な問題
XMLHttpRequestの基本
DOM：HTMLページの操作
JavaScript HTML DOMドキュメント
BOMロケーションオブジェクト
Window.location