24-Web Front-end architecture

Recently, I have been engaged in front-end services, so I have learned more about this. Although I have been involved in the project, I may not be able to go to the correct path yet. Welcome to the discussion.

Reprint please explain it: http://blog.csdn.net/wowkk

Bytes ---------------------------------------------------------------------------------------------

If the Web Front-end does more, you will realize that regardless of the project size, you have to consider a "architecture" problem.

As long as it is a project, it will involve "management". If it is not standardized, it will certainly be messy. Team collaboration is even worse.

Without the concept of architecture, everyone writes css and js in html, and writes css as much as they want, and places JavaScript interfaces as they want, not only is it as disgusting as garbage dumps, but maintenance is also a nightmare. Is it possible to clear and repile up garbage directly?

The architecture mentioned here is not a great thing, and it has no name, but it is about front-end quality. Like the backend "three-tier architecture", you can go through most management systems.

PS: the idea of this article is mainly learned from "Writing high-quality code-the cultivation of Web Front-end development". Because the projects must be kept confidential, there will be fewer demo codes, the details should be learned in this book.

Currently, I have the following steps:

I. Ensure that the document flow is clear

After determining the modules (la S) of the page, you can use the Div label to write the layout code without any css code modification. Open the page and you can understand the organizational logic of each module to go to the next step.

Ii. import to the bass.css File

Bass.css is the basic style file. By introducing this file, you can clear the default style that the browser brings. For example, if you put a div directly on the page, it has a gap with the body. For new users, it is acceptable to clear this margin. There is also a solution to browser differences that are sometimes not well understood.

Its main features are: "versatility" and "atomicity", which can be referenced on any page, and each css class can no longer be divided. For example,. fl {float: left; display: inline;} has a floating effect and solves the double margin BUG of IE6.

Through combination, use the class in bass.css to decorate html page elements. For example, class = "bc w200" indicates that the width of the element is 200px & center.

Below is a bass.css file code, you can add code by yourself (as if the code is mostly from the front-end framework of http://developer.yahoo.com/yui Yahoo, more mature code)

@ Charset "UTF-8";/* CSS Document * // * CSS reset */html {color: #000; background: # FFF;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {margin: 0; padding: 0;} table {border-collapse: collapse; border-spacing: 0;} fieldset, img {border: 0;} address, caption, cite, code, dfn, em, strong, th, var, optgroup {font-style: inherit; font-weight: inherit;} del, ins {text-decoration: none;} li {list-style: none;} caption, th {text-align: left;} h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;} q: before, q: after {content: '';} abbr, acronym {border: 0; font-variant: normal ;} sup {vertical-align: baseline;} sub {vertical-align: baseline;} legend {color: #000;} input, button, textarea, select, optgroup, option {font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;} input, button, textarea, select {* font-size: 100%;}/* Text Layout */. fontf {font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "", Heiti, "", SimSun, "", STXihei, "文 ", sans-serif ;}. f12 {font-size: 12px ;}. fb {font-weight: bold }. fn {font-weight: normal ;}. t2 {text-indent: 2em ;}. lh150 {line-height: 150% ;}. lh180 {line-height: 180% ;}. lh200 {line-height: 200% ;}. unl {text-decoration: underlline ;}. no_unl {text-decoration: none;}/* locate */. m0a {margin: 0 auto ;}. tl {text-align: left ;}. tc {text-align: center ;}. tr {text-align: right ;}. bc {margin-left: 0; margin-right: 0 ;}. fl {float: left; display: inline ;}. fr {float: right; display: inline ;}. cb {clear: both ;}. cl {clear: left ;}. cr {clear: riyun ;}. clearfix: after {content :". "; display: block; height: 0; clear: both; visibility: hidden ;}. vm {verticle-align: middle ;}. pr {position: relative ;}. pa {position: absolute ;}. abs-right {position: absolute; right: 0 }. zoom {zoom: 1 ;}. hidden {visiility: hidden ;}. none {display: none;}/* width */. w10 {width: 10px ;}. w14p {width: 14%}/* height */. h50 {height: 50px ;}. h10p {height: 10%}/* margin */. m10 {margin: 10px;}/* Top margin */. mt0 {margin-top: 0px ;}. mt25 {margin-top: 25px ;}. mt2p {margin-top: 2%;}/* bottom margin */. mb0 {margin-bottom: 0px ;}. mb5 {margin-bottom: 5px ;}. b9p {bottom: 9%;}/* left margin */. ml0 {margin-left: 0px ;}. ml20 {margin-left: 20px ;}. ml1p {margin-left: 1%;}/* right margin */. mr5 {margin-right: 5px ;}. p10 {padding: 10px ;}. pt5 {padding-top: 5px ;}. pb5 {padding-bottom: 5px ;}. pl5 {padding-left: 5px ;}. pr5 {padding-right: 5px ;}

3: The introduction to the common.css file is first to analyze the components of each page. If there is the same performance, it will be extracted as a common class. After that, the page.css file will be imported to different pages to express their own pages. However, we mainly work on Web appprojects with fewer pages. We discard the page.css file and only access the common.css file. We do not need to extract common elements. This is used when commoncss + page.css is used. Iv. js control interface initialization: when it comes to interfaces, there will be corresponding data. Generally, global variables must be used. The global variables used by the corresponding interface cannot be confused with local variables. The solution is to use the namespace var GLOBAL ={}; and then you can directly use GLOBAL. state1 = "GLOBAL variable 1" to save the data used by the interface.


The above code is written on the html page. For the second part, see the next section. 5. Accessing the common.js file with the base.css file should have the base. js file, but we use JQuery. js, so we can skip it. Common. js mainly stores "interfaces ":
Have you noticed this. JQuery does not have the stateUpage function. When we are dealing with modules, all of them are encapsulated with the idea of plug-ins. Therefore, people who integrate pages and module plug-ins can work at the same time. After the module is written, you only need to put a line of <div> code to the integrated person on the page and call the initialization function (the plug-in will re-combine the code to replace it with the corresponding position ). CONCLUSION: (I have no time to draw a flowchart. I need to go to bed and take an early lesson tomorrow ~~) In this mode, the front-end work can be streamlined. When you need to modify a part of the file, whether it is a css style or a module, the person in charge of the part modifies the corresponding file and sends it to replace the source file. It can also be more flexible to work with the designer, and the process will be broken down later.