[This is the 13th day of my participation in the Gengwen Challenge. For details, see “Gengwen Challenge”]

Modern front-end development is much happier than it used to be. In the past, there was a lot of work to be done in Internet Explorer, Firefox and other browsers. In order to reduce code and speed up file loading, native JavaScript was written as much as possible without plugins. The main features of all these changes should be the open source core that Google chrome provides, the 360 browser’s efforts to popularize advanced browsers for Chinese users, and the real-time Internet speed policy.

With the development and popularization of 5G technology, a large number of application scenarios will be assumed by the front end in the future. In this article, I will share eight JavaScript libraries that can improve the development efficiency. You do not need to spend time to write the basic functions commonly used, avoid duplication of wheels, let more energy to optimize the logic of the application scenario, improve the development efficiency. Of course, as a team, you can learn about these open source JavaScript libraries and build a team-friendly infrastructure.

1. Lodash

Lodash is one of the most useful JavaScript libraries, with a large set of function features, common handling functions for types like arrays, objects, strings, numbers, and so on. The syntax is easy to understand, easy to use, and a good library for learning coding techniques.

Homepage: lodash.com/

Here is a simple example code:

const _ = require("lodash"); const objIntro = { title: "devpoint", city: "Shenzhen", }; Const arrMonths = [" 1 ", "2 "]; _.forEach(objIntro, (value, key) => { console.log(`${key}:${value}`); }); // title:devpoint // city:Shenzhen _.forEach(arrMonths, (value, index) => { console.log(`${index}:${value}`); }); 0: January // 1: FebruaryCopy the code

2.Luxon

Luxon is a very popular date/time manipulation library and is the best choice for new projects because it uses more modern Intl objects with all the capabilities to parse, manipulate, and create time. A similar JavaScript library, of course, is Moment.

Intl objects are a namespace of the ECMAScript internationalization API that provides precise string comparison, number formatting, and date and time formatting [more on this].

Home page: my moment. Making. IO/luxon /

const luxon = require("luxon"); const convertTime = (timestamp, format = "yyyy-MM-dd hh:mm") => { return luxon.DateTime.fromMillis(timestamp).toFormat(format); }; const now = luxon.DateTime.now(); const nowUtc = now.toString(); // 2021-06-12t12:07:51.897 +08:00 const nowTimestamp = now.tomillis (); // 1623470871897 const formatTime = convertTime(nowTimestamp); // 2021-06-12 12:07 console.log(nowUtc); / / the T12:2021-06-12 07:51. 897 + 08:00 console. The log (nowTimestamp); // 1623470871897 console.log(formatTime); / / the 2021-06-12 12:07Copy the code

3.NanoID

To create a unique key, use a self-incrementing ID or a UUID. Here, a JavaScript library called NanoID is recommended.

A NanoID creates an alphanumeric ID that is typically smaller than a UUID. It is one of the smallest libraries for creating secure and unique ids, and can itself be shrunk and compressed to as little as 108 bytes.

Homepage: github.com/ai/nanoid/

const { nanoid } = require("nanoid");

const key = nanoid();
console.log(key); // U6XRwZsfcDuexQ7m55qdy
Copy the code

4.Passport

In modern Web applications, authentication can take many forms. Traditionally, users log in by providing a user name and password. With the rise of social networking, single sign-on using OAuth providers such as Facebook or Google has become a popular method of authentication, and services that disclose apis often require token-based credentials to protect access. If you need to implement the whole logic on your own, it’s a bit cumbersome, so if you need this convenience, consider Passport.

Home page: www.passportjs.org/

app.post("/login", passport.authenticate("local"), function (req, res) {

    res.redirect("/users/" + req.user.username);
});
Copy the code

5.Faker

Faker is a library of scripts that quickly add fake data to an application for testing, generating fictitious information such as names, pictures, product information, bank information, and so on.

Homepage: github.com/marak/Faker…

const faker = require("faker");
const randomName = faker.name.findName();
const randomEmail = faker.internet.email();
const randomProductName = faker.commerce.productName();
console.log(randomName); // Dr. Debbie Rowe
console.log(randomEmail); // [email protected]
console.log(randomProductName); // Intelligent Frozen Keyboard
Copy the code

6.Axios

Axios is a familiar promise-based HTTP library that is easy to use and is often used in VUE projects.

Homepage: github.com/axios/axios

axios .get("/auth? id=89") .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });Copy the code

7.axios-mock-adapter

Axios-mock-adapter is an AXIos-based request simulator for simulating HTTP requests. It is very useful for front-end project development. It can simulate the corresponding request and response according to the API protocol before the back-end service is completed. Vue can be used to intercept requests and simulate background responses in background management projects

Home page: www.npmjs.com/package/axi…

8.Nodemon

When developing Web applications, especially node.js based backend services, Nodemon is a must-see tool. In “Developing Node Applications with Docker”, we briefly introduced its use, which is used to listen to the changes of files in node.js project and automatically restart the service. You can make development easier and save yourself the time to restart the server every time you change it.

Home page: www.npmjs.com/package/nod…

conclusion

It’s a good idea to make good use of open source JavaScript libraries to help improve efficiency by avoiding duplication of wheels, as well as being a good textbook for improving JavaScript coding.