“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Hello, everyone, after the last article, I believe that we have understood the JS of the past, but the past can not chase, review the present, we have to learn the latest JS, oath to do the front street the most beautiful son ~

The front three musketeers

If you decide to be a front-end player, get to know the three front-end players: HTML, CSS, and JS. HTML is the web page, CSS is responsible for style, JS is responsible for action. If you use a building to explain, HTML is blank housing, CSS is soft installation, JS is water and electricity. Of course, the master is the user, the master experience depends on the elder brother three with the degree, if only HTML and CSS, equivalent to no water, no electricity, simply can not live.

html

HTML full name is Hyper Text Markup Language, which contains a series of tags, such as HTML, body, header, div, A and so on. When you build a blank room, the bricks, tiles and steel bars you need are different tags in HTML. Of course, bricks and tiles will have their own applicable scenarios, of course, you can also “go with a brick”, for example, my relatives of the two-story building is pure brick, my father said that although it looks good, but not as strong as using some steel bar.

So when you write a page in HTML, of course you can write div all the way, but for the sake of readability and maintainability, it is recommended to use semantic tags, such as nav tags for navigation, P tags for text, and section for modules.

About the use of HTML tags, I will not be verbose with you, directly on the rookie tutorial to write it. Maybe you will feel a lot of labels, can not remember, it doesn’t matter, I used to be in the early preschool when the same trouble, but do a few more pages will soon remember.

css

Cascading Style Sheets CSS stands for Cascading Style Sheets. Decide the display style of the web page, is to decide your castle to go princess or prince of soft decoration. About CSS, recommend a blogger Zhang Xinxu, his CSS articles are quite many quite all, although a little strange shu style, I used to learn CSS when often see his article, very practical.

In addition to CSS, you may have heard of LESS and SCSS, but in fact, less and SCSS will eventually be converted to CSS, browsers only recognize CSS, as less and SCSS are for the convenience of our developers. For beginners, learn CSS first, then LESS and SCSS are very simple, just equivalent to adding modules and variables CSS.

js

Js will not need to say more, the last length also said a lot, the next article I will be js based. You may have heard of jQuery, Zepto, Vue, React, Angular, Webpack, gulp, Grunt, Vite, Element, ANTD, etc.

Js with jQuery, Zepto

In fact, when I taught myself the front end, I couldn’t tell JS from jQuery at all. I just found the online tutorial and started to write code. I didn’t want to expose my weakness of not being able to js in the interview. The interview questions were all written in c++. Maybe because of my good knowledge of algorithm and network, I got the job.

Attached is a screenshot of the review I received during the interview:

Document.getelementbyid (“_id”); document.getelementById (“_id”); document.getelementById (“_id”); And written document. GetElementByclassName (” _class “), very troublesome, and use the jQuery, simply use a selector is ok, such as $(” # _id “) or $(” _class “).

If you still can’t tell the difference, imagine that JS is a pile of dirt and jQuery is a brick someone else has already made. When it comes to building a house, of course you can mix mud first, then bricks, and then the house. Or you can just build a house out of bricks that someone else has burned. Pure native JS development is the former; jQuery is the latter.

Zepto, which is a simplified version of jQuery, is mostly used on mobile due to its lightweight nature.

JQuery is very popular in those days, many of the old front end people are “sharp jQuery”, interview must test a jQuery API principle. Of course, with the rise of the Internet, the disadvantages of jQuery become more and more obvious, and for large projects, jQuery cannot support modularity efficiently. Modularity is possible with jQuery and magic, but the code is very unreadable and only big guys can do magic…

The React with Vue

React is a framework developed by Facebook. It was first used internally, and then opened to open source. Later, Facebook considered charging for Vue.

The developer of Vue is You Yuxi, a Chinese. In addition, Vue itself is easy to use, so Vue has a thriving community in China, with more Vue users than React users.

Speaking of which, I think you can use Vue or React directly. There is no need to use jQuery in the middle. You may think it is too stiff. When I switched from jQuery to React, I just read an article by Ruan Yifeng about React. Then I started to write React and maintain Node, but I never wrote node at that time. Of course it was painful. I lost a lot of weight in those two weeks. Later, when I wrote the Vue project for the first time, I got the project directly and read the document while writing the requirements. Of course my method may be a little quick, but I’m a hothead and can’t wait.

Finally, back to the philosophical question, Vue Or React? It’s as simple as what you need or what you’re good at, and by “you” I mean your team. If you need an interview in the short term, it’s recommended to master at least one. Dig deep. If the long-term view, the proposal both learns, art does not press body much. However, people’s energy is limited. I have done React and Vue projects, but at present, I mainly focus on React and often dig React source code. Vue is a small cake, which I often look at but seldom eat.

React is more popular in big factories. This is true, but many big factories also use Vue, so it is still the same sentence. Master at least one

Angular

Finally, Angular is not widely used in China, so the market is not large and the community is dying. Please choose carefully

Of course, if you are Angular True Love, come on, loneliness is a kind of beauty

Grunt, gulp, Webpack, vite

Grunt and Gulp are basically in the era of jQuery and Zepto. Grunt and Gulp are in the era of jQuery and Zepto. Grunt and Gulp are in the era of jQuery and Zepto. Vite is just coming out of the flower, very beautiful but works are not enough, so now or the big brother Webpack world.

Antd, Element, Varlet, etc

Both are UI libraries, which provide standardised components that are the darling of backend management systems, but are not suitable for fancy projects such as mobile.

Js to review

Js is a scripting language used to interact with web pages. It consists of the following three components:

• ECMAScript: Defined by ECMA-262 and provides core functionality
• DOM: Provides methods and interfaces for interacting with web content
• BOM: Provides methods and interfaces for interacting with the browser

These three parts of JS are supported to varying degrees by all five major Web browsers (IE, FireFox, Chrome, Safari, and Opera). ES5 is generally fully supported across all browsers, and ES6 and ES7 support is improving. Internet Explorer is the most dangerous browser for startups because it doesn’t always support nice features like proxy, so if you’re stuck or about to die, keep in mind

conclusion

Recently, not only many cute new in the front of learning, there are also many old front and I want to learn JS again, this is not, I took the article to you, have a sincere ~

This is also part of my 30-day salty fish plan. If you are also interested, you can follow the public account “Bubucuo” and reply “Salty Fish”. Stay idle with us

If you do not want to be the volume king, please enclosure from the volume! Follow the public account “Bubucuo”, reply “Curly King”, join curly King enclosure movement.