'Writing high-quality code?? The way to practice Web front-end development' essay after reading_html/css_WEB-ITnose

Separation of structure, style and behavior

Structural standards include XML standards, XHTML standards, and HTML standards; style standards include CSS standards; behavioral standards mainly include DOM standards and ECMAScript standards.

Usual projects will be separated in the above way, but the entire website structure of a project I have done is separated according to modules:

Requirement: Design a website, the website The purpose is to generate a website based on user needs.

For example, a corporate display website requires homepage A. Homepage A includes layout (such as header container, navigation container, focus map container, and then a three-column container. , and then the footer container).

The modules in each container are loaded according to user needs. The main modules loaded on page A are: header image, water product navigation, focus image, latest news, latest products, contact information, and bottom copyright statement.

Each module has styles (such as color, background image, margin); each module has configuration information (such as whether the latest product module displays product descriptions).

If I design according to the separation of structure, style and behavior, then I must extract the style configuration of the seven modules above into CSS files, and extract the rendering JS of each module into a JavaScript file, like this Can it really improve development efficiency and maintenance efficiency?

The current implementation is:

1. The final page has only one JS file, no CSS and additional JS files.

2. The page consists of two parts: layout (typesetting) and module (function).

3. The server reads the page layout configuration in JSON format from the database according to the page requested by the user, and the user generates the final page layout.

4. Based on the page requested by the user, the server outputs the HTML of each associated module and the JS rendering script corresponding to the module (the JS rendering script contains style information and other configuration information in JSON format).

5. Output page.

The source code output of the final page looks similar to the following:

-------------------------- --------------------

Universal JS package

Module 1HTML

Module 2HTML

Module 3HTML

Module 1 Script

Module 2 Script

Module 3 Script

------------- ----------------------------------

For the server, In fact, it is implemented: plug-in (corresponding to a DLL), plug-in template (for example, the navigation has horizontal navigation and vertical navigation), plug-in view such architecture (the view will inherit the style from the template, for example, a horizontal navigation can have horizontal navigation 1, Horizontal navigation 2).

Now assuming that my page B also needs navigation with the same style and configuration as page A, then on the server side I only need:

1. Select the navigation plug-in

2. Select the "Horizontal Navigation" template in the navigation plug-in

3. Configure the color, background image, animation effects and other configurations of the template, marked as TPL1

4. Use TPL1 to generate a view, marked as View1 and View2

5. Place View1 in the layout position of page A, and place View2

in the layout position of page B. 6. If you need to modify the background images of A and B at the same time in the future, Only the background image of TPL1 needs to be modified

7. If you need to modify only the background image of B in the future, you only need to modify the background image of View2

Semanticization of HTML tags

first Determine the HTML, determine the semantic tags, and then choose the appropriate CSS.

Use Firefox's Web Developer plug-in to disable CSS and see the page display effect.

For example, a module scheme for title and content:

<标题>这里是标题内容<a href="#">更多</a></标题><段落>段落一的内容</段落><段落>段落二的内容</段落>

The "more" here should not actually belong to the title tag. The adjustment is as follows:

<div><标题>这里是标题内容</标题><a href="#">更多</a></div><段落>段落一的内容</段落><段落>段落二的内容</段落>

When the page content tags cannot meet the design needs, unsemantic tags such as DIV and SPAN will be added appropriately to assist the implementation.

Improve CSS quality

The most commonly used way to organize CSS: base.css common.css page.css

Basic classes should be universal and atomic, for example:

.f12{font-size:12px;}.zoom{zoom:1;}

Use a dash to indicate dependency: for example, ".timeList-lastItem" is subordinate to the ".timeList" style.

Indicate developers with prefixes: e.g. ".xf-timeList-lastItem", ".jn-timeList-lastItme".

The principle of using more combination and less inheritance: separate the unstable parts of the class and set them into one class separately, and set the remaining parts that are relatively stable into another class. Through the combination of classes (multiple class) to implement the final style.

CSS weight calculation: the weight of HTML tag is 1, the weight of class is 10, and the weight of id is 100; for example, the weight of "strong.demo" is 10 1=11; for example, "#test.red" "The weight is 100 10=110.

CSS sprite: implemented using background-position.

CSS Hack:

1. IE conditional comments can also be used for JS Hack

<!--[if gt IE 6]><link type="text/css" href="test.css" rel="stylesheet" /><![endif]-->

2. Selector prefix

"*html" asterisk prefix is ​​only effective for IE6;

"* html" asterisk plus prefix is ​​only effective for IE7;

There are some risks in backward compatibility, and there is no guarantee that future IE versions will not recognize *html and *html.

3. Style attribute prefix

"_width:60px;"只在IE6下生效；

"*width:60px;"在IE6和IE7下生效。

 

4. 超链接hover的兼容：

顺序：:link :visited :hover :active　　(lv ha)

 

display:inline-block

