Răsfoiți Sursa

根据dev分支更新

HcySunYang 7 ani în urmă
părinte
comite
acd9e98d93
3 a modificat fișierele cu 49 adăugiri și 15 ștergeri
  1. 28 0
      note/7创建编译器.md
  2. 9 15
      note/附录/core-util.md
  3. 12 0
      note/附录/shared-util.md

+ 28 - 0
note/7创建编译器.md

@@ -1,5 +1,7 @@
 ## 创建编译器
 
+#### compileToFunctions
+
 接下来我们的主要工作,就是搞清楚 `compileToFunctions` 函数,根据 `platforms/web/entry-runtime-with-compiler.js` 文件头部的 `import` 引用关系可知,`compileToFunctions` 函数来自于当前目录下的 `./compiler/index.js` 文件,打开 `./compiler/index.js` 文件,可以发现这样一句代码:
 
 ```js
@@ -177,6 +179,32 @@ export function createCompileToFunctionFn (compile: Function): Function {
 
 至此我们经历了一波三折,终于找到了 `compileToFunctions` 函数,`/entry-runtime-with-compiler.js` 文件中执行的 `compileToFunctions` 函数,其实就是在执行 `src/compiler/to-function.js` 文件中 `createCompileToFunctionFn` 函数返回的 `compileToFunctions` 函数。
 
+#### 
+
+经过前面的讲解,我们已经知道了 `entry-runtime-with-compiler.js` 文件中调用的 `compileToFunctions` 的真正来源,可以说为了创建 `compileToFunctions` 函数经历了一波三折,现在大家也许会有疑问,比如为了要弄的这么复杂?我们暂时把这个疑问放在心里,随着我们的深入,大家将会慢慢理解其内涵。
+
+这个小节我们就以 `entry-runtime-with-compiler.js` 文件中调用的 `compileToFunctions` 开始,仔细探索其所做的事情,打开 `entry-runtime-with-compiler.js` 文件找到这段代码:
+
+```js
+const { render, staticRenderFns } = compileToFunctions(template, {
+  shouldDecodeNewlines,
+  shouldDecodeNewlinesForHref,
+  delimiters: options.delimiters,
+  comments: options.comments
+}, this)
+```
+
+上面这段代码存在于 `Vue.prototype.$mount` 函数体内,我们已经知道 `compileToFunctions` 函数的作用是把传入的模板字符串编(`template`)译成渲染函数(`render`)的。所以传递给 `compileToFunctions` 的第一个参数就是模板字符串(`template`),而第二个参数则是一些选项(`options`),接下来我们先把这里传递的选项对象搞清楚,选项对象如下:
+
+```js
+{
+  shouldDecodeNewlines,
+  shouldDecodeNewlinesForHref,
+  delimiters: options.delimiters,
+  comments: options.comments
+}
+```
+
 
 
 

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

@@ -144,7 +144,7 @@ try {
 }
 ```
 
-上面是声明周期钩子回调执行时的代码,由于声明周期钩子是开发者自定义的函数,这个函数的执行是很可能存在运行时错误的,所以这里需要 `try catch` 包裹,且在发生错误的时候,在 `catch` 语句块中捕获错误,然后使用 `handleError` 进行错误处理。知道了这些,我们再看看 `handleError` 到底怎么处理的,源码上面已经贴出来了,首先是一个 `if` 判断:
+上面是生命周期钩子回调执行时的代码,由于声明周期钩子是开发者自定义的函数,这个函数的执行是很可能存在运行时错误的,所以这里需要 `try catch` 包裹,且在发生错误的时候,在 `catch` 语句块中捕获错误,然后使用 `handleError` 进行错误处理。知道了这些,我们再看看 `handleError` 到底怎么处理的,源码上面已经贴出来了,首先是一个 `if` 判断:
 
 ```js
 if (vm) {
@@ -162,7 +162,7 @@ if (vm) {
 }
 ```
 
-那这段代码是干嘛的呢?我们先不管,回头来说。在判断语句后面直接调用了 `globalHandleError` 函数,且将三个参数透传了过去:
+那这段代码是干嘛的呢?我们先不管,回头来说。我们先看后面的代码,在判断语句后面直接调用了 `globalHandleError` 函数,且将三个参数透传了过去:
 
 ```js
 globalHandleError(err, vm, info)
@@ -183,7 +183,7 @@ function globalHandleError (err, vm, info) {
 }
 ```
 
