简单工厂模式(Simple Factory Pattern):又称为静态工厂方法(Static Factory Method)模式,它属于类创建型模式。在简单工厂模式中,可以根据参数的不同返回不同类的实例。简单工厂模式专门定义一个类来负责创建其他类的实例,被创建的实例通常都具有共同的父类。
1 | function Factory(name) { |
简单工厂模式(Simple Factory Pattern):又称为静态工厂方法(Static Factory Method)模式,它属于类创建型模式。在简单工厂模式中,可以根据参数的不同返回不同类的实例。简单工厂模式专门定义一个类来负责创建其他类的实例,被创建的实例通常都具有共同的父类。
1 | function Factory(name) { |
古语云:眼过千遍不如手过一遍。边调试边学习代码,进步更快。
1 | git clone https://github.com/vuejs/vue.git |
打开 vue 目录,使用
1 | yarn |
或
1 | npm i |
安装依赖。
package.json 乃项目之根本,此文件涵盖项目的配置信息及其依赖包。
在 package.json 中,本次学习主要使用 script
字段中的 dev
命令:
1 | "scripts": { |
此命令使用 rollup
在 /dist
目录打包输出完整版的 vue.js
。因打包后的 vue.js
时压缩过的,故而运行此命令前,需在命令中加上参数 --sourcemap
,可同时生成名为 vue.js.map
的映射文件 ,以便调试时看到原始代码。
1 | "scripts": { |
在 Vue 项目中,首先会使用 new Vue()
创建 Vue 的实例,因此可直接编写案例打断点来找到 Vue 的构造函数。
另一种方法是通过 rollup 配置文件一步步找寻,但打断点更直截了当。
案例可以放在 /examples
目录下,便于集中管理:
1 | <!-- /examples/test/init.html --> |
在浏览器中打开当前测试案例,在第 17 行打断点刷新并单步进入:
当前显示的即 Vue 构造函数所在文件:
若想定位当前文件在源码目录中的位置,可如上图,右键选择 边栏中显示
即可在左侧看到 Vue 构造函数在 /src/core/instance/index.js
。
至此,入口已寻得。