Web front-end experience (no crash, only constant accumulation.) ）

On the August 25, 2013, my first formal job began, and my first job was to learn ASP. NET, using the C # language.

To the first company to work is the company is to do an OA system, but I went to most of the time has been completed, the rest is the details and bug processing, and in the first job 3 months later, I went to their own way, accurately said, I was from 2014 to start their real front end of the trip.

Early March 2014, resigned, rested for one months, because the reason for leaving is I want to turn direction, from the back end to the front, I still remember the director signed my resignation agreement said that sentence: "Do not sign a word, this is very simple." "Indeed, it is easy to sign a word for someone who has come to the right place, but for a first-time Bai Ding, any choice must be considered carefully, or there is no chance of regret if one step goes wrong."

The reason why I resigned from my first job is because I have set myself a life goal ' front-end engineer ', of course, now think about the front end this piece of understanding is not deep enough, because I have a goal is ' Architect ', so at the beginning of April 2014, he found his first front-end job, but for the total reason, he resigned after only 2 months in the company.

Mid-June 2014, my 3rd job, which is now the work, in the company is mainly to do the company's own website page, but after a few months to the company inside a variety of problems and various views also constantly entangled in their feelings of resignation, so if no accident will be in mid-March this year to leave.

OK, so much nonsense, it's time to start the subject of this article.

Web front-end, do not know when the term appears, looking back a few years, the Web front end is set design, slicing (Write page), JS processing, compatible with the art of processing, and now look back. It can be said that a few years ago the Web front end is a handyman, because a lot of page backstage staff can be done, so a small and medium-sized company needs a real web front-end staff is very small, and the Web front end is not mature. (The front end of the following is the Web front end).

However, in the past few years, the front end has undergone tremendous changes, various frameworks flying, various interactions, various plug-ins and so on, but also led to many beginners have learned to be lazy, so that contact with N multi-frame, plug-ins, finishing a few more eye effects and then to a company 5K, 6K asking price, And then by the company all kinds of notice p off.

See here may be some people feel unconvinced, but you really defy, this year time contact front end, I just feel only to get started.

Let's not say how to write code first, let's look at the neat code.

Let's start with an HTML code:

<ul>
<div></div>    <a href= "#" ><li></li></a></ul>

OK, the format of the code does not say, a label wrapped Li tag, do not know how many people have used, anyway I have so far not so used.

Now HTML5 also formally landed, HTML5 there is a proposal is the code of the readability and SEO friendliness of the optimization, more than the header, footer, nav and other obvious meaning of the label, and here the UL tag directly below the div and a tag appears, itself is a misuse of the UL label, of course, here may be said to add a tag easy to click on the link Ah, if you think so I can not say, indeed, I do not understand what is wrong with this, the browser can parse, code can also be the perfect format. But what is the logical meaning of this?

The problem here is not to answer, then a section of CSS

A{display:block;} A.info{display:block}
A.info{color: #f00}

This is a simple CSS style, of course, if your parameter is the above situation I suggest you do the optimization, or to understand the scope and priority of the CSS style, a lot of code is actually repeated, sometimes take some time to optimize, or write it to avoid this situation better (I now in the company is the case, the top boss do not do, we are only the soldiers stare).

Last section JS

if (true) alert (0) if (true) alert (1)

If you want to write a good reading code, please put in a curly brace for the if execution, but, if the code is too much, this code reads very tired, it is not conducive to formatting, of course, if you want to compress is another matter. (I use the IDE is VS, save the time can automatically compress a file including JS, CSS, HTML)

To sum up, in fact, I hope that beginners in the beginning to learn coding to maintain a code to simplify the non-repetition, format and logical clear style, so that your future work will be a great help.

Here is a code I wrote, for reference only

                    _run = function (run) {                        run = run | | true;                        Clear the Timer                        window.cleartimeout (Zd.public.cache[_cname]);                        Zd.public.cache[_cname] = null;                        _op.num + = 1;                        if (_op.num >= 0 && Run) {//To determine the active shutdown or the number of times to limit                            zd.public.cache[_cname] = window.settimeout (function () {                                Outgoing: "Current count reciprocal, run method"                                _op.fn (_op.num, _run);                            }, _op.time);                        } else {                            _exit ();                        }                    },

This code is to intercept I wrote a JS inside a small piece of content, of course, the format is automatically processed by the IDE, which also allows me to maintain a well-formed coding style, for the code of confusing documents look very headache.

If you are a novice, write code suggesting that you learn to use the IDE, of course, when you know the meaning of a code, although in school teachers are accustomed to call us handwritten code, but I recommend the use of Ide,ide smart tips can improve the speed of encoding, The automatic formatting feature allows you to write code without the level of clarity, all the code at a glance. No one else is tired of reading your code.

As a beginner, to develop a good coding habits on their own benefits a lot, of course, you have to learn more things, the following are some suggestions for beginners, for reference only.

1. Learn to write your own things, do not copy other people's code.

Anything, you will be the King, if you learn only copy, then the front of the road you also stop here.

2. Compatibility to do, but first learn to abandon.

So far, the front-end compatibility is still front-end staff a headache, CSS compatibility, HTML compatibility and JS compatibility, beginners may not think of the same JS in Google, ie, Firefox implementation of the results are not the same, serious direct error, but compatibility is not the first thing you do, Compatibility issues are now very small, mostly because of the low version of the problem, I believe that a few years later the low version will basically not, and beginners now need to learn how to write code, rather than how to deal with compatibility. (now a lot of compatibility issues Baidu came out soon)

3. Lay a solid foundation and grow slowly.

Now many people are accustomed to using the JQ DOM operation, to come to the operation of pure JS will not, so it is not responsible for their own, I am now the case, JQ used to be very accustomed to, but pure JS operation is a mess, now still have to spend time to learn the foundation.

4. Reduce the resource links on the page, and execute the code at the end of the page.

Reduce resource links, is the speed of the site loading, execution code at the end of the page, but also to the speed of loading the site, to the user, spend most of the time to load a Web page has been very painful, so we have to learn from the beginning how to optimize the page.

5. The front end does a lot of things.

When you intend to learn the front-end of the time to do all-in-one, page architecture, ued, SEO and so on, the front-end is now developing, the water has begun to deep, it is necessary to maintain a continuous learning surrounding knowledge of the mentality, you can not write a lifetime of code, but with the only code to play a bigger role.

6. Throw the old into the new.

HTML5+CSS3 era, before the HTML and CSS can discard part of the discard part, learn from the new, or when you learn that you are late.

7. The road must be step-by-step, the goal to continue to insist.

Front-end learning without the back end of the boring, but easy to get into the difficult, and now a lot of front-end personnel is not the design transformation is back in the background, but, the front end of the water is the most deep, the most of the things inside, to write a good JS program, the first to their own clear goals, and then is the constant Take a look at the source of the great God and help you a lot.

This article is here, hoping to give beginners some help, this article does not have much depth of water, but for beginners still a little use.

PS: Give yourself an advertisement, I am a small novice web front-end, school ignorant, into the community accidentally into the ranks of the Web front, fortunately, when the introduction of the time did not give me a red light, if you want to find me, can qq search Zoedylan, lonely svip6, always be included in the Red List, They also mingle with some groups around the front. If you are in Chengdu, we can have a coffee chat, maybe a colleague.

Web front-end experience (no crash, only constant accumulation.) ）