It is exactly one year from January last year to today. On this memorable day, let’s comment on the pits encountered as a front-end engineer in the past year and summarize some work experience.
The front-end entry starts with HTML tags, which are divided into
- Semantic
- style
The semantics are equivalent to the format of the word, and the style is the details of the format. Many newbies are accustomed to html``bodyonly use them when they are just getting started div. This has two disadvantages: one is that it is inconvenient to maintain and view the code, and the other is to make their own logical levels confusing, especially when it comes to writing Cascading Style Sheets (CSS). The nesting level of common semantic tags should be in the following order:
htmlbodysection(article,nav,footer)divh1,h2,…,pspan,i,label
The second is style writing. The two big pits encountered here are the positioning problem (position) and the inline block (display).
positionIt is a very important layout attribute, which usually does not floatappear together. Generally, when we want the element to appear fixed in a certain position, use
position:absolute;However, it should be noted that its parent element also needs to
positionhave attribute definitions, whether absolute or relative, otherwise the positioning will go directly to the body or the entire document flow.
It is worth mentioning that fixed fixed positioning will make the entire element out of the document flow and attached to the screen, so it will not be affected by scrolling. <nav>You can try to use the navigation bar of the web page, and add a headroom.jslightweight plug-in to allow navigation. Columns look better. In mobile development, fixed will be stuck , and the IOS kernel will be incompatible when the keyboard pops up. At this time, it is better to choose relative positioning.
The basis of the positioning problem is the box model . HTML is actually a typesetting language. Each tag corresponds to a placeholder, and the placeholder is a box. There are many introductions about the box model on the Internet, but they are all too abstract. In fact, the so-called box model is to divide the elements into three parts, external, border and internal content.
box model
Generally, element labels divoccupy one line by default, so they are also arranged line by line when typesetting. When we want the space between two elements to be larger, we can use marginattributes, and we want the child elements inside the parent element to be farther away from themselves. Choose to use padding. In some cases, they can complement each other, so it can be summed up in one sentence, same level margin, different level padding. It is basically the same as the property, except that marginthere is no auto property. The property has only one parameter, that is, the 4 margins are the same. In the case of two parameters, the front is the upper and lower margins, and the latter is the left and right margins. In the case of three parameters, the first and third refer to the top and bottom, and the second refers to the upper and lower margins. On both sides of the middle, four is the most general situation. In fact, it can be arranged in a clockwise order. The first is up, the second is right, the third is down, and the fourth is down. The special case is the case where the attribute value is auto. I understand the box model, which is the four sides relative to the parent element. I decide how far I am from you, so this is a way to center the element. When absolute positioning is selected, the centering of the element needs to be solved with sum , the former is the distance of the parent element , and the latter is its own width.paddingpaddinglefttransform
After talking about the positioning problem of the specification position, the rest is the floatfloating problem. This attribute is a bit like fixed, and it is also separated from the text flow, but fixed is separated from all the root elements defined on the page, and floatit is separated from the current and the most adjacent. There is a positiondefined parent element, which is also the basis of the waterfall layout of the flow layout, because it can find the empty place and occupy the space slowly and carefully.
Normal layout
The first float:left
three divs are floating
But sometimes it is found that the place occupied is a big pit, and the use of flaotproperties must face the problem of clearing the float . The child elements of a parent element are floating, so they don't actually take up space, so we need to fill in the content to spread those out of the flow of the document, so a common method is to add clearfixa class name to this element, the basic writing is as follows :
content:'';
clear:both;
width:0;
height:0;Basically can solve the problem, more details can refer to
Another way to make two elements on the same line is to use displayattributes. The essence of this method is to change divthe default block (block) into the spansame inline block ('inline-block'), this way of writing The relative floatadvantages are obvious, the position can be controlled in your own hands, and you don't need to be clearfixa shadow on the entire page.
The above knowledge (semantic tags, attributes and attribute values of cascading style sheets, box model, and clearing floats) are the basic qualities for a front-end entry. It is almost the same as understanding the occurrence and handling of floats, except for PM and UI at work. Given the design diagram, the attributes I usually use are:
font-size:14px;
font-family:'Arial';
box-shadow:rgba(200,200,200,0) 0 0 5px;After the front end enters (enters) and completes the door (pit), that is, after almost being able to write a complete page (nav+body+footer+icon) independently, it is basically necessary to start thinking about user interaction . This is what all Internet products should think about. core issue. There was an APP called Kumike Bus in Shenzhen before. The basic functions can be achieved at the beginning of the release and there are no major bugs. However, there are many interactive defects. This product has been tepid after it was listed on the app store until this year. After several revisions, I can feel the intention of making the product, so I will recommend others to use it, so the front-end interaction is actually to think about the user experience of the product, which makes people feel sincere . A common mistake made by interns or startups is not to consider the clarity of icons. Using sprite images is also the reason why icons are distorted and difficult to maintain. Now most of the solutions are to use font-icon and svg to represent icons. (Using icons is the easiest way to bring an entire lifeless text site to life).
Therefore, after rewriting the page and having experience, start the wonderful journey of javascript. If you are serious about js, you should go to the classic (brick) "javascript authoritative guide", and if you are going directly to the project, you can simply go to the HTML tutorial and put six basic data type. Like C++, it needs to be declared before use. The six types are
StringNumberBooleanArrayObject
In fact, no matter which language, there will be similar data types, or C++, strings, integers, Booleans, arrays (linked lists, sequence tables, hashes), and structure objects. The biggest advantage of JS is that you don't have to consider these underlying out-of-bounds issues. When implementing interaction, we also need to consider the problem of algorithm, but it is basically operating DOM elements, so it is more intuitive. What to do can be located by right-clicking on the element, so the simplest project is to bind a click event and write Apart from this, the others are much the same. Sometimes writing native js can make people crazy, and the steps to get page elements are too cumbersome, so we brought out the big killer jQuery. jQuery is actually a function library that encapsulates the two most common and practical methods of element selector and event binding. It allows us to get the DOM as directly as writing css, with almost no brains, such as using native js to get page elements p:
var ele = document.getElementsByTagName('p');//获取页面所有p元素Using jQ:
var ele = $('p');//同上
var ele2 = $('div p');//与css一样的选择器写法获取div里面的p元素Encapsulation of event binding, native basic writing:
document.getElementById("btn").onclick=function(){alert('点击事件')};//先获得元素，实现onclick的方法How to write jQ
$('#btn').click(function(){alert('点击事件');});//接口封装的更简洁;The above two ways of writing event binding involve a common knowledge point in the written test or interview, which is the concept of closure. The so-called JS closure is, in one sentence, "the function's internal definition function, and the internal function can call external variables".
Further, in fact, the essence of JS object instances are functions.
When developing a project, especially when ajax is involved, more elements are always added to the original div container. At this time, we will find that the click event (click) cannot be triggered, and the click does not respond. This is because of ajax. After the stitching data returned from the request is appended to the parent element, it is already after our js is executed, so of course there will be no response. Therefore, there are generally two solutions to the problem that the page click element does not respond:
1. Add event binding after the spliced data
2.
$('body').on('click','.ele',function(){
//your code
});//将事件监听绑定在父元素或者根元素上
For general projects, it is almost the same after a bunch of event bindings. Most of the properties implemented in the closure function operate on CSS properties, display and hide content. Now the mainstream ajax data interaction is actually the same thing, and the work is repeated continuously. . When it comes to interns working on projects, because of their own experience, there are still many time constraints. I suggest to use more plug-ins, especially when it comes to canvas. After completing the project first, then studying the source code can sometimes make us more interested.