-`globalHandleError` 函数首先判断 `config.errorHandler` 是否为真,如果为真则调用 `config.errorHandler` 并将参数透传,这里的 `config.errorHandler` 就是 `Vue` 全局API提供的用于自定义错误处理的配置我们前面讲过。由于这个错误处理函数也是开发者自定义的,所以可能出现运行时错误,这个时候就需要使用 `try catch` 语句块包裹起来,当错误发生时,使用 `logError` 函数打印错误,当然啦,如果你们有配置 `config.errorHandler` 也就是说 `config.errorHandler` 此时为假,那么将使用默认的错误处理函数,也就是 `logError` 进行错误处理。
+`globalHandleError` 函数首先判断 `config.errorHandler` 是否为真,如果为真则调用 `config.errorHandler` 并将参数透传,这里的 `config.errorHandler` 就是 `Vue` 全局API提供的用于自定义错误处理的配置我们前面讲过。由于这个错误处理函数也是开发者自定义的,所以可能出现运行时错误,这个时候就需要使用 `try catch` 语句块包裹起来,当错误发生时,使用 `logError` 函数打印错误,当然啦,如果有配置 `config.errorHandler` 也就是说 `config.errorHandler` 此时为假,那么将使用默认的错误处理函数,也就是 `logError` 进行错误处理。
 
 所以 `globalHandleError` 是用来检测你是否自定义了 `config.errorHandler` 的,如果有则用之,如果没有就是用 `logError`。
 
@@ -195,7 +195,7 @@ function logError (err, vm, info) {
     warn(`Error in ${info}: "${err.toString()}"`, vm)
   }
   /* istanbul ignore else */
-  if (inBrowser && typeof console !== 'undefined') {
+  if ((inBrowser || inWeex) && typeof console !== 'undefined') {
     console.error(err)
   } else {
     throw err
@@ -203,7 +203,7 @@ function logError (err, vm, info) {
 }
 ```
 
-可以看到,在非生产环境下,先使用 `warn` 函数报一个警告,然后判断是否在浏览器环境且 `console` 是否可用,如果可用则使用 `console.error` 打印错误,没有则直接 `throw err`。
+可以看到,在非生产环境下,先使用 `warn` 函数报一个警告,然后判断是否在浏览器或者Weex环境且 `console` 是否可用,如果可用则使用 `console.error` 打印错误,没有则直接 `throw err`。
 
 所以 `logError` 才真正打印错误的函数,且实现也比较简单。这其实已经达到了 `handleError` 的目的了,但是大家注意我们此时忽略了一段代码,就是 `handleError` 函数开头的一段代码:
 
@@ -226,7 +226,7 @@ if (vm) {
 }
 ```
 
-那么这个 `if` 判断是干嘛的呢?这其实是在支持新的 `Vue` 选项 `errorCaptured`。在编写该文章的时候 `Vue` 的文档还没有跟新,实际上你可以这样写代码:
+那么这个 `if` 判断是干嘛的呢?这其实是 `Vue` 选项 `errorCaptured` 的实现。实际上我们可以这样写代码:
 
 ```js
 var vm = new Vue({
@@ -308,20 +308,14 @@ while ((cur = cur.$parent))
 if (capture) return
 ```
 
-其中 `capture` 是钩子调用的返回值与 `false` 的全等比较的结果,也就是说,如果 `errorCaptured` 钩子函数返回假,那么 `capture` 为真直接 `return`,程序不会走 `if` 语句块后面的 `globalHandleError`,否则除了 `errorCaptured` 被调用外,`if` 语句块后面的 `globalHandleError` 也会被调用。
+其中 `capture` 是钩子调用的返回值与 `false` 的全等比较的结果,也就是说,如果 `errorCaptured` 钩子函数返回假,那么 `capture` 为真直接 `return`,程序不会走 `if` 语句块后面的 `globalHandleError`,否则除了 `errorCaptured` 被调用外,`if` 语句块后面的 `globalHandleError` 也会被调用。最总要的是:如果 `errorCaptured` 钩子函数返回假将阻止错误继续向“上级”传递。
 
 #### lang.js 文件代码说明
 
-##### emptyObject
-
-* 源码如下:
-
-```js
-export const emptyObject = Object.freeze({})
-```
-
 #### options.js 文件代码说明
 
+*该文件的讲解集中在 [4Vue选项的规范化](/note/4Vue选项的规范化) 以及 [5Vue选项的合并](/note/5Vue选项的合并) 这两个小节中*。
+
 #### perf.js 文件代码说明
 
 这个文件导出两个变量,分别是 `mark` 和 `measure`:

+ 12 - 0
note/附录/shared-util.md

@@ -180,6 +180,18 @@ return hit || (cache[str] = fn(str))
 
 可以看到,这就是一个函数式编程的玩法,也是比较简单的。
 
+##### emptyObject
+
+* 源码如下:
+
+```js
+export const emptyObject = Object.freeze({})
+```
+
+* 描述:创建一个空的冻结对象
+
+* 源码分析:通过以空 `json` 对象 `{}` 为参数调用 `Object.freeze` 函数实现。
+
 #### camelize
 
 * 源码如下: