当前位置：网站首页>Little sister's notes: how do I learn simple source code to expand my horizons

Little sister's notes: how do I learn simple source code to expand my horizons

2022-07-27 02:34:00 【51CTO】

Chuange's source code interpretation article ： It is said that 99% People don't know vue-devtools You can also directly open the corresponding component file ？ The principle of this paper is revealed
???? Thank you very much for the source code reading activity organized by brother Chuan

1. Preparation before interpretation

1.1 Read the source code interpretation article of brother Chuan roughly , Make clear the main idea of the article ： To explore the vue-devtools「 Open the component in the editor 」 Function realization principle , Its core implementation is launch-editor.

1.2 Make clear what you want to learn ：

1） Learn how to debug the source code ;

2） Explore during debugging launch-editor The source code is how to open the corresponding file in the editor ;

The goal is ： Follow brother Chuan's article to complete the debugging process , And output record documents .

1.3 resources ：

Download the source code of brother Chuan ：git clone https://github.com/lxchuan12/open-in-editor.git, Get into vue3-project Catalog , Installation dependency yarn install
install vue-devtools Google extension ： Go over the wall to the app store to download and install （ download 6.0.0 beta edition ）
understand launch-editor^[1]： The main function is to open the file with line number in the editor

2. Begin to learn , Be tasted

After the above preparatory work , Let's do it .

2.1 start

The editor I use is VSCode.

open vue3-project The directory package.json, Click debug , choice serve. This step of operation , Make us with debug In the form of , It's running vue-cli-service serve This command .

Little sister's notes ： How do I learn simple source code to expand my horizons _ Decorator mode img

Follow the article to achieve here , I'm a little confused , Because I don't know why I suddenly want to search next 【launch-editor-middleware】 This library .

Until I read through the article again , I found that brother Chuan mentioned vue-devtools Of Open component in editor^[2] This document , This document describes the reference 【launch-editor-middleware】 This library realizes the function of opening documents . And I had a preconceived idea , This issue is about interpretation vue-devtools Source code , In fact, this is just to interpret the source code that realizes the function of opening documents .

Understand this layer , We can search the project directly （ Include node_modules） Inside 【launch-editor-middleware】 keyword , You can find the source code location of this library .

2.2 Commissioning trip

The process of debugging is the breaking point , Click the debug process panel , After constant debugging , Watch the data change .

The figure below 【launch-editor-middleware】 Source code , In this source code, we can easily analyze , The final thing to run is launch function , We can make a break here , And then into 【launch-editor】 Source code , What actually works is launchEditor function .

Little sister's notes ： How do I learn simple source code to expand my horizons _ Subprocesses _02 imgimg

Take a cursory look launchEditor function , I found that it actually did four things ：

obtain fileName,lineNumber,columnNumber
exception handling ： Whether there is a file ,onErrorCallback, Whether there is editor
Guess which editor you are currently using ：guessEditor
Use child_process.spwan Open a sub process module asynchronously , It's up cmd.exe Tools open our editor , And opened the file （args Is the parameter of the file ）

