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

What are the 12 super-popular JavaScript projects on GitHub? I believe many inexperienced people are at a loss about this. Therefore, this article summarizes the causes and solutions of the problems. Through this article, I hope you can solve this problem.

1. 30-seconds-of-code

This project is about short code snippets that meet all your development needs, which are often used and very classic code, which is worth learning!

For example, the JavaScript module is divided into All, Array, Browser, Date, Function, Math, Node, Object, String to facilitate learning.

For example: four JavaScript array methods that you must know

Array.prototype.map ()

Const arr = [1,2,3]; const double = x = > x * 2; arr.map (double); / / [2,4,6]

Array.prototype.filter ()

Const arr = [1,2,3]; const isOdd = x = > x% 2 = 1; arr.filter (isOdd); / / [1,3]

Array.prototype.reduce ()

Const arr = [1,2,3]; const sum = (x, y) = > x + y; arr.reduce (sum, 0); / / 6 const increment = (x, y) = > [... x, x [x.length-1] + y]; arr.reduce (increment, [0]); / / [0,1,3,6]

Array.prototype.find ()

Const arr = [1,2,3]; const isOdd = x = > x% 2 = 1; arr.find (isOdd); / / 1 for example: how to achieve sleep function in JavaScript?

Synchronized version

Const sleepSync = (ms) = > {const end = new Date () .getTime () + ms; while (new Date () .getTime ())

< end) { /* do nothing */ } } const printNums = () =>

{console.log (1); sleepSync (500); console.log (2); console.log (3);}; printNums (); / / Logs: 1, 2, 3 (2 and 3 log after 500ms)

Asynchronous version

Const sleep = (ms) = > new Promise (resolve = > setTimeout (resolve, ms)); const printNums = async () = > {console.log (1); await sleep (500); console.log (2); console.log (3);}; printNums (); / / Logs: 1,2,3 (2 and 3 log after 500ms)

In fact, the examples mentioned above also provide explanations of api and methods, which are convenient for readers to understand, so they will not be written here.

Also want to learn more classic js code snippets, please see the following warehouse

Https://github.com/30-seconds...

2. 33-js-concepts

33 concepts that JavaScript developers should understand

This project is created to help developers master the concept of JavaScript. It is not a must, but can be used as a guide in future learning (JavaScript).

Catalogue

Call stack

Original type

Value type and reference type

Implicit, explicit, nominal and duck types

= = and =, typeof and instanceof

This, call, apply and bind

Functional scope, block-level scope and lexical scope

Closure

Map, reduce, filter and other higher order functions

Expressions and statements

Variable lifting

Promise

Execute functions immediately, modularization, namespaces

Recursion

Arithmetic

Data structure

Message queuing and event loops

SetTimeout, setInterval and requestAnimationFrame

Inheritance, Polymorphism and Code reuse

Bitwise operators, class array objects, and typed arrays

DOM trees and render passes

New and constructor, instanceof and instance

Prototype inheritance and prototype chain

Object.create and Object.assign

Factory functions and classes

Design pattern

Memoization

Pure functions, function side effects and state changes

Performance-consuming operation and time complexity

JavaScript engine

Binary, decimal, hexadecimal, scientific notation

Partial function, Corey, Compose and Pipe

The way to keep the code clean

And each topic contains relevant wonderful articles and videos, which is very suitable for learning.

Https://github.com/leonardoms...

3. Javascript-questions

JavaScript Advanced issues list.

From basic to advanced: test your knowledge of JavaScript, refresh your knowledge a little or prepare for a coding interview!

For example, what will be the output below?

Let a = 3 let b = new Number (3) let c = 3 console.log (a = b) console.log (a = = b) console.log (b = = c)

A: true false true

B: false false true

C: true false false

D: false true true

Answer: C

Explanation:

New Number () is a built-in function constructor. Although it looks like a number, it's not really a real number: it has a bunch of extra features and it's an object.

When we use the = = operator, it only checks to see if they have the same value. Because their values are all 3, they return true.

Then, when we use the = = operator, both values and types should be the same. New Number () is an object rather than a number, so it returns false.

Https://github.com/lydiahalli...

4. JavaScript 30

Use native JavaScript to complete 30 projects in 30 days.

Daily completion of HTML, CSS and javascript solutions.

Https://github.com/wesbos/JavaScript30

5. Codewars

Similar to leetcode, it is also about working with others on the platform to complete real code challenges and improve your skills.

Compared with other platforms, the questions given by codewars are more in line with real work and life, and many questions give the background of the topic and have a more sense of substitution.

You can improve your skills: challenge yourself on the kata created by the community to enhance various skills. Master the language you currently choose, or expand your understanding of the new language.

To join this community, you must first answer questions to prove your skills.

Https://www.codewars.com/

6. Getting started with ES6

