孤梧笔记
0%

发表于 更新于 分类于

简单工厂模式(Simple Factory Pattern)：又称为静态工厂方法(Static Factory Method)模式，它属于类创建型模式。在简单工厂模式中，可以根据参数的不同返回不同类的实例。简单工厂模式专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。

1
2
3
4
5
6
7
8
function Factory(name) {
  if(name === 'A') {
    return 'A product'
  } else if (name === 'B') {
    return 'B Product'
  }
  return
}

发表于 更新于 分类于

古语云：眼过千遍不如手过一遍。边调试边学习代码，进步更快。

预备

拉取官方代码

1
git clone https://github.com/vuejs/vue.git

安装依赖

打开 vue 目录，使用

1
yarn

或

sh
1
npm i

安装依赖。

从 package.json 开始

package.json 乃项目之根本，此文件涵盖项目的配置信息及其依赖包。

在 package.json 中，本次学习主要使用 script 字段中的 dev 命令:

1
2
3
4
"scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
 		...
 }

此命令使用 rollup 在 /dist 目录打包输出完整版的 vue.js。因打包后的 vue.js 时压缩过的，故而运行此命令前，需在命令中加上参数 --sourcemap，可同时生成名为 vue.js.map 的映射文件 ，以便调试时看到原始代码。

1
2
3
4
"scripts": {
    "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",
 		...
 }

寻找入口

在 Vue 项目中，首先会使用 new Vue() 创建 Vue 的实例，因此可直接编写案例打断点来找到 Vue 的构造函数。

另一种方法是通过 rollup 配置文件一步步找寻，但打断点更直截了当。

案例可以放在 /examples 目录下，便于集中管理：

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
29
<!-- /examples/test/init.html -->

<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>寻找入口</title>
  </head>
  <body>
    <div id="app">
      {{msg}}
    </div>

    <script src="../dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data() {
          return {
            msg: "hello vue"
          }
        }
      })
    </script>
  </body>
</html>

在浏览器中打开当前测试案例，在第 17 行打断点刷新并单步进入：

01-init-debugger

当前显示的即 Vue 构造函数所在文件：

02-show-directory

若想定位当前文件在源码目录中的位置，可如上图，右键选择 边栏中显示 即可在左侧看到 Vue 构造函数在 /src/core/instance/index.js。

至此，入口已寻得。