This content originally appeared on Bits and Pieces - Medium and was authored by chao huang
1. Determine the data type of the object
function myType(type) {
return Object.prototype.toString.call(type).slice(8, -1);Use Object.prototype.toString, by passing in different types of judgment to return different judgment function, one line of code, concise and elegant and flexible;
2. Loop through the array map method
It is worth noting that the map second argument points to this in the first argument callback. If the first argument is an arrow function, the setting of the second this is invalid because of the lexical binding of the arrow function
3. Loop through the array filter method
4. Use reduce to implement the array filter method
5. Loop through some methods of arrays
An array executing some always returns false if it is an empty array, while an array in the every method of another array always returns true if it is an empty array.
6. Implement the reduce method of array through loop
7. Implement the flat method of array using reduce
Because myFlat depends on this pointing, you need to specify this pointing of myFlat during reduce traversal; otherwise, it will point to window by default and an error will occur.
When an element of the array is still an array, the extension operator of ES6 is used to reduce its dimension (concat method can be used in ES5). However, the array element may have nested arrays internally, so selfFlat needs to be recursively called.
Meanwhile, the native Flat method supports a depth parameter to indicate the depth of dimensionality reduction. The default value is 1, which means that the array is reduced by one dimension
Passing Infinity turns the passed array into a one-dimensional array:
8. Implement ES6 class syntax
Create method creates an empty Object and inherits this empty Object from the parameters of Object.create method. Then let the prototype of subclass (subType) equal to the empty object, we can realize the prototype of subclass is equal to the empty object, and the empty object is equal to the inheritance of supertype. prototype.
Object.create supports the second argument, which defines attributes and attribute/accessor descriptors for the generated empty Object. We can give this empty Object a constructor property that more conforms to the default inheritance behavior. It is also an internal property that cannot be enumerable (Enumerable: False).
ES6 class allows subclasses to inherit static methods and static attributes from their parent class, whereas ordinary parasitic combinatorial inheritance can only be implemented from instance to instance. For class to class inheritance, additional methods need to be defined.
Here we use Object.setProtoTypeof to set superType to the prototype of subType, thus being able to inherit static methods and static properties from the parent class
9. Coriolization of functions
Currization is an important technique in functional programming, the technique of converting a function that takes multiple arguments into a series of functions that take one argument.
Functional programming compose another important function, and to be able to function combination, the combination of function accepts only one parameter, so if you have to accept a number of function demand and need to use compose function combination, will need to use the part of curry to prepare composite function, let it always only accepts a parameter.
10. Function Corrification (placeholder support)
If the current round parameter contains a placeholder, it is placed at the end of the internal saved array. The element of the current round does not fill the placeholder of the current round parameter, but only fills the placeholder passed in before
11. Fibonacci sequence and its optimization
Using function memory, you can save a lot of time for computations that frequently rely on previous results, such as the Fibonacci sequence. The disadvantage is that obj objects in the closure take up extra memory.
In addition, dynamic programming has lower spatial complexity than the former and is also a more recommended solution.
12. Implement the bind method
The core of the bind method that implements the function uses the call binding to point to this, taking into account other cases such as:
- When the function returned by bind is called as a constructor by new, the binding value is invalidated and changed to the object specified by new.
- Defines the length and name attributes (non-enumerable attributes) of the bound function.
- The prototype of the bound function must point to the prototype of the original function.
13. Implement the call method
The principle is to execute the function as an attribute of the context parameter passed in. ES6 Symbol type is used to prevent attribute collisions.
14. Simple CO module
The run function takes a generator function, stops every time the generator function wrapped by the run function encounters the yield keyword, and automatically calls the next method to execute to the next yield keyword when a promise after the yield is resolved successfully.
In the end, every time a promise is resolved successfully, the next promise will be resolved.
When all the results are resolved successfully, all the results of the parsing will be printed, which evolves into the async/await syntax that is most used today.
15. Function anti-shake
16. Function throttling
The trailing option is added to indicate whether an additional event is triggered at the end of the sequence.
17. Lazy loading of images
The implementation of getBoundClientRect listens for scroll events (it is recommended to add throttling for listening events). After loading images, they will be deleted from the DOM list composed of img tags. Finally, all images need to be unbound after loading listener events.
IntersectionObserver is implemented by instantiating a intersectionObserver and making it observe all IMG tags.
When img tags enter the viewing area, perform the callback when instantiated. At the same time, pass in a callback, save the instance to observe all the elements of some state, such as the boundary of each element, the current element corresponding DOM node, the ratio of the current element into the viewing area. Whenever an element into the viewing area, assigns the real image to the current IMG tag while unobserving it.
18. The new keyword
19. The achieve Object. assign
20. instanceof
Conclusion
And there we have it. 20 excellent tips that will help you write better, more productive code. How many did you know before reading?
If you have found this useful, be sure to like, comment and share.
Thanks!
Unlock 10x development with independent components
Building monolithic apps means all your code is internal and is not useful anywhere else. It just serves this one project. And as you scale to more code and people, development becomes slow and painful as everyone works in one codebase and on the same version.
But what if you build independent components first, and then use them to build any number of projects? You could accelerate and scale modern development 10x.
OSS Tools like Bit offer a powerful developer experience for building independent components and composing modular applications. Many teams start by building their Design Systems or Micro Frontends, through independent components. Give it a try →
Learn more
- Building a React Component Library — The Right Way
- 7 Tools for Faster Frontend Development in 2022
- Microservices are Dead — Long Live Miniservices
20 JavaScript Tips for Front-End Developers was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by chao huang
chao huang | Sciencx (2022-02-17T12:48:31+00:00) 20 JavaScript Tips for Front-End Developers. Retrieved from https://www.scien.cx/2022/02/17/20-javascript-tips-for-front-end-developers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.