The entry front end should all know the ES6 open source books, brother cat first entered the front end is to learn Ruan Yifeng teacher open source ES6 content, has been practical so far!

"getting started with ECMAScript 6" is an open source JavaScript language tutorial that provides a comprehensive introduction to the new syntax features introduced in ECMAScript 6.

This book covers all the differences between ES6 and the previous version of ES5, gives a detailed introduction to the grammar knowledge involved, and gives a large number of concise and easy-to-understand sample code.

This book is of intermediate difficulty and is suitable for readers who have mastered ES5 to keep abreast of the latest developments in the language. It can also be used as a reference manual to find new grammar points.

If you are a beginner of the JavaScript language, it is recommended to complete the introduction to the JavaScript language tutorial before reading this book.

Https://es6.ruanyifeng.com/

7. JavaScript tutorial

This tutorial provides a comprehensive introduction to the core syntax of JavaScript, covering all aspects of the ES5 and DOM specifications.

Also written by teacher Ruan Yifeng, it is really very easy to understand and very suitable for front-end learning.

I have to say that the technical articles written by knowledgeable people are very easy to understand.

The content starts from the simplest, step by step, from shallow to deep, and strive to be clear and easy to understand.

All chapters have a large number of code examples, which are easy to understand and imitate, and can be used in practical projects.

This tutorial is suitable for beginners as an introduction to the JavaScript language, after learning can undertake the actual web page development work, but also suitable for daily use of the reference manual.

Catalogue

An introduction to

Data type

Operator

Special topic on Grammar

Standard library

Object oriented programming

Asynchronous operation

DOM

Event

Browser model

Appendix: Web element interface

Https://wangdoc.com/javascript/

8. Modern JavaScript course

Based on the latest JavaScript standard. Through simple but enough detailed content to explain to you from basic to high-level JavaScript-related knowledge.

The core content of the course consists of two parts, covering knowledge of the JavaScript programming language and browser behavior. There are also a series of feature articles.

JavaScript programming language

Here we will learn JavaScript from scratch, as well as related advanced concepts such as OOP.

This tutorial focuses on the language itself, and we use the minimum environment by default.

Browsers: documents, events, interfaces

Learn how to manage browser pages: add elements, manipulate the size and location of elements, dynamically create interfaces and interact with visitors.

Other articles

A list of other topics not covered in the first two parts of the tutorial. There is no clear hierarchy here, and you can read the articles in the order you want.

Https://zh.javascript.info/

9. MDN

The MDN Web Docs website provides information about open network (Open Web) technologies, including HTML, CSS, and API for websites and progressive web applications.

Mozilla, Microsoft, Google, Samsung and W3C will work together to make MDN the best Web document.

Therefore, it is authoritative to learn web technology on this platform.

From the developer, the service developer.

Https://developer.mozilla.org...

10. Clean-code-javascript

Excellent JS code specification.

For example, use the same keywords for variables of the same type

Bad:

GetUserInfo (); getClientData (); getCustomerRecord ()

Good:

GetUser (); another example: use searchable naming

During the development process, we spend much more time reading the code than writing it, so it is very important to ensure that the code is readable and searchable. Remember, don't fool yourself when it's all right.

Bad:

What exactly does 525600 mean? For (var I = 0; I

< 525600; i++) { runCronJob(); } Good: // 声明为全局变量 var MINUTES_IN_A_YEAR = 525600; for (var i = 0; i < MINUTES_IN_A_YEAR; i++) { runCronJob(); } https://github.com/ryanmcdermott/clean-code-javascript 11. TypeScript 入门教程 从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。 这个教程真的是猫哥看过的最完整而简洁、并且通俗易懂的 TypeScript 教程！ 《TypeScript 入门教程》全面介绍了 TypeScript 强大的类型系统，完整而简洁，示例丰富，比官方文档更易读，非常适合作为初学者学习 TypeScript 的第一本书。 —— 阮一峰 比如 类型别名 ：类型别名用来给一个类型起个新名字。 简单的例子: type Name = string; type NameResolver = () =>

String; type NameOrResolver = Name | NameResolver; function getName (n: NameOrResolver): Name {if (typeof n = 'string') {return n;} else {return n ();}}

In the example above, we use type to create a type alias.

Type aliases are often used for federated types.

Https://ts.xcatliu.com

12. W3school

Front-end must know the Web technology tutorial platform, although many front-end know, but it is necessary to mention.

Leading Web technology tutorials-all free.

At W3School, you can find all the website construction tutorials you need.

From basic HTML to CSS, and even advanced XML, SQL, JS.

The best place to learn the front end here is that it is possible for demo to learn, which can verify your effect or output.

Https://www.w3school.com.cn/j...

After reading the above, have you mastered the methods of each of the 12 hot JavaScript projects on GitHub? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.