Writing high-quality code-cultivation of Web Front-end development-Reading Notes and cultivation of web Front-end development

Writing high-quality code-cultivation of Web Front-end development-Reading Notes and cultivation of web Front-end development
PrefaceIn the past two weeks, I participated in the company's new project and used closed-end development (the project members developed in the conference room). I worked late at night, so I had no time or energy to write my original blog, today, I will share my Reading Notes on writing high-quality code-the cultivation of Web Front-end development.BodyTo refine a line, you must first pass ten lines.

 

In the field of front-end development, it is even more necessary to develop a dedicated team.

 

Disadvantages of table layout:

• Large amount of code and chaotic structure;
• The tag syntax is unclear and is unfriendly to search engines.

 

Css layout: div + css, or (x) html + css.Small amount of code, simplified structure, and fresh semantics. If the amount of code is small, the download time on the browser side will be shorter, and the semantic clarity will be more friendly to the search engine.

 

Determine the html, the semantic tag, and then select the appropriate CSS.

 

The browser specifies a default style based on the tag semantics. A simple method to determine whether the semantics of a webpage tag is good is to remove the style and check whether the webpage structure is well organized and readable. Is CSS settings in the webpage disabled in DevTool? Test the effect of removing the style from the w3c official website.

 

<H> tags are sensitive to search engines, especially h1 and h2.

 

When the labels on the page cannot meet the design requirements, the non-semantic tags such as div and span are added as appropriate to assist in implementation.

 

Table layout is suitable for displaying two-dimensional data.

 

Notes for semantic tags:

• Use as few silent labels as possible div and span.
• When the semantics is not obvious, p or div can be used, and p is used as much as possible, because p has the upper and lower spacing by default, and the readability after the style removal is better, it is advantageous for compatibility with special terminals.
• Instead of using pure style labels, such as B, font, and u, use css settings instead. The text to be emphasized in semantics can be contained in strong or em tags.

There is no perfect solution for files that are too scattered and concentrated, so we need to make appropriate compromises based on the actual situation.

 

Css rest:

• * {Margin: 0; padding: 0} is not recommended. It is not recommended to write it as: {margin: 0; padding: 0; color: #000; font-size: 12px;}, because it will damage the inheritance of css.
• . Fl {float: left; display: inline}. display: inline is used to solve the double margin Bug of ie6.
• . Zoom {zoom: 1} is a proprietary attribute of IE, In order to trigger hasLayout of IE. 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 module:

• Do not include the same part between modules. If the same part exists, extract it and split it into an independent module.
• The module should be as simple as possible to improve reusability under the principle of ensuring as few as possible.

 

The camper method is used to distinguish words, and a line is used to indicate the subordination. Example:. timeList-lastItem. Name the style:. fr {float: right;}. w25 {width: 25% ;} Multi-Purpose Combination and less inheritance.

 

When style settings conflict, a style with a high weight will be used. The weight of the html Tag: 1, the weight of the class: 10, and the weight of the ID: 100. When the weights are the same, the recent definition principle is used.

 

To ensure that the style is easy to overwrite and improve maintainability, the weight of css selector is as low as possible.

 

Css hack is usually used to select the prefix and style attribute prefix.

 

<A> the order of the four States of a tag, l (link) ov (visited) e h (hover) a (acitive) te, that is, the love hate principle.

 

Block-level and intra-row elements:

• You can set the width and height attributes for block-level elements. The width and height attributes of Row-level elements are invalid.
• You can set the margin and padding attributes for block-level elements. Set the horizontal direction of the margin and padding elements in the row, that is, the-left and-right values are valid, and the-top and-bottom values in the vertical direction are invalid.
• You can change the display attribute to block-level and intra-row elements.

 

HasLayout:It is a proprietary attribute designed by IE to parse the box model. It is designed for block-level elements. If hasLayout of the element in the row is triggered, the row element will have some block-level element features.

 

Display: inline-blockA block-level element in a row. It has the features of block-level elements, such as wide and high, margin, and padding values. It also has the features of intra-row elements: not exclusive to a row. HasLayout is triggered. Vertical align, such as * vertical-align:-10px. To ensure that E6, IE7 and other browsers are compatible with display: inline-block, there are also some problems:

• It can only implement display: inline-block for line elements; it cannot be block-level elements.
• * Vertical-align is intended for IE, Which is unfriendly. Do not use hack if you do not need it.

Although IE6 and IE7 do not support setting CSS to display: inline-block, the CSS parsing engines of IE6 and IE7 still have display: inline-block, for example, both the img tag and the button tag have the display: inline-block feature. You can set the width and height, but not exclusive to a row.

 

FloatIt will change the normal Document Stream arrangement and affect the surrounding elements. Position: absolute and float: left or float: right implicitly change the display type. No matter what type of elements were previously used (except display: none), the display: inline-block display: You can set the width and height. The default bandwidth does not occupy the parent element.

 

Center

• Horizontal Center
  (1) horizontal center of text, image, and other row elements: set text-align: center for the parent Element
  (2) horizontal center of block-level elements with fixed width: Set margin-left: auto and margin-right: auto for the elements
  (3) horizontal center of block-level elements with uncertain width:
  I. Wrap the table and set margin: 0 auto for the table. Advantage: Clever practice. Disadvantage: Added non-semantic tags, deepening the number of nested layers of tags
  II. Use display: inline/inline-block; advantage: simple and clear structure. Disadvantage: After inline is used, it becomes a row element and lacks some features, such as width, hieght...
  III. Use position: relative to set float, position: relative and left: 50% for the parent element, and set position: relative and left:-50% for the child element. Advantage: The structure is clear. Disadvantage: position: relative may cause some side effects.
• Vertical center
  (1) vertical center of text, images, and block-level elements with uncertain parent element Height: set the same upper and lower margins for the parent container.
  (2) vertical center of a single line text determined by the parent element height: line-height: parent element height.
  (3) vertical center of multi-line text, images, and block-level elements with the parent element height:
  I. Use table packages. Disadvantages: adding non-semantic tags increases the number of nested layers.
  II. for IE8 and firefox that support display: table-cell, use display: table-cell and vertical-align: middle to center, and for unsupported IE6-7, use hack in a specific format: set {* position: absolute; * top: 50%} and {* position: relative; * top:-50%} for both parent and child elements to center. Disadvantage: hack is not conducive to maintenance. Setting position: relative; position: absolute brings some side effects.

 

Grid layoutNo matter who is left or right on the style of the sidebar and main, make sure that the main tag is loaded before the sidebar on the html Tag. Only specify the specific width in the container on the outermost layer. The width of all other containers is set in percentage-grid layout.

 

Z-indexThe z axis is activated after the position of the element is set to absolute or relative. Setting the negative margin can overlap the positions of adjacent elements. The figure that appears later is dependent on the sequence of html tags. Select block in IE6. You can use an iframe of the same size to block the select statement.

 

To avoid overlap between the upper and lower margins of components and bugs caused by hasLaout of IE, all modules use margin-top to set the upper and lower margins except for special requirements.

 

Javascript

• Using anonymous functions to pack scripts can effectively control global variables and avoid potential conflicts.
• To prevent JS conflicts, we need to avoid the proliferation of global variables, make rational use of namespaces, and add the necessary attention to the code.
• DOMReady is more suitable for calling initialization functions than window. onload.
• At the end of the page, that is, call the init function before the </body> label. At this time, DOM nodes on the page may not be "loaded", but they must all be "generated, to simulate the DOMReady effect.
• Place CSS in the page header. Before loading html elements, first load their styles to avoid the html style-free State. Place javascript at the end of the page and present the webpage to the user first, load the script in the page to avoid blocking the page rendering by javascript and reduce the page blank time.
• Both the base layer and common layer belong to the framework level, and the page layer belongs to the application level. It can call the interfaces of the base layer and components of the common layer.
• If a factor in a function is unstable, we can separate it from the function and input it as a parameter to decouple the unstable factor from the function.

Features of high-quality components:

• Cross-browser compatibility
• Easy to use components
• Reusable components
• Scalable Components
• Code is organized in order, with high cohesion and low coupling.

 

Process orientation has three problems:

• There is no direct association between data and processing functions. When performing an operation, we should not only select the corresponding processing function, but also prepare the data required for processing the function. That is to say, when performing the operation, we need to focus on processing functions and data at the same time.
• Both data and processing functions are exposed in the same scope. There is no private or public concept. All data and processing functions in the entire program can access each other. By the end of the development and maintenance stages, it is easy to get started, which increases the difficulty of modification.
• A process-oriented approach is a typical computer approach of thinking-inputting data to a processor, executing computation within the processor, and returning results from the processor.

 

Object-oriented:

• In a program, an object is called an object. An object consists of two parts: "attribute" and "behavior ", corresponds to the "State" and "action" of objects in the objective world ".
• Attribute is essentially a variable, that is, process-oriented data, and behavior is actually a function, that is, a process-oriented processing function. The difference is that data and processing functions are not associated in the process-oriented process and belong to an object together. The object-oriented function defines the data and processing functions of an object as its attributes and actions.

 

Cohesion:An interface provided by an object or a class is easy to understand. complex underlying operations are encapsulated in an interface of an object or a class and transparent to users. Users do not need to care too much about the underlying details. They only need to know the interfaces provided by the class. The fewer underlying details the user knows, the higher the object aggregation degree.

 

Coupling:It refers to the degree of association and dependency between classes. Low coupling refers to the low degree of dependency between classes, and the fewer interfaces that need to be associated with class communication, the lower the coupling degree.

 

In terms of the overall situation, it is not OOP but OOA and OOD that decides the quality of the program. OOA and OOD are independent of specific languages, while OOP is directly related to languages.

 

Javascript is a prototype-based language. The attributes and behaviors of objects instantiated by new come from the constructor and prototype.

 

No matter whether it appears in the constructor or in the prototype, this keyword points to the instance object. With this keyword, attributes and methods can communicate between the constructor and the prototype.

 

In javascript, public or private objects are implemented through scopes. Attributes defined by this. XXX are public, while those defined by var XXX are private. The scope of private attributes is only in the class constructor.

 

It is not recommended to write all attributes and behaviors, whether public or private, in the constructor. Because there is only one kind of prototype in the memory, the behaviors written in the prototype can be shared by all instances. During instantiation, the prototype will not be copied in the instance memory, the behavior written in the class will be copied in each instance during instantiation. Writing behavior in the prototype can reduce memory consumption. It is recommended that you write the behavior in the prototype as much as possible for no special reason. The behaviors written in the prototype must be public and private attributes cannot be accessed.

 

Defines private behaviors in the prototype, but adds "_" before the attribute and behavior names to stipulate that the behavior is private. This is a naming convention, it does not really implement private behavior, but it allows engineers to know that it is designed to be private and avoid calling it like a public behavior.

 

If you use the set method to set attributes, we have the entry to the valueChange listener attribute.

 

In Javascript, the inheritance is to inherit the attributes and behaviors in the constructor and prototype respectively.

 

Functions in Javascript:

• As a function, you can directly use "()" for calling, such as "function test () {}; test ();". test is used as a function and is directly called by "()".. This indicates the window object.
• The constructor as a class exists. It is called using new, for example, "function test () {}; new test ();". test is used as the constructor of the class, instantiate the test class using new. This indicates the instance object.

 

You can use the call or apply function on the function object to modify the context of the function.

 

Value Transfer and address transfer:

• For basic data types such as numeric, Boolean, and numeric, a copy of the data will be copied during the assignment, and the copied data will be assigned a value, which is usually referred to as passing a value.
• If complex data types, such as hour groups and hash objects, are assigned a value directly using the memory address instead of copying a copy of the data, which is usually referred to as the transfer address.

Prototype is essentially a hash object, so it will be transferred directly when assigned a value.

 

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

 

As long as it is a class, there will be a prototype, whether it is a custom class or a built-in class of javascript. Built-in class methods can be rewritten, but attributes cannot be rewritten.

 

Instead of directly modifying the built-in class prototype, define a custom class, pass the instance of the built-in class as a parameter to the constructor, and define the Extension Method in the Custom class. The idea of this approach is to encapsulate the built-in classes at another layer to protect the prototype of the built-in classes from being contaminated.

 

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

• Use the getAttribute method of the DOM Node object.
• Use the attributes of the DOM Node object (better compatibility ).

Considering compatibility, we recommend that you use the node. XXX method to read common attributes, and use node. getAttribute ("XXX") to read custom attributes.

 

Converting complex types of data into strings is called data serialization. Its inverse operation is called data deserialization. String deserialization is implemented through the eval function.

 

The performance of event objects in IE and Firefox is different. In IE, the event is an attribute of the window object and is in the global scope. In Firefox, the event object exists as the event parameter.

 

Listening to events on the ancestor node (using the bubble mechanism) can effectively reduce the memory overhead. For example, the delegate () method of jquery.