After reading this function , In fact, the principle of implementation is also out , The core code is as follows ：

       
       if (process.platform === 'win32') {
       
  _childProcess = childProcess.spawn(
       
    'cmd.exe',
       
    ['/C', editor].concat(args),
       
    { stdio: 'inherit' }
       
  )
       
} else {
       
  _childProcess = childProcess.spawn(editor, args, { stdio: 'inherit' })
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

But we must have a lot of doubts , such as ：

Click the button on the browser console , How does the editor receive its request information ？
What's used API/ Programming skills ？
If we can realize this function , How to achieve it （ Retell ideas ）？

3. Hands-On Activities , Go deep into practice

In the previous disassembly , Although many places seem to understand , But I don't fully understand , Let's answer the question when looking at the source code ：

3.1 How the editor receives the request information from the browser

Click on vue-devtools When the button of , We will find that it sent a request ：http://localhost:8080/__open-in-editor?file=src/components/HelloWorld.vue

Little sister's notes ： How do I learn simple source code to expand my horizons _ Decorator mode _04 img

How does the editor receive this request ？ Search for 【launch-editor-middleware】 keyword , We will find that , stay @vue/cli-service Of serve.js In file , Used app.use("/__open-in-editor"）, Used to express My friends will be familiar , This is a express Introduce the usage of middleware . When the browser sends http://localhost:8080/__open-in-editor?file=src/components/HelloWorld.vue When this request is made , Enter the following code .

       
       // vue3-project/node_modules/@vue/cli-service/lib/commands/serve.js
       
// 46 That's ok 
       
const launchEditorMiddleware = require('launch-editor-middleware')
       
// 192 That's ok 
       
before (app, server) {
       
    // launch editor support.
       
    // this works with vue-devtools 
       
       & @vue/cli-overlay
       
    app.use('/__open-in-editor', launchEditorMiddleware(() console.log(
       
        `To specify an editor, specify the EDITOR env variable or ` +
       
        `add "editor" field to your Vue project config.\n`
       
    )))
       
    //  Omit some codes ...
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

3.2 What's used API/ Programming skills

3.2.1 Function overloading

stay 【launch-editor-middleware】 Here is the entry function of , The writing method of function overloading is used , This kind of writing is very common in many source codes , The purpose is to facilitate the transfer of parameters when users call , For non quantitative parameters, corresponding to different operation contents .

       
       // vue3-project/node_modules/launch-editor-middleware/index.js
       
const url = require('url')
       
const path = require('path')
       
const launch = require('launch-editor')
       
module.exports = (specifiedEditor, srcRoot, onErrorCallback) => {
       
  // specifiedEditor =>  The message here is  () => console.log()  function 
       
  //  So and  onErrorCallback  Switch , Assign it to the error callback function 
       
  if (typeof specifiedEditor === 'function') {
       
    onErrorCallback = specifiedEditor
       
    specifiedEditor = undefined
       
  }
       
  //  If the second argument is a function , Also assign it to the error callback function 
       
  //  What's coming through here is undefined
       
  if (typeof srcRoot === 'function') {
       
    onErrorCallback = srcRoot
       
    srcRoot = undefined
       
  }
       
  // srcRoot  It's a parameter passed in , Or the current  node  The directory of the process 
       
  srcRoot = srcRoot || process.cwd()
       
  //  Finally, we return a function , express  middleware 
       
  return function launchEditorMiddleware (req, res, next) {
       
    //  Omit  ...
       
  }
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

3.2.2 Decorator mode

This code wrapErrorCallback Execute other code first , To perform onErrorCallback, This form of wrapped function is also common in many source codes , It can be understood as a decorator , hold onErrorCallback Packed up , The original function is enhanced .

This is also the decorator design pattern in the design pattern ：

       
       function wrapErrorCallback (cb) {
       
  return (fileName, errorMessage) => {
       
    console.log()
       
    console.log(
       
      chalk.red('Could not open ' + path.basename(fileName) + ' in the editor.')
       
    )
       
    if (errorMessage) {
       
      if (errorMessage[errorMessage.length - 1] !== '.') {
       
        errorMessage += '.'
       
      }
       
      console.log(
       
        chalk.red('The editor process exited with an error: ' + errorMessage)
       
      )
       
    }
       
    console.log()
       
    if (cb) cb(fileName, errorMessage)
       
  }
       
}
       
onErrorCallback = wrapErrorCallback(onErrorCallback)
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

3.2.3 apply

apply grammar ：func.apply(thisArg, [argsArray]), You can often see it in the source code . Use here apply It's a extraArgs As push Methodical arguments Pass in .

       
       if (lineNumber) {
       
  // getArgumentsForPosition  Returns an array 
       
  const extraArgs = getArgumentsForPosition(editor, fileName, lineNumber, columnNumber)
       
  //  take  extraArgs  Parameters  push  To  args  in 
       
  args.push.apply(args, extraArgs)
       
} else {
       
  args.push(fileName)
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.

3.2.4 child_process

child_process yes Node.js A module of , It provides the ability to spawn child processes , By default , Will be in the father Node.js Between the process and the derived child process stdin、stdout and stderr The pipe .

3.2.5 process.platform

3.3 How to achieve （ Retell ideas ）

Communication between browser and editor ： With the help of Node.js process , Communicate with the browser
The browser passes the path of the file to be opened to the editor through parameters
Determine the operating system platform and the editor used （ The command line program of each platform is different , The environment variables of each editor are also different ）
With the help of Node Tune up cmd.exe Tools open our editor , Open the file in the corresponding path

       
       //  Pseudo code 
       
app.use("__open-in-editor", handleLaunchEditor)
       
function handleLaunchEditor(filePath) {
       
  const platform = process.platform
       
  const editor = guessEditor()
       
  childProcess.spawn(editor, fileArgs, { stdio: 'inherit' })
       
}
      
1.
2.
3.
4.
5.
6.
7.
8.

4. feeling

Coding ability ： By reading launch-editor Source code , Study / Revisited 【 Function overloading 】【 Decorator mode 】【apply Usage method 】, The organizational structure of the source code is also very worthy of our study , For example, many function codes are encapsulated separately , Encapsulated into functions or modules , Make the structure of the whole source code very clear , The core is easy to understand , Easy to interpret and maintain .（ This can also be understood as a top-down programming method ）
Expand your horizons ： The source code contains many and Node.js Related methods , Many of them are unfamiliar to me , In the process of interpreting the source code, I also learn Node.js The process of .
May be used at work ：

Development VSCode The plug-in can communicate with the outside world with Node.js process
The application of decorator mode
Determine the operating system platform

Reference material

[1]

launch-editor: https://github.com/yyx990803/launch-editor

[2]

Open component in editor: https://github.com/vuejs/devtools/blob/legacy/docs/open-in-editor.md

Little sister's notes ： How do I learn simple source code to expand my horizons _ Subprocesses _05

················· Introduction to ruokawa ·················

Hello , I am a If Chuan , Graduated from Jiangxi University . Now I'm a front-end Developer “ The engineer ”. It says 《 Learn the whole source architecture series 》 Multiple articles , In Zhihu 、 Nuggets reap millions of reading .
from 2014 From the year onwards , I write an annual summary every year , Has written 7 piece , Click to see Annual summary . meanwhile , Active in Zhihu @ If Chuan , Nuggets @ If Chuan . Committed to sharing front end development experience , vision ： help 5 In this year, the front-end people are in the forefront .