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

In this issue, the editor will bring you about the five JavaScript skills learned from the Vue source code. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Learning from the work of others is one of the rules of progress, and reading the source code of well-known frameworks can effectively improve the level of programming. Recently, the author began a reading tour of vue2.x and learned a lot of skills related to JS.

1. Determine the specific type of any object

There are six basic data types in JavaScript-Boolean, numeric, string, null, undefined, symbol, and object data type. But did you know that object data types can be subdivided into many subtypes? Objects can be arrays, functions, mappings, and so on. What should we do if we want to get a particular type of object?

Before we go any further, let's look at another question:

What is the difference between Object.prototype.toString.call (arg) and String (arg)?

Both expressions attempt to convert parameters to strings, but there are differences:

String (arg) tries to call arg.toString () or arg.valueOf (), so if arg or arg prototype overrides these two functions

Object.prototype.toString.call (arg) and String (arg) will get different results.

Const _ toString = Object.prototype.toString var obj = {} obj.toString () / / [objectObject] _ toString.call (obj) / / [objectObject]

In this case, String (arg) has the same effect as Object.prototype.toString.call (arg).

Const _ toString = Object.prototype.toString var obj = {} obj.toString = () = > '111'obj.toString () / / 111111toString.call (obj) / / [object Object] / hello/.toString () / hello/ _ toString.call (/ hello/) / / [object RegExp]

In this case, String (arg) and Object.prototype.toString.call (arg) have different results.

ECMAScript has the following rules:

Image source: EcmaScript

Calling Object.prototype.toString () on different objects returns different results.

In addition, the return value of Object.prototype.toString () is always in the format'[object'+ 'tag' +']'. If you only want the middle tag, you can delete the characters on both sides through a regular expression or String.prototype.slice ().

Function toRawType (value) {const _ toString = Object.prototype.toString return _ toString.call (value) .slice (8 sdfsd/ 1)} toRawType (null) / / "Null" toRawType (/ sdfsd/) / / "RegExp"

Using the function above, you can get the type of the JavaScript variable.

Vue source code:

Line 62 of https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/shared/util.js()

two。 Determine whether the function is native or custom

There are two types of functions in JavaScript, one provided by the server environment and the other defined by the user. The two functions have different results when converted to strings.

Array.isArray.toString () / / "function isArray () {[native code]}" function fn () {} fn.toString () / / "function fn () {}"

The native function toString always renders the result in the format of function fnName () {[native code]}. This can be distinguished.

Vue source code:

Line 58 of https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/shared/util.js()

3. Cache the calculation result of the function

If there is such a function:

Function computed (str) {/ / Suppose the calculation in thefuntion is very time consuming console.log ('2000s have passed') return'a result'}

The goal is to cache the results of function operations. When the function is called later, if the arguments are the same, the function is no longer executed, but directly returns the result in the cache. How do we do this?

Write a cached function to wrap the target function. This cache function takes the target function as an argument and returns a new wrapper function. In the cached function, you can use Object or Map to cache the result of the previous function call.

Examples are as follows:

Vue source code:

Line 153 of https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/shared/util.js()

4. Convert hello-world style to helloWorld style

When we need to collaborate on large projects, we must use common code styles. Some people may be used to helloWorld, while others may be used to hello-world. To solve this problem, you can write a function that uniformly converts hello-world to helloWorld.

Const camelizeRE = /-(\ w) / gconstcamelize = cached ((str) = > {return str.replace (camelizeRE, (_, c) = > c? C.toUpperCase ():'')}) camelize ('hello-world') / / "helloWorld"

Vue source code:

Line 164 of https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/shared/util.js()

5. Determine the JS operating environment

With the rapid development of the front end, JavaScript code may run in different running environments. To better adapt to a variety of running environments, you need to determine in which environment the current code executes. Let's take a look at how Vue determines the running environment.

Vue source code:

Line 6 of https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/shared/util.js()

These are the five JavaScript skills that Xiaobian shared from the Vue source code. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.