<!DOCTYPE html><html><head>    <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta>    <style type="text/css">        body,ul,li{margin: 0px;padding: 0px;}        ul{list-style: none;}        li{display: inline-block;*display: inline;*zoom:1;}        ul li {border:solid 1px #eee;padding: 2px 20px;}    </style></head>    <body>        <div>            <ul><li>标题1</li><li>标题2</li><li>标题3</li></ul>        </div>    </body></html>

position:absolute和float会隐式地改变display类型，不论之前设置了什么类型，都会让元素以display:inline-block的方式显示，就算显示设置display:inline或者display:block也无效。

IE6下的float双边距BUG就可以通过设置display:inline来解决。

 

水平居中的问题

给父元素设置text-align:center可以实现文本、图片等行内元素的水品居中。

确定宽度的块级元素可以通过设置margin-left:auto和margin-right:auto来实现。

不确定宽度的块级元素实现水平居中：

1. 可以通过将需要水平居中的块级元素放入table标签实现（不设置table标签的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中），缺点是增加了无语义的标签。

2. 改变块级元素的display为inline类型，然后使用text-align:center实现居中，缺点是块级元素变成行内元素后，无法设置长宽值等。

3. 通过给父元素设置float并设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中，缺点是设置了position:relative，如下所示：

<!DOCTYPE html><html><head>    <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta>    <style type="text/css">        body,ul,li{margin: 0px;padding: 0px;}        .ccenter{position: relative;float: left;left: 50%;}        .ccenter-in{position: relative;left: -50%;}        .show{border:solid 1px #eee;margin: 10px;padding:10px;}    </style></head>    <body>        <div class="ccenter">            <div class="ccenter-in show">这里的内容想要水平居中显示</div>        </div>    </body></html>

 

垂直居中的问题

父元素高度确定的单行文本的垂直居中可以通过设置line-height来实现。

CSS中有一个vertical-align属性只有在父元素为td或者th的时候才生效，在现代浏览器下（IE8+）可以设置块级元素的display类型为table-cell来激活vertical-align属性，但IE67下并不支持；

<!DOCTYPE html><html><head>    <meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta>    <style type="text/css">        body,ul,li{margin: 0px;padding: 0px;}        .ccenter{height: 200px;display: table-cell;vertical-align: middle;*position: relative;}        .fixie67vmiddle{*position: absolute;*top: 50%;}        .fixie67vmiddle-in{*position: relative;*top:-50%;}        .show{border:solid 1px #eee;margin: 10px;padding:10px;}    </style></head>    <body>        <div class="ccenter hcenter">            <div class="fixie67vmiddle">                <div class="ccenter-in hcenter-c show">这里的内容想要垂直居中显示</div>            </div>        </div>    </body></html>

另外想要实现块元素居中，还可以通过更简单的方式：

.vhcenter{        width: 400px;        height: 200px;        padding: 20px;        position: absolute;        top: 50%; left: 50%;        margin-left: -210px; /* (width + padding)/2 */        margin-top: -120px; /* (height + padding)/2 */}

使用子选择器应对复杂变化

.content-lr-7025 .main{float:left;width:70%;}.content-lr-7025 .sidebar{float:right;width:25%;}.content-rl-7025 .main{float:right;width:70%;}.content-rl-7025 .sidebar{float:left;width:25%;}

z-index相关问题以及Flash和IE6下的select元素

z轴在设置position:relative或absolute后被激活，z-index值越大越靠上。

z-index设置为负数可能会遇到些麻烦，例如当位于body之下时，可能事件会被透明的body挡住。

负边距引起的相邻元素位置重叠，取决于HTML标签出现的先后顺序，后出现的标签浮于先出现的标签之上。

Flash嵌入网页时有个wmode属性，可以设置为opaque和transparent来防止Flash始终浮于最上方。

select表单元素在IE6下会浮于绝对定位的元素之上，可以使用一个和绝对定位元素同样大小的firame元素，通过z-index放置在绝对定位元素之下，select元素之上来定位。

PNG图片的IE6透明问题

参考P130页。

通过滤镜progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_file',sizingMethod='crop')实现。

 

提高 JavaScript质量

匿名函数控制作用域。

定义命名空间。

统一入口。

JavaScript分层。

封装浏览器差异。

弹性编程，可扩展：组件通过class来标识，并通过实现getElementsByClassName来获取一组功能相近的标签。

可复用：组件指定根节点，保持每个组件之间的独立性。

通过传参实现定制。

this的指向

<a href="#" onclick="alert(this.tagName)">test1</a><a href="#" onclick="javascript:alert(this.tagName)">test2</a>

如上的test1显示的是A，但test2显示的是undefined。

同样的setTimeout和setInterval也会改变this指向，传递的相当于函数指针，this就变成window作用域了：

var test="hello";var o={    test:'o',    go:function(){        alert(this.test);    }};o.go(); // osetTimeout(o.go,1000);  // hellosetInterval(o.go,2000);  // hello

可以通过匿名函数来调整this指向，另外还可以通过call和apply来调整this指向。

自定义标签属性

JavaScript和HTML标签之间存在映射关系，HTML标签在JavaScript中作为DOM节点对象存在。

对于常规属性，通过使用n.xxx的方式读取，对于自定义属性，统一使用n.getAttribute方法读取。

自定义属性可以通过info=eval("("+info+")");来反序列化。

 

协作

1. 公共组件一人维护，各个子频道专人负责；

2. 视觉设计师完成设计后，和交互设计师沟通，确定设计可行性；然后先将设计图给公共组件维护者，看是否需要提取公共组件，然后再提交给相应频道的前端工程师，如果有公共组件要提取，公共组件维护者需要对频道前端工程师说明。

3. 如果没有公共组件提取，交互设计师直接和各栏目前端工程师交流，对照视觉设计师的设计图进行需求说明，前端工程师完成需求。

4. When the front-end engineer is making the design, he first checks the common file to see if the components in the design drawing already exist. If so, call it directly. If not, add the corresponding code to the file of his own channel.

5. During the production process, the front-end engineer discovers a highly reusable component that has not been added to the public component. He will explain it to the public component maintainer, who will then decide whether to add the component.

6. Public component maintainers’ public component description documents need to provide supporting pictures and explanatory text for easy reading.