Shulou(Shulou.com)06/03 Report--

Editor to share with you the web front-end knowledge system example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

Before looking at the content, take a look at a preview of this knowledge framework. The picture is too big to display. You can download a clear version here: http://pan.baidu.com/s/1hqIUvUc (contains pictures and xmind files of the entire knowledge system).

two。 classification

All the knowledge framework, which must be a structural presentation, is a tree. Web front-end knowledge points are very many, but also very scattered, need several layers of structure to organize this system, otherwise it will appear very messy. So how do you organize and put who with whom? This is really worth thinking about, and you can think about it yourself.

In my summary of this knowledge framework, first of all, the * layer I am divided into: theoretical knowledge, class library framework, coding development, running environment. As shown below:

Next, let me explain to you:

This picture should be seen from the bottom up. Why? Because the bottom is the foundation of the above.

First of all, we need some theoretical knowledge, whether you are listening to others, reading books or online materials, you need certain theoretical knowledge, every kind of program development can not be avoided.

Second, with this theoretical knowledge, we can code-- not bad-- but, and no one can resist the temptation of third-party frameworks and class libraries, such as jquery.

Third, with this theoretical knowledge and the class library framework that assists us, we can really code. You may think that coding development is just writing code, what else? -- there are many ways in it.

The ultimate goal of developing a program is to run efficiently and stably in the corresponding environment. What are the things we need to do? Please look forward to

3. Theoretical knowledge includes "soft knowledge" and "hard knowledge".

"soft knowledge" and "hard knowledge" may feel strange to everyone, but in fact, you can understand it as soon as I say it.

The so-called "soft" is what can be used in all kinds of program development, which can be regarded as basic skills, internal skills, such as data structures, algorithms, design patterns, object-oriented and so on.

The so-called "hard" can be directly used in the development of this program. If you use C language, you have to learn C language grammar. It is useless to learn java at this time. The hard knowledge we need for web front-end development is actually contained in three standards: http standard, W3C standard and ECMAScript standard.

4. Talk about "hard knowledge" in web front-end development

"soft knowledge" has a lot of content, and it is also the focus of our study in college (not learning well is another thing, making up after graduation). What we are mainly talking about this time is the front-end direction of web, so let us know that this knowledge also plays an important role in the knowledge system.

As I just said, there are three standards for hard knowledge: http standard, W3C standard and ECMAScript standard, so let's talk about these three standards one by one.

4.1 http standard

Why do you need to understand the http standard when doing web front-end? Because the browser wants to get the web page from the server, the web page may also submit the information to the server, all of which have a http connection. Since the web system has something to do with the http link, you have to understand it.

My advice is: you don't have to know a lot about the details of http, but you need to know some of the http knowledge commonly used by web front-end developers-the ones I listed above. Of course, I have made an outline of my knowledge, and it is up to you to consult the details (this article is about the knowledge framework and will not involve the details of any knowledge points)

About this knowledge, it is recommended to consult the book "graphic http", which is easy to understand and I have read it before.

4.2 W3C standard

If you only know one standard for the web front end, it must be the W3C standard (as far as I know, it seems that most people really only know this one standard). It has a lot of content. Take a look at the www.w3.org/TR/ page.

Writing here reminds me of a sentence: 2Universe 8 principle-20% of the features meet 80% of the requirements. I think it's very appropriate to use this sentence here. We don't need so many things in the usual development process. Instead, you need to understand the things you usually use.

I don't think I need to explain too much about the knowledge in the following figure. This is the "three pieces" (html, css, js) that my article developed. Now you should know that they are not much part of the W3C standard, and the W3C standard is only part of the web front-end development knowledge system.

(the following figure is not fully expanded. If you want to see the diagram of the right expansion, you can download the attachment provided at the beginning of this article)

About the basics of CSS, introduce yourself to a previous series of blogs: "how much do you know about CSS?"

4.3 ECMAScript

ES for short, it's too troublesome to write the full name.

Some people may only know javascript, but not ES--. In fact, js is part of the encapsulation for web browsers on the basis of ES (adding DOM operations, BOM operations, etc.).

Such as the concepts in the figure above, you may see them in javascript, but they are actually ES content. It's just that javascript inherits these features of ES, and javascript is widely used, so it's discussed a little more in js.

It is the same as the "2Compact 8 principle". In fact, there is a lot of content in ES, and it is updated very quickly, and now it is all in ES6. But these are the most important concepts listed in my picture above. If you don't understand prototypes, closures, and scopes, you don't fully understand ES, that is, you don't fully know how to use javascript.

You can refer to a series of blogs before you introduce yourself here: "in-depth understanding of javascript prototypes and closures"

5. Framework and class library

The theoretical knowledge required for web front-end development has been described above. How to put it into practice? -- you can't do it rashly-- you have to go around the world to see what Daniel has done so much for us.

Using the following class libraries or frameworks can greatly improve your development efficiency.

First of all, jquery must be an indispensable tool for most web front-end developers. And I use jquery not only to use its API and plug-ins, I will also write jquery plug-ins, I will also read the source code of jquery and understand the design ideas of jquery. If you can do the same, please believe me, you will get unexpected results. If there is a question: how can we best understand javascript's event system? * one of the answers: read the source code of jquery about event handling several times (you may not understand it at once)!

Bootstrap doesn't have to explain too much, as can be seen from the rankings on github. Even our company's UI designers take screenshots from bootstrap as material.

FontAwesome is the largest icon system in the world. This is many times better than making icons in css, whether in terms of development, efficiency, or maintenance. Icomoon.io allows me to customize and choose my own icon file.

Module definition systems like requirejs and seajs must also be indispensable to your system. I once read a tutorial and the instructor said: requirejs brings the second front-end technology change after jquery.

Others, such as backbone, angular, and react, are slowly beginning to play their value, so I won't repeat them here because of limited energy-but they are important-you should at least try to understand them.

6. Coding development

If you want to ask which coding IDE is better, of course it belongs to Microsoft visual studio! But even Microsoft's VS*** version can't replace the development environment we're going to talk about below.

If you specialize in web front end, don't use vs anymore. Of course, choose sublime. Do you still have to write html statements manually? You have to need the help of zencoding, otherwise it will be too inefficient.

In addition, for html, css, js compression, merge, syntax checking, file cleanup, copy these operations, do you still have to do manually? You need the help of grunt or gulp.

Here I recommend my tutorial "Building an Automated web Development Environment with grunt", which is more detailed and suitable for beginners to learn.

If you have more js code or files in your system, please choose an appropriate module definition specification-CMD / AMD

Please use git to help you with file version management, the easiest thing is to use github.

Debugging, testing, but also have special tools, all need to learn.

-- Oh, my God. My hands are sore when I write these words up to now, not to mention the need to learn this knowledge-don't say that our web front end is "three blocks" anymore!

7. Operation environment

When the system is really in the running environment, when you feel that it is finally done, there are actually several knowledge points that you need to master. Look at the following picture:

First of all, you should know that although most web systems run under browsers, js may be run in node environments.

In the browser environment, the two most important points are web security and performance optimization. I have listed all the outlines that need to be paid attention to. If you want to know how to recommend two books, "White Hat will web Security" and "High-performance website Construction Guide"

The above is all the contents of the article "sample Analysis of web Front-end knowledge system". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.