Experience: From the Perspective of the project, some basic knowledge easily overlooked by front-end programmers will be developed.

Experience: From the Perspective of the project, some basic knowledge easily overlooked by front-end programmers will be developed.
Basic data structures and algorithms

There are two different JSON types, which are complex. For details, refer to the JSON returned in the DEMO here. To compare their differences, in addition to using off-the-shelf tools suchbeyond compareIn addition, if this tool is not installed on our machine, how can this problem be solved quickly? As a programmer, comparison is not feasible. I will put it in Excel (If your machine doesn't even have this, ignore me), sort it first, and then useBipartiteYou can quickly locate the different JSON attributes. Even the big data of 1024 fields can be located up to 10 times. In fact, algorithms do not give you a question and memorize the dead content. Instead, you can use this method to solve the problem when you encounter a specific situation.

HTML/CSSDOCTYPE

Once encountered such a problem in the project, it was good to open the page with other browsers, but it was surprisingly slow to open IE8. I have noticed that IE8 is slow when it is opened, but the CPU consumption is not high, but the web page is blank for a long time and has not been rendered, and the JS algorithm problems can be ruled out. After careful study of the code, we found that someScript,LinkAnd other labelsDOCTYPE.DOCTYPEIs used to tell the browser to explain the entire document set of rules, must be placed at the beginning of the HTML part, first haveScriptTag, it means that the browser has started to explain, and there will beDOCTYPEIt is meaningless. SetDOCTYPEPut it at the beginning of the HTML section and solve the problem mentioned at the beginning.

Block/inline elements, Box Model

HTML/CSS has a feature, so no error is reported.The result rendered by the browser does not conform to the design logic.This problem makes it difficult to search for answers online. Therefore, to write HTML/CSS, you must first understand some of the basic principles, and describe the HTML layout,Block/inline ElementsI think the relationship between them is the most basic. Extending out is CSS.Box Model. In addition, the nested combination of elements in HTML is also very important. Many Attributes in CSS, such as position and z-index, areBased on the parent objectIt is meaningless to talk about CSS without HTML. In other wordsPresentation). Fully understand these basics in HTML/CSS, and then develop a set of applicable normative solutions, which will definitely improve the Team's work efficiency and get twice the result with half the effort.

HTML/CSS can do things, there is no need to give it to javascript For doing

One of the major improvements in HTML5 is the form items and many more practical attributes such as the required and date controls. However, some basic forms can still be forgotten. Once someone tried to select radio when clicking the text next to radio, so they used jQuery to select and write events. In fact, you only need to use a label to include the input ). There are also some examples, such as IE conditional comments and CSS hack, which I have seen in the past using javascript to implement.

1. If (isIE () & IE. Verson = 7) {// These are encapsulated Methods
2. $(".something").css({width:"700px"})
3. }

Such code will only consume the performance of the browser in vain.HTML/CSS can do things, there is no need to give it to javascript For doing.

HTTP protocol

Currently, many projects use ajax to submit JSON to the background. The original HTTP submission is rare (at least in my project ), however, we cannot forget to set the form's method and action's original submission method, because this is the prototype of form submission and helps us understand the differences between HTTP protocol, such as POST and GET, understand how data is sent from the front end to the back end, and how data is returned from the back end to the front end. After understanding this, you can better communicate with the backend and quickly locate and solve data problems.

Javascript Scope

I have learned several programming languages, and the scope issues have always been discussed. In javascript, the basic knowledge of function scopes is also available. For this, we recommend the javascript authoritative guide. At that time, I had to read Chinese and English again, and read the English into diagrams, so that I could understand this point clearly.

JQuery Selector

In an html dom tree, I want to make a complicated selection of elements,It does not contain the parent element of a neighbor with an element of a certain class name ......And how to do it? Write a complexjQuerySelector? Stop. The jquery selector principle is to use regular expressions to break down your selector string (this part is calledSizzle), And then use built-in traversal functions such as prev and next (in fact, these functions are also based on the methods provided by DOM) to find the elements you want. Instead of blindly testing the semantic ambiguity of Sizzle, I will use prev, next, and so on to find my own elements based on my own logic. Besides, in step 2, I will also try my best to avoid using complex selectors (as mentioned in the previous solution). Each element uses an ID and multiple elements use a class, which is absolutely efficient and accurate.

The above is my summary in the actual project is easy to ignore, there are more, but also step by step in the future to accumulate basic knowledge, to avoid these problems. I hope this will help you and inspire others.