1. Introduction

Long ago to see more source code, also read a lot of source code analysis, their simple to browse, but when you want to calm down to their own analysis of some of the time, but there has been no time to be shelved, in fact, may also be because of their relative operation is relatively strange, subconscious and a little bit of resistance. Recently want to start action and think how to start, from which source, from what part to start, think of if chuan big man often have some source code research, and participated in his initiated source code reading activities, benefited a lot. This part is vue3 tool function, this is the address of Wakagawa’s article juejin.cn/post/699497…

Here from a source beginner’s point of view for this time to read some records and summary

2. Project preparation

All things are difficult at the beginning, and many times it is because of not having a good idea of how to have a good start, and have been shelved.

Under wakagawa’s guidance, I read vuE-Next’s Readme and related collaboration documents first. In fact, I also read it before, but I didn’t have the idea to think about it carefully and put it into practice. Although it was in English, I could read it a little slower first

In the vue-Next contribution, it was mentioned that when there were methods and functions that were required for multiple compilations, I had to write them in the share module. I felt that this was a difficult part, but I went ahead and did it

Once you have some familiarity with the document, start downloading vuE-Next locally for browsing

git clone https://github.com/vuejs/vue-next.git

cd vue-next

npm install --global yarn

yarn

yarn build
Copy the code

We should be familiar with the above process

The engine “node” is incompatible with this module, even though The engine “node” is incompatible with this module

This is vue-Next code. Not long ago, there was a node version restriction in Engine. You just need to update Node to the corresponding version, which is very easy to do with NVM. Or use YARN install –ignore-engines to ignore this restriction

Still another is important after we build, because the vue – next code basic it is reconstructed with ts, build out there will be a vue – next/packages/Shared/dist/Shared. Esm – bundler. Js file, This is the js escape output of this folder TS, where the file location can be found in tsconfig. Suddenly found a good way to review TS while learning source code!

3. Source code debugging

One of the difficult things about source code debugging is that there is no way to debug the code directly after it has been output through various steps, so we often use sourceMap to help. SourceMap is a location file that allows us to find out what our original development looked like in the code that has changed a lot

Here’s what the contribution guide says: Build with Source Maps Use the –sourcemap or -s flag to build with source maps. Note this will make the build much slower.

Add dev:sourcemap to vue-next/package.json: “Node scripts /dev/js –sourcemap”, yarn dev:sourcemap run to generate sourcemap, or build directly.

Then in the console output similar to the vue – next/packages/vue/SRC/index. The ts – > packages/vue/dist/vue. Global. Js.

If we introduce this file in the file, it will work

4. Tool code

Said above, thought this module is difficult, but in fact really go to see, a lot of writing is actually used at ordinary times, we look at this kind of source code, to put aside other, to some of our helpful code writing to learn. We from vue – next/packages/Shared/SRC/index. The ts.

Some of the front are actually more convenient to use and rigorous, but it is not difficult. Freeze ({}), es6 string method Startwith, etc

Also very useful, in the process of learning tool source code, reviewed some previous knowledge, such as some of the prototype chain related

HasOwn: Determines whether an attribute belongs to an object

const hasOwnProperty = Object.prototype.hasOwnProperty
export const hasOwn = (
  val: object,
  key: string | symbol
): key is keyof typeof val => hasOwnProperty.call(val, key)
Copy the code

ToRawType: Object to string

const objectToString = Object.prototype.toString;
const toTypeString = (value) => objectToString.call(value);
const toRawType = (value) => {
    // extract "RawType" from strings like "[object RawType]"
    return toTypeString(value).slice(8, -1);
};
Copy the code

Here are three functions, I put three together to summarize, typeof is often inaccurate, this time using this method can be supplemented

For example, you can separate an array from a plain object

// Typeof returns 'undefined' 'object' 'Boolean' 'number' 'bigint' 'string' 'symobl' 'function'Copy the code

IsPromise check if it’s a promise

const isPromise = (val) => { return isObject(val) && isFunction(val.then) && isFunction(val.catch); }; Const p1 = new Promise(function(resolve, reject){resolve(''); }); isPromise(p1); // trueCopy the code

I didn’t think of this idea before, it’s very simple and practical

CacheStringFunction Function cache

const cacheStringFunction = (fn) => {
    const cache = Object.create(null);
    return ((str) => {
        const hit = cache[str];
        return hit || (cache[str] = fn(str));
    });
};
Copy the code

5. To summarize

I am grateful to Wakagawa for his help in writing this article

This issue of reading source code is very fruitful

  1. With the confidence and direction to start researching difficult source code
  2. Pay more attention to and understand the project’s Github documentation
  3. Learned to debug source code through Sourcemap
  4. I learned the writing method of VUE tool functions, reviewed relevant knowledge, and consciously used for reference in work