Writing high-quality code: The way of the development of Web front-end (i)

Recently the eldest brother bought us some technical aspects of books, in fact, rarely moved a book a good complete read, often look at the electronic file, but also guerrilla-style look at this chapter, see that chapter, in that 5 book picked a relatively thin "write high-quality code web front-end development of the road", read it feels good, It explains how to write high-quality code from an overall architecture, and also highlights some of the more important technical points, giving people a sense of the integrity of the web development from a high point of view, thanks to the boss, thank him for making us keep improving. Here are my notes in the process of reading.

Chapter One: from the site reconstruction

Nothing to say, from a bad old page instance illustrates the need to separate the structure, style, and behavior of the Web, both HTML files, CSS files, and JS files.

Summary: HTML tags are only responsible for hosting content, style to CSS, behavior to JavaScript. Do "streamline, reuse, and order".

"Relative to my previous projects, I often put some click events, mouseover events directly into the HTML tag, in fact, better practice should be put into JS, direct document.getElementById (" "). OnClick () {}, Or use jquery's Click event to associate "

Chapter II: Team Work

To fine line, must first pass 10 lines

"Often heard to do the front-end development of the friend complained about to learn too much, east to learn a little, Western learning a little, what will, but are not fine, so some people think ' 10 line than fine Line ', and in the front-end field, this sentence does not work, for the front end, you do not pass 10 lines, you can not "I finally felt a sense of accomplishment when I saw the author's remark. O (∩_∩) o~

This chapter mainly describes the front-end needs to understand the language, HTML, CSS to be proficient, and its important, JS, and architecture Div+css,ria rich media applications, jquery,yui,ps,ai design and so on

The development between teams should be noted:

1: Add code readability----Comments

2: reusability---Maintenance of common components and private components

3: Redundancy and simplification of the contradiction---choice or decentralized (reasonable front-end architecture in CSS and JS will extract common components, how to organize the trade-offs, the perfect solution does not exist, only in redundancy and streamlining to find the best balance)

4: Pre-conceived is important.

5: norm-setting

6: Teamwork is not the most difficult technology, but people

Chapter III: High-quality HTML

Finally came a little practical technology, hehe

1) The Semantics of tags: everyone knows.

2) Label layout

Disadvantages of Table Layout page: 1: The code is large, the structure is chaotic. 2: Label semantics ambiguous, unfriendly to search engine

CSS layout (DIV+CSS): The layout of the label is weakened, the layout is completely placed in the style to control, and the label re-restore the original semantics of the role. Compared with the table layout, it has the advantages of less code, simplified structure and clear semantics.

Summary: In the process of layout, the HTML structure is the focus, CSS is used to modify the structure, the correct way is: first determine the HTML, determine the semantic label, and then choose the appropriate CSS.

3) How to determine if your tags are semantically sound :

After finishing a page, remove the style to see if the structure of the web is well organized, and whether it is still very readable .

The purpose of the day of "CSS Naked Day" is to remind you of the importance of choosing the right HTML tag. ------------Obviously I was the first to hear about ha.

4) Examples of titles and content

This example is structured using a non-semantic tagin HTML-----div-delimited and span scopes, and the right approach is to use H2,P,A to structure

In particular, no semantic tags, such as div and span, can be added to aid implementation when the page's labels do not meet the design needs.

5) Forms and forms

Form

Generally need to directly submit the content needs to be placed in the form, in order to have clear semantics, the general form field to use fieldset tags wrapped up, and use the legend label to explain the purpose of the form, if you do not want it to bring the default style, you can border:none; do not want to display the settings Display:none, which takes into account both semantic and design requirements.

The description text for each input tag needs to use the label label, and the corresponding label and input are associated by setting the ID property for input and setting "For=someid" in the label.

Form

Although table is not recommended for layout in CSS layouts, it does have the best choice for two-dimensional data presentation.

Generally with table, I often use its <table><tr><th><td> tag, when necessary can also use his other tags, table headings with caption, the head with thead surrounded, The body part tbody surrounded, the tail tfoot surrounded

Summary: Some problems should be paid attention to in semantic tagging

1: Use as little as possible with no semantic tag div and span

2: The semantics are not obvious, both can be used P can also use Div place, recommended as far as possible with P, because there are upper and lower spacing, good readability. (or depending on the situation)

3: Do not use the pure style label, such as: B,font,u, etc., directly write into the CSS settings.

Reprint please indicate the source

Original address: http://www.cnblogs.com/Joans/archive/2012/09/11/2679074.html

Writing high-quality code: The way of the development of Web front-end (i)