浏览代码

Vue 的思路开篇,core-util 补充

HcySunYang 7 年之前
父节点
当前提交
128e8b8e3c
共有 3 个文件被更改,包括 22 次插入2 次删除
  1. 1 1
      README.md
  2. 6 0
      note/Vue的思路.md
  3. 15 1
      note/附录/core-util.md

+ 1 - 1
README.md

@@ -17,7 +17,7 @@
 
 ##### [Vue构造函数整理-原型](/note/附录/Vue构造函数整理-原型)
 ##### [Vue构造函数整理-全局API](/note/附录/Vue构造函数整理-全局API)
-##### [Vue实例的设计](/note/附录/Vue构造函数整理-全局API)
+##### [Vue实例的设计](/note/附录/Vue实例的设计)
 ##### [core/util 目录下的工具方法全解](/note/附录/core-util)
 ##### [platforms/web/util 目录下的工具方法全解](/note/附录/web-util)
 ##### [shared/util.js 文件工具方法全解](/note/附录/shared-util)

+ 6 - 0
note/Vue的思路.md

@@ -1,2 +1,8 @@
 ## Vue 的思路
 
+在上一节 [Vue构造函数](/note/Vue构造函数) 中,我们整理了完整的 `Vue` 构造函数,包括原型的设计和全局API的设计,并且我们专门为其整理了附录,目的是便于查看相应的方法和属性是在哪里被添加的,同时也让我们对 `Vue` 构造函数有一个大局观的认识。
+
+从这一章节开始,我们将逐渐走进 `Vue`,我们采用一种由浅入深,由宽到窄的思路,一开始我们会从大局观来看 `Vue` 是如何设计的,然后在一点点“追究”进去,进而逐步搞清楚 `Vue` 为什么这么设计。
+
+而这一节,我们就致力于搞清楚:`Vue的思路`。我们将会从一个例子开始,这个例子及其简单,如下:
+

+ 15 - 1
note/附录/core-util.md

@@ -42,7 +42,21 @@ if (process.env.NODE_ENV !== 'production') {
 }
 ```
 
-上面的代码是简化过的,可以发现,在非生产环境下分别对 `warn`、`tip` 以及 `formatComponentName` 进行了赋值,且值都为函数,接下来我们分别看一下这三个函数的作用。
+上面的代码是简化过的,可以发现,在非生产环境下分别对 `warn`、`tip` 以及 `formatComponentName` 进行了赋值,且值都为函数,接下来我们分别看一下这三个函数的作用,不过在这之前,我们需要介绍三个变量,也就是 `if` 语句最开始的三个变量:
+
+```js
+const hasConsole = typeof console !== 'undefined'
+const classifyRE = /(?:^|[-_])(\w)/g
+const classify = str => str
+  .replace(classifyRE, c => c.toUpperCase())
+  .replace(/[-_]/g, '')
+```
+
+其中 `hasConsole` 用来检测宿主环境的 `console` 是否可用,`classifyRE` 是一个正则表达式:`/(?:^|[-_])(\w)/g`,用于 `classify` 函数,`classify` 函数的作用是将一个字符串的首字母以及中横线转为驼峰的,代码很简单相信大家都能看得懂,`classify` 的使用如下:
+
+```js
+console.log(classify('aaa-bbb-ccc')) // AaaBbbCcc
+```
 
 ##### warn