Frontend Development Learning Notes 6

Foreword#

I’ve finally completed a full e-commerce website replica, consisting of four pages, implementing basic interactive features and also utilizing less, a CSS preprocessor I recently learned. I had previously built an e-commerce homepage here. However, that was a single page, making it relatively simple to handle. But during the process of creating this complete website, I gained a deeper understanding of concepts I had learned before, such as the separation of style and structure, and the layered design philosophy in JS. Click here to view the live page, or see the screenshots below (the images are quite ugly):

效果图

Structure#

First, let’s talk about structure. When you get the design mockups, the first step is analysis. For instance, these four pages typically follow a top-middle-bottom structure. Aside from the main content area, the header and footer are identical across all pages. Furthermore, except for the product detail page, the main content sections of the other pages are divided into left and right structures. You can first write this common structure as a template, and then when creating other pages, simply populate the content based on this template.

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

Styles#

Because I used less, a high-level CSS language, during the styling process, it became much more convenient. I didn’t have to write repetitive code over and over again, saving a lot of trouble. I also layered the CSS. First, I wrote a style sheet for the template, named mian.js. Then, I wrote different styles for different pages, and finally, I just imported them all into the page. In fact, it could be further subdivided, for example, into styles for the header and footer, banner sections, pagination sections, and so on.

Logic#

Finally, for js, during the analysis, I found that many logic components used across different pages were identical, such as the automatic switching of several banner sections and simulated dropdown menus. At this point, I divided the entire js code into the following three layers:

Utility Layer#

This layer contains the most fundamental utilities, such as getting elements by class.

shop.tools = {};
shop.tools.getByClass = function(par, cla) {};//获取相应class元素
shop.tools.onmouseover = function(ele,eles,select){};//参数为子元素，和父元素，最终为当前元素添加active状态
shop.tools.onclick = function(ele,eles){};

UI Layer#

Here’s the UI layer, which will be used in multiple places:

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

Application Layer#

This is the interactive layer that pages will directly use:

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");
		}
	};
};

Since there’s too much code, I won’t paste it all. As you can see, functions from the tools and ui layers are used multiple times here, which improves code reusability and makes the structure clear, easy for others to understand and maintain. Finally, on the page, you can simply reference them wherever they are needed.