フロントエンド開発学習ノート六

前言#

ついに、ECサイトのフルサイト模写を完成させました。全4ページで、基本的なインタラクション機能を実装し、新しく学んだlessというCSSプリプロセッサ言語も適用しました。以前にもECサイトのトップページをこちらで作成したことがあります。しかし、それは単一ページだったので、処理は比較的簡単でした。しかし、このフルサイトの制作過程で、以前学んだ内容、例えばスタイルと構造の分離、JavaScript設計におけるレイヤー化の考え方などを、より深く理解することができました。ウェブサイトの効果はこちらから確認できます。または、以下に効果図があります（画像がひどいですが）。

効果図

構造#

まず構造についてですが、デザイン図を受け取ったら、まず分析を行う必要があります。例えば、これら4ページは典型的な上中下構造で、中央の本文部分を除いて、ヘッダーとフッターは完全に同じです。また、商品詳細ページを除けば、他の本文部分は左右構造に分かれています。この共通部分の構造を先にテンプレートとして作成しておけば、他のページを作成する際には、テンプレートに基づいてコンテンツを埋めるだけで済みます。

<body>
  <div id="head"><!-- 完全一样的 --></div>
  <div id="content"><!-- 部分一样 --></div>
  <div id="footer"><!-- 完全一样 --></div>
</body>

スタイル#

スタイルを記述する際にlessというCSSの高級言語を使用したため、非常に便利になりました。繰り返し書く必要のあるものを何度も書く手間が省け、多くの煩わしさがなくなりました。私はCSSも階層化しました。まずテンプレート用にmian.jsというスタイルのファイルを書き、次に異なるページごとに異なるスタイルを書き、最後にそれらをページ内で同時にインポートするだけで済みます。実際には、ヘッダーとフッター、バナー部分、ページネーション部分など、さらに細かく分割することも可能です。

ロジック#

最後にjsですが、分析の結果、異なるページで使われている多くのロジックが同じであることがわかりました。例えば、複数のバナー部分の自動切り替えや、ドロップダウンメニューのシミュレーションなどです。そこで、JavaScriptコード全体を以下の3つの層に分けて記述しました。

ツール層#

ここでは、要素のクラスを取得するなど、最も基本的なものを記述します。

shop.tools = {};
shop.tools.getByClass = function(par, cla) {};//対応するクラスの要素を取得
shop.tools.onmouseover = function(ele,eles,select){};//引数は子要素と親要素で、最終的に現在の要素にactive状態を追加
shop.tools.onclick = function(ele,eles){};

ユーザーインターフェース層#

ここでは、複数の場所で使用されるUI層を記述します。

shop.ui = {};
shop.ui.fadeIn = function(ele, time, opacity) {};
shop.ui.fadeOut = function(ele, time, opacity) {};

アプリケーション層#

ここでは、ページで直接使用されるインタラクション層を記述します。

shop.app = {};
shop.app.tip = function() {};
shop.app.banner = function() {};
shop.app.chose = function(){
	var specification = document.getElementById('specification');
	var color = document.getElementById('color');
	var speSpans = specification.getElementsByTagName('span');
	var colorSpans = color.getElementsByTagName('span')
	for (var i = speSpans.length - 1; i >= 0; i--) {
		shop.tools.onmouseover(speSpans[i],speSpans);
		shop.tools.onclick(speSpans[i],speSpans);
	}
	for (var j = colorSpans.length - 1; j >= 0; j--) {
		shop.tools.onmouseover(colorSpans[j],colorSpans);
		shop.tools.onclick(colorSpans[j],colorSpans);
	};
}
shop.app.chose_screen = function(){
	var top = document.getElementById('top');
	var a = top.getElementsByTagName('a');
	for (var i = a.length - 1; i >= 0; i--) {
		if (a[i].innerHTML == "更多") {continue}
		else{
			shop.tools.onmouseover(a[i],a,"active");
		}
	};
};

コードが多すぎるので全ては貼り付けませんが、ここで以前のtoolsとui内の関数が何度も使われていることがわかります。これによりコードの再利用性が向上し、構造が明確になり、他者が理解しやすく、保守しやすくなります。最終的にページ内で必要な場所で直接参照するだけで済みます。

まとめ#

この過程で、まだ多くの点で熟練度が足りないことを認識しました。引き続き頑張る必要があります。

前言#

構造#