BodyFor a fine line, you must first pass 10 lines.
In the front-end development of this field, skill is very necessary.
Table Layout Disadvantages:
- Large code volume, structure confusion;
- Tag semantics are ambiguous and unfriendly to search engines.
CSS layout: div+css, or (x) html+css. Less code, streamlined structure, and fresh semantics. The less code, the shorter the browser-side download, and the more semantic clarity that makes the search engine friendlier.
First determine the HTML, determine the semantic label, and then choose the appropriate CSS.
The browser is given a default style based on the semantics of the tag. A simple way to determine whether the page label semantics is good is to remove the style, see if the structure of the Web page is well organized, and still have good readability. Do you have the CSS settings in the Web page disabled in the Devtool test? Test the effect of the website to remove the style.
No semantic tags, such as div and span, are added to aid implementation when the on-page labels do not meet the design needs.
The table layout is suitable for displaying two-dimensional data.
some other issues to be aware of in semantic tagging:
- Use less semantic tag div and span as sparingly as possible.
- In the semantic is not obvious, can use P can also use Div place, as far as possible with P, because p by default, there are up and down spacing, to style after the better readability, compatible with the special terminal benefit.
- Instead of using a plain style label, such as B, font, and U, use CSS settings instead. Text that needs to be emphasized semantically can be included in the strong or EM tags.
There is no perfect solution to the problem of too fragmented and centralized files, and we need to make appropriate compromises based on the actual situation.
CSS Rest:
- Not recommended * {margin:0; padding:0}, recommended display list. It is also not recommended to write: {margin:0; padding:0; color: #000; font-size:12px;}, because it destroys the inheritance of CSS.
- . fl {float:left; Display:inline} where Display:inline is to resolve the double margin bug of IE6.
- . Zoom {Zoom:1} is a proprietary property of IE, in order to trigger the haslayout of IE. When zoom is not valid, you can set "position:relative" to trigger haslayout.
Add: Reset browser Default style, recommended: HTTPS://GITHUB.COM/NECOLAS/NORMALIZE.CSS
Split module:
- The module and the module should not contain the same part, if there is the same part, they should be extracted, split into a separate module.
- The module should be as simple as possible in order to improve reusability with the minimum number of guarantees.
The Hump method is used to differentiate words, and dashes are used to indicate dependencies. For example:. Timelist-lastitem. Learn the naming of this style:. fr {float:right;}. w25 {width:25%;}
multi-use combination, less inheritance.
When there is a conflict in the style settings, a high-weight style is used. The weight of the HTML tag: 1,class weight: The weight of the 10,id: 100. When the weights are the same, the recently defined principles are used.
To ensure that the style is easily overwritten, the CSS selector weights as low as possible for maintainability.
The hack way of CSS is usually the selector prefix method and the style attribute prefix method.
The order of four state definitions for the <a> tag, l (link) ov (visited) e H (hover) A (acitive) TE, which is the love hate principle.
block-level elements and inline elements:
- Block-level elements can be set width, height property, inline element setting width, height property is invalid.
- Block-level elements can set the margin and padding properties. The inline element sets the horizontal direction of the margin and padding, i.e.-left and-right are valid, and the-top and-bottom in the vertical direction are not valid.
- Toggle block-level elements and inline elements by modifying the display property.
haslayout:is a proprietary property designed by IE for the parsing box model, which is designed for block-level elements that, if triggered by the haslayout of the elements in the row, will have the attributes of some block-level elements in the inline elements.
Display:inline-blockA block-level element within a row that has the characteristics of a block-level element: You can set the width height, margin, and padding values, as well as the characteristics of the inline elements: not exclusive row. Will trigger haslayout. Vertical alignment, can be set as *vertical-align: -10px to solve. There are some problems with E6, IE7, and other browsers that are compatible with Display:inline-block:
- It can only implement Display:inline-block on inline elements, not block-level elements.
- *vertical-align is aimed at ie to hack, this is also unfriendly, can not hack try not to use hack.
Although IE6 and IE7 do not support CSS settings for Display:inline-block, the IE6 and IE7 CSS parsing engines are actually display:inline-block, such as the IMG tag and the button tag have display : The Inline-block feature allows you to set the width height but not the exclusive line.
floatChanges the normal flow of documents, affecting the surrounding elements. Position:absolute and Float:left or float:right will implicitly change the display type, regardless of what type of element was previously (except for Display:none), which will let the element display: Inline-block mode display: You can set the width height, the default broadband does not occupy the parent element.
Center
- Center Horizontally
(1) The horizontal center of the elements in the text, picture, and so on: Set Text-align:center
(2) for the parent element to determine the horizontal center of the block-level element for the width: set Margin-left:auto and margin-right for the element : Auto
(3) The horizontal center of the block level element of the indeterminate width:
I use the table package and set the table margin:0 auto; & nbsp Advantages: Ingenious approach. Cons: Added no semantic tags, deepened tag nesting levels
II. using display:inline/inline-block; Advantages: Simple and clear structure. Disadvantage: Using inline to become the inline element, missing some features, such as: width, hieght...
III. use Position:relative to set the parent element float, Position:relative and left:50%, child elements set position:relative and left:-50%. Advantages: Clear structure. Cons: Position:relative can bring some side effects.
- Center vertically
(1) parent element height indeterminate text, picture, block-level element vertical centering: Sets the same upper and lower padding implementation for the parent container.
(2) The height of the parent element determines the vertical center of a single line of text: line-height: parent element height.
(3) The parent element determines the height of the multiline text, picture, block-level elements vertically centered:
I. Using table wrapping, disadvantage: Add no semantic tags, increase the number of nested layers.
II. Support for Display:table-cell IE8 and Firefox with Display:table-cell and Vertical-align:middle to achieve the center, to unsupported ie6-7, using a specific format hack: to father and son The two-level elements are set {*position:absolute; *top:50%} and {*position:relative; *top:-50%} for centering. Disadvantage: Use to hack unfavorable to maintenance, set position:relative; Position:absolute; Bring some side effects.
Grid LayoutNo matter sidebar and main in the style who left who right, on the HTML tag to ensure that the main tag is loaded before sidebar. Only the outermost container is given a specific width, and the width of all other containers is set as a percentage – the grid layout.
Z-indexThe z-axis is activated after the element is set position to absolute or relative. Setting negative margins can overlap the position of adjacent elements, who floats on top, depending on the order in which the HTML tags appear, and the labels that appear after the first occurrence. Select occlusion problem under IE6, you can use an IFRAME of the same size to mask the select.
In order to avoid the upper and lower margins of the component and IE haslaout caused by the bug, each module in addition to special needs, all use margin-top set up and down margin.
Javascript
- By using anonymous functions to package scripts, you can effectively control global variables and avoid conflicting pitfalls.
- Let JS not conflict, need to avoid the flooding of global variables, reasonable use of namespaces and add the necessary attention to the code.
- Domready is more appropriate than window.onload to invoke the initialization function.
- The init function is called before the end of the page, that is, the </body> tag, when the DOM nodes in the page are not necessarily "loaded", but must be "generated" to simulate the domready effect.
- Put the CSS in the page header, load the HTML elements before loading their style, so as to avoid HTML no style state, put JavaScript at the end of the page, the first page to the user, and then load the page script, to avoid JavaScript blocking the rendering of the Web page, Reduce the time the page is blank.
- Both the base layer and the common layer belong to the frame level, and the page layer belongs to the application level, which can call the base layer's interface and the components of the common layer.
- If a factor in a function is very unstable, we can detach it from the inside of the function and pass it in as a parameter, thus decoupling the instability factor from the function.
High-quality component features:
- Cross-Browser compatible
- Component Ease of Use
- Reusable components
- Components can be extended
- The code is organized in order, cohesion and low-coupling.
there are three aspects of process-oriented:
- There is no direct correlation between the data and the processing function, and in performing the operation, we not only choose the corresponding processing function, but also prepare ourselves to handle the data required by the function, that is, we need to pay attention to the processing function and the data when we perform the operation.
- Data and processing functions are exposed to the same scope without the concept of private and public, and all data and processing functions in the entire program can be accessed by each other. To the late development and maintenance phase, easy to reaching, thereby increasing the difficulty of modification.
- Process-oriented thinking is a typical way of thinking about computers-input data to the processor, internal execution of the processor, and the processor returns the result.
Object-oriented:
- In the program we call "Object", which consists of two parts: "Attributes" and "behavior", corresponding to the "State" and "action" of objects in the objective world.
- The nature of the attribute is actually a variable, that is, the process-oriented data, and the nature of the behavior is actually a function, that is, process-oriented processing functions. The difference is that, in the process, data and processing functions are not associated and belong to an object together. Object-oriented objects define data and processing functions inside an object, and the properties and behavior of the object exist.
Cohesion:The interface provided externally by an object or class is very easy to understand, and complex underlying operations are encapsulated within an object or class's interface and transparent to the user. The user does not care too much about the underlying details, just know which interfaces the class provides, and the less detail the user knows, the higher the object's aggregation.
Coupling:Refers to the degree of association and dependency between classes and classes, and low coupling refers to the low degree of dependency between classes and classes, the fewer interfaces the class communicates with the class, and the lower the degree of coupling.
It is not oop, but Ooa and Ood, that decide the quality of the program from the big picture. OOA and Ood are not relevant to specific languages, while OOP is directly related to language.
JavaScript is a prototype-based language, with objects that are instantiated from new, whose properties and behaviors come from two parts, one from the constructor and the other from the prototype.
The This keyword, whether it appears in a constructor or in a prototype, points to an instance object that, through the This keyword, allows properties and methods to communicate between constructors and prototypes.
Public or private in JavaScript is implemented through scopes. Use this. The attributes defined by XXX are public, and the properties defined with var xxx are private. The scope of a private property is only in the constructor of the class.
It is not recommended to write all properties and behaviors, whether public or private, in the constructor. Because there is only one prototype of a class in memory, the behavior that is written in the prototype can be shared by all instances, instantiated, and not duplicated in the memory of the instance, and the behavior in the class is copied in each instance when instantiated. Writing in a prototype can reduce memory consumption, and there are no special reasons why it is recommended to write the behavior in the prototype as much as possible. The behavior written in the prototype must be public, and the private property cannot be accessed.
The private behavior is defined in the prototype, but by adding "_" to the name of the attribute and the behavior to make it private, it is a naming convention that does not actually implement the behavior's private, but it allows the engineer to know that it is designed to be private and to avoid invoking it like a public behavior.
If you set a property using the Set method, then we have access to the Listener property Valuechange.
The inheritance in JavaScript is to inherit the properties and behaviors in constructors and prototypes, respectively.
two ways to use function in javascript:
- As a function, it is called directly using "()", for example, "function test () {}"; Test (); ", test is used as a function and is called directly by the" () "symbol. Its this points to the Window object.
- As a constructor for a class exists, it is called with new, such as "function test () {}"; New test (); ", Test as the constructor of the class, with new to instantiate the Test class. Its this point is the instance object.
You can modify the context of a function by using the call or Apply function on the functions object.
transmit value and address:
- If the basic data types are numeric, Boolean, character, and so on, the data will be copied one copy when the assignment is made, and the copied data will be assigned, that is, the usual value of the pass.
- If complex data types such as arrays, hash objects, and so on are assigned, they are assigned directly to the memory address, rather than copying one copy of the data, which is commonly referred to as a pass-through.
Prototype is essentially a hash object, so it is used when assigning values directly.
Bird.prototype = new Animal (); The Bird.prototype.constructor points to AnimalBird.prototype.constructor = Bird; Bird.prototype.constructor back to Bird.
As long as a class is a prototype, whether it is a custom class or a built-in class of JavaScript. The methods of the built-in classes can be overridden, but properties cannot be overridden.
Instead of directly modifying the built-in class prototype, define a custom class, pass an instance of the built-in class as a parameter to the constructor, and define the extension method in the custom class. The idea is to encapsulate the built-in classes to protect the prototypes of the built-in classes from contamination.
attributes that are defined in HTML tags are available in JavaScript in two ways:
- The GetAttribute method through the DOM node object.
- Properties of the DOM node object (better compatibility).
For compatibility reasons, it is recommended to use node uniformly for general properties. XXX Way read, for custom attributes, unified use Node.getattribute ("XXX") read.
Converting complex types of data into strings, called serialization of data, is called deserialization of the data. The deserialization of a string is achieved through the Eval function.
The event object behaves differently under IE and Firefox. Under IE, the event is a property of the Window object, which is under the global scope, and in Firefox, the event object is present as the parameter of the events.
Listening for events on ancestor nodes (leveraging the bubbling mechanism) can effectively reduce memory overhead. For example, the delegate () method of jquery.
"Writing high-quality code-web front-end development and cultivation" reading notes (Turn)
