SegmentFault Technology Weekly - Something useful about JavaScript!

In this issue of Technology Weekly, I will show you some cheese about JavaScript!

文章推荐

Building a JavaScript tool library with Webpack

Recently received demand, need to develop some JavaScript functions for business-specific public logic parts (similar to developing a public SDK), unified maintenance, and at the same time for front-end developers of various business departments to reuse.
In order to meet the requirements of simple development and debugging, ease of use and robustness of public libraries, the following requirements need to be met:

Support TypeScript;
Support the output of a variety of modular files (UMD, CommonJS, ESM, etc.) for easy introduction and use;
Support on-demand loading (ESM Tree Shaking);
Support automated testing;
......

Check if native JavaScript functions are overridden

How do you determine if a JavaScript native function is overridden? You can't -- or at least not reliably. There are some detection methods that come close, but you can't quite trust them.

The team members always forget to check in, so I developed a small tool that allows the entire team to work full time for three months!

At the beginning, we all set up a clock-in alarm to remind us on time after get off work, but sometimes we work overtime and forget to clock in when we come home from overtime. Other times, Mizhi confidently thought that he had clocked in, and he looked at the attendance record the next day and found that he had not clocked in.

In order to completely solve this problem and keep our wallets, I developed a punch-in reminder tool, which allows the whole group to attend for three consecutive months!

The following describes how this gadget is implemented.

The console you don't know makes JS debugging easier

For the front-end engineers, you will definitely not be unfamiliar with the console, but how much do you know? Let Xiaopeng take a look at the world today.

Chrome Console - Developer Tools
Windows Press F12, MAC Press Command + Option + C or Command + Option + J to open the console

Deep understanding of JavaScript-Object (object)

JavaScript objects can inherit properties from an object called a prototype. Object methods are usually inherited properties. This "prototypal inheritance" is a core feature of JavaScript. See this example

 var johan = { name: 'johan' };
console.dir(johan);

Promisification handling of JavaScript asynchronous functions

Promisification is a long word that denotes a paradigm shift in programming, converting a function that accepts a callback into a function that returns a Promise.

This conversion is often needed in our real-world development projects, since many functions and libraries are callback-based, but Promises are more convenient, so it makes sense to Promisify them.

JavaScript WebGL 3D related concepts

Three-dimensional coordinates are theoretically enough for three components, but when looking at related programs, it is found that there will be four components. This representation is called homogeneous coordinates, which uses an n+1-dimensional vector from an original n-dimensional vector. express. For example, the homogeneous coordinates of a vector (x, y, z) can be expressed as (x, y, z, w). This representation facilitates the use of matrix operations to transform a set of points from one coordinate system to another. Homogeneous coordinates (x, y, z, w) are equivalent to three-dimensional coordinates (x/w, y/w, z/w).

6 unexpected JavaScript problems

As a front-end development engineer, JavaScript is our main development language. Its syntax is relatively simple, and the ecosystem is also very complete, and its influence in the community is growing.

In the process of our use, we often encounter various strange problems, which make us often puzzled.

Inspired by wtfjs, this article organizes 6 more common and interesting questions.

Improve the web input experience! How does JS automatically pair punctuation?

The principle is actually very simple and can be divided into the following steps

Detect the input content. If it is the above punctuation mark, the next step is to automatically complete the second half of the corresponding punctuation mark and move the cursor between the two punctuation marks. Is it very easy to understand? However, the details are far more than these, involving a lot of relatively uncommon native methods, let's take a look at how to achieve it

问答推荐

• How does js implement sending requests one by one, dozens of times in a row?
• js basic problem - scope? What is the reason for the two different results?
• When javascript judges the data type, override Object.prototype.toString?
• Nested functions in js, how does the inner function end the call of the outer function?
• js to select unselected elements of an array?
• How does js match the following regular strings?
• js how to use regular expressions to parse html text?
• How to write a function in js with multiple request addresses as parameters, initiate requests in sequence within the function, and finally return the status of all requests?
• How does js elegantly get an unknown property value in an object?
• How to implement fast filtering of a large array with javascript bit operations?

---

# SegmentFault Technology Weekly#

"Technology Weekly" is a series of technical content specially launched by the community, with a weekly theme.

Update every Tuesday, welcome to " follow ". You can also leave a message on the topic you are interested in in the comments, and recommend excellent articles related to the topic.

If you have any questions, you can add Ms. WeChat~