'Writing High-Quality Code - How to Practice Web Front-End Development' Reading Notes_html/css_WEB-ITnose

Foreword

In the past two weeks, I have participated in the company's new project, using closed development (project members develop in the conference room), working overtime until late at night , so I don’t have the time and energy to write an original blog. Today I will share my reading notes on "Writing High-Quality Code - How to Practice Web Front-End Development".

Text

If you want to master one line, you must first understand ten lines.

In the field of front-end development, it is very necessary to have one specialty and multiple abilities.

Table layout disadvantages:

Large amount of code and confusing structure;

The tag semantics are unclear and not useful for search engines. friendly.

css layout: div css, or (x)html css.

Small amount of code, streamlined structure, and fresh semantics.

The less code, the browser download time will be shorter;

The clear semantics will be more friendly to search engines.

First determine the html, determine the semantic tags, and then choose the appropriate CSS.

The browser will give a default style based on the semantics of the tag.

A simple way to judge whether the semantics of web page tags is good is to remove the style and see whether the web page structure is well organized and orderly, and whether it is still readable.

Test whether the CSS settings in the web page are disabled in DevTool? Test the effect of w3c official website after removing the style.

tag, search engines are more sensitive to it, especially h1 and h2.

When the tags on the page cannot meet the design needs, non-semantic tags such as div and span will be appropriately added to assist the implementation.

The table layout is suitable for displaying two-dimensional data.

Some other issues that should be paid attention to with semantic tags:

Use as few semantic tags divs and spans as possible.

In places where the semantics are not obvious and you can use either p or div, try to use p, because p has upper and lower spacing by default, and the readability is better after de-styling, which is beneficial for compatibility with special terminals .

Instead of using pure style tags, such as b, font, u, etc., use css settings instead. Text that needs semantic emphasis can be included in the strong or em tags.

There is no perfect solution to the problem of too scattered and concentrated files. We need to make appropriate compromises based on the actual situation.

css rest:

Not recommended * { margin: 0; padding: 0 }, the recommended ones are listed. It is also not recommended to write: {margin:0; padding:0; color:#000; font-size:12px;}, because this will destroy the inheritance of CSS.

.fl { float: left; display: inline } where display: inline is to solve the double margin bug of IE6.

.zoom { zoom: 1 } is a proprietary attribute of IE, in order to trigger IE's hasLayout. When zoom is invalid, you can set "position: relative" to trigger hasLayout.

Supplement:

Reset browser default style, recommended: https://github.com/necolas/normalize.css

Split modules:

Try not to include the same parts between modules. If there are the same parts, they should be extracted and split into an independent module.

Modules should be as simple as possible while keeping the number as small as possible to improve reusability.

Camel case is used to distinguish words, and underlining is used to indicate affiliation. For example: .timeList-lastItem.

Learn this style of naming:

.fr { float: right; }

.w25 { width: 25%; }

Use composition more and inheritance less.

When there is a conflict between style settings, the style with higher weight will be used.

The weight of html tag: 1, the weight of class: 10, the weight of ID: 100.

When the weights are the same, the nearest definition principle will be used.

In order to ensure that the style can be easily overridden and improve maintainability, the weight of the CSS selector should be as low as possible.

CSS hack methods are usually selector prefix method and style attribute prefix method.

The four states of the tag are defined in order, l(link)ov(visited)e h(hover)a(active)te, which is the love hate principle.

Block-level elements and inline elements:

Block-level elements can set width and height attributes, but inline elements have no effect on setting width and height attributes.

Block-level elements can set margin and padding attributes. Inline elements set the horizontal direction of margin and padding, that is, -left and -right are valid, and the vertical direction -top and -bottom are invalid.

Switch block-level elements and inline elements by modifying the display attribute.

hasLayout:

is a proprietary attribute designed by IE browser to parse the box model. It was originally designed to be used for blocks. For level elements, if hasLayout of inline elements is triggered, the inline elements will have some characteristics of block-level elements.

display: inline-block

An inline block-level element, which has the characteristics of block-level elements: you can set the width, height, margin and The padding value also has the characteristics of inline elements: it does not occupy an exclusive line.

will trigger hasLayout. Vertical alignment can be solved by setting *vertical-align: -10px.

In order to make E6, IE7 and other browsers compatible with display: inline-block, there are also certain problems:

It can only implement display: inline-block for inline elements; it cannot be Block-level elements.

*vertical-align is a hack for IE, which is also unfriendly. Try not to use hacks if you can.

Although IE6 and IE7 do not support CSS setting to display: inline-block, in fact the CSS parsing engines of IE6 and IE7 still have display: inline-block. For example, both img tags and button tags have display : Inline-block feature, you can set the width and height without occupying an exclusive line.

float

will change the normal document flow arrangement and affect surrounding elements.

position: absolute and float: left or float: right will implicitly change the display type. No matter what type of element it was before (except display: none), the element will be displayed in display: inline-block mode. : You can set the width and height. The default width does not occupy the parent element.

Centered

Horizontally centered
(1) Horizontal centering of inline elements such as text and pictures: set text-align to the parent element : center
(2) Horizontal centering of block-level elements with determined width: Set margin-left: auto and margin-right: auto
(3) Horizontal centering of block-level elements with uncertain width:
I. Use the table package and set margin: 0 auto; Advantages: Clever approach. Disadvantages: Added unsemantic tags and deepened the nesting levels of tags.
II. Use display: inline/inline-block; Advantages: Simple and clear, clear structure. Disadvantages: After using inline, it becomes an inline element and lacks certain features, such as: width, hieght...
III. Use position: relative, set float, position: relative and left: 50% for the parent element, and set float, position: relative and left: 50% for the child element. Set position:relative and left:-50%. Advantages: Clear structure. Disadvantages: position:relative will bring some side effects.

Vertical centering
(1) Vertical centering of text, pictures, and block-level elements whose parent element height is uncertain: Set the same top and bottom padding to the parent container to achieve this.
(2) Vertical centering of a single line of text determined by the height of the parent element: line-height: height of the parent element.
(3) Vertically center multi-line text, pictures, and block-level elements whose parent element height is determined:
I. Using table wrapping, disadvantages: adding unsemantic tags and increasing the number of nesting levels.
II. For IE8 and Firefox that support display: table-cell, use display: table-cell and vertical-align: middle to achieve centering. For IE6-7 that does not support it, use a specific format hack: give parent and child two layers The elements are set to { *position: absolute; *top: 50% } and { *position: relative; *top: -50% } to achieve centering. Disadvantages: Using it for hacking is not conducive to maintenance. Setting position: relative; position: absolute; brings some side effects.

Grid layout

No matter who is left or right in style between sidebar and main, in the html tag, make sure that the main tag is in the sidebar was loaded before.

Only the outermost container is given a specific width, the width of all other containers is set as a percentage ?? Grid layout.

z-index

The z-axis is activated after the element sets position to absolute or relative.

Setting negative margins can cause the positions of adjacent elements to overlap. Which one floats on top depends on the order in which the html tags appear. The tags that appear later float on top of the tags that appear first.

For the select occlusion problem under IE6, you can use an iframe of the same size to cover the select.

In order to avoid the overlap problem of the upper and lower margins of components and the bug caused by IE's hasLaout, all modules use margin-top to set the upper and lower margins, except for special needs.

Javascript

Using anonymous functions to wrap scripts can effectively control global variables and avoid potential conflicts.

To prevent JS from causing conflicts, you need to avoid the proliferation of global variables, make reasonable use of namespaces, and add necessary attention to the code.

DOMReady is more suitable to call the initialization function than window.onload.

Call the init function at the end of the page, that is, before the tag. At this time, the DOM nodes in the page may not all be "loaded", but they must all be "generated", thus simulating The effect of DOMReady.

Put CSS at the head of the page and load their styles before loading html elements. This can avoid the unstyled state of html; put javascript at the end of the page to present the web page to the user first. Then load the script in the page to prevent javascript from blocking the rendering of the web page and reduce the time when the page is blank.

Both the base layer and the common layer belong to the framework level, and the page layer belongs to the application level. It can call the interface of the base layer and the components of the common layer.

If a certain factor within a function is unstable, we can separate it from the function and pass it in as a parameter, thereby decoupling the unstable factor from the function.

High-quality component features:

Cross-browser compatibility

Easy-to-use components

Reusable components

The components are extensible

The code is well organized, with high cohesion and low coupling.

There are three problems with process orientation:

There is no direct correlation between data and processing functions. When performing operations, we not only have to choose The corresponding processing function must also prepare the data required by the processing function. In other words, when performing operations, we need to pay attention to both the processing function and the data.

Data and processing functions are exposed in the same scope. There is no concept of private and public. All data and processing functions in the entire program can access each other. In the late development and maintenance stages, it is easy to affect the entire system, making modifications more difficult.

Process-oriented thinking is a typical computer thinking way - input data to the processor, the processor performs operations internally, and the processor returns the results.

Object-oriented:

In the program, we call "objects" "objects", and objects are composed of two parts: "properties" and "Behavior" corresponds to the "state" and "action" of objects in the objective world.

The essence of an attribute is actually a variable, which is process-oriented data, while the essence of behavior is actually a function, which is a process-oriented processing function. The difference is that in process-oriented, data and processing functions are not related and belong to a certain object together. Object-oriented defines data and processing functions inside an object and exists as the properties and behaviors of this object.

Cohesion:

means that the interface provided by an object or class is very simple and easy to understand, and complex underlying operations are encapsulated in the object or class Internal interface, transparent to users.

Users do not need to care about too many low-level details. They only need to know what interfaces the class provides. The less low-level details the user knows, the higher the degree of aggregation of the object.

Coupling:

Refers to the degree of association and dependence between classes. Low coupling refers to the dependence between classes. The degree of coupling is low, the fewer interfaces associated with class-to-class communication, the lower the degree of coupling.

What determines the quality of a program from the overall perspective is not OOP, but OOA and OOD.

OOA and OOD have nothing to do with specific languages, while OOP is directly related to languages.

Javascript is a prototype-based language. The properties and behaviors of objects instantiated through new come from two parts, one part comes from the constructor and the other part comes from the prototype.

Whether this keyword appears in the constructor or prototype, it points to the instance object. Through this keyword, attributes and methods can be used in the constructor and prototype communication between.

In JavaScript, public or private status is determined by scope.

Properties defined with this.XXX are public, while properties defined with var XXX are private.

The scope of private properties is only within the constructor of the class.

Write all properties and behaviors, whether public or private, in the constructor. This is not recommended. Because there is only one prototype of a class in memory, the behavior written in the prototype can be shared by all instances. When instantiated, it will not be copied in the instance's memory, and the behavior written in the class will not be copied again in the instance's memory. , a copy will be copied in each instance when instantiated.

Writing behaviors in prototypes can reduce memory consumption. For no special reason, it is recommended to write behaviors in prototypes as much as possible.

The behavior written in the prototype must be public, and private properties cannot be accessed.

Define private behavior in the prototype, but agree that it is private by adding "_" in front of the names of properties and behaviors. This is a naming convention that does not The behavior is truly private, but it allows engineers to know that it is designed to be private, so they can avoid calling it like a public behavior.

If you use the set method to set attributes, then we have an entry point to listen to the attribute valueChange.

Inheritance in Javascript involves inheriting the properties and behaviors in the constructor and prototype respectively.

Two ways to use function in Javascript:

Exists as a function and calls it directly using "()", such as "function test( ) {}; test();", test is used as a function and is directly called by the "()" symbol. Its this points to the window object.

Exists as a constructor of the class, which is called using new, such as "function test() {}; new test();", test serves as the constructor of the class, and the test class is instantiated through new. This points to the instance object.

You can modify the function context this through the call or apply function on the function object.

Passing value and address:

If it is a basic data type such as numeric type, Boolean type, character type, etc., it will be Copy the data and assign the copied data, which is commonly known as passing by value.

If it is a complex data type such as an array or hash object, the memory address will be used to assign the value directly instead of copying the data, which is commonly known as address transfer.

The prototype is essentially a hash object, so when it is assigned directly, the address will be passed.

Bird.prototype = new Animal(); // Bird.prototype.constructor points to Animal

Bird.prototype.constructor = Bird; // Bird.prototype .constructor repoints to Bird

As long as it is a class, it will have a prototype, whether it is a custom class or a built-in class of JavaScript.

Methods of built-in classes can be overridden, but properties cannot.

Instead of directly modifying the prototype of the built-in class, define a custom class, pass the instance of the built-in class as a parameter to the constructor, and define extension methods in the custom class. The idea of ​​​​this approach is to encapsulate the built-in class with another layer to protect the prototype of the built-in class from being polluted.

Attributes defined in html tags can be obtained in two ways in JavaScript:

Through the getAttribute method of the DOM node object.

Through the properties of the DOM node object (better compatibility).

From the perspective of compatibility, it is recommended to use node.XXX to read regular attributes and node.getAttribute("XXX") to read custom attributes.

Converting complex type data into strings is called data serialization, and its reverse operation is called data deserialization.

The deserialization of strings is achieved through the eval function.

The event object behaves differently under IE and Firefox.

Under IE, event is an attribute of the window object, which is in the global scope.

In Firefox, the event object exists as a parameter of the event.

Listening for events on ancestor nodes (using the bubbling mechanism) can effectively reduce memory overhead. For example, jquery's delegate() method.