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.
Conclusion
Throughout this process, I also realized that I’m still not proficient in many areas and need to keep working hard.
This article was published on January 13, 2015 and last updated on January 13, 2015, 3918 days ago. The content may be outdated.