vue源碼分析1 · CherryNote

### 自運行閉包 ```js (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.Vue = factory()); }(this,(function(){}))); ``` 閉包采用`UMD`的常規寫法，首先判斷是否支持`Node.js`模塊格式（`exports`或`module`是否存在），存在則使用`Node.js`模塊格式；再判斷是否支持`AMD`（`define`是否存在），存在則使用`AMD`方式加載模塊。前兩個都不存在，則將模塊公開到全局（`window`或`global`）。 ### 先從上往下捋 #### 聲明嚴格模式 ```js 'use strict'; ``` [嚴格模式的目的](http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html) : * 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為; * 消除代碼運行的一些不安全之處，保證代碼運行的安全； * 提高編譯器效率，增加運行速度； * 為未來新版本的Javascript做好鋪墊。 #### 一些自定義函數 ```js var emptyObject = Object.freeze({}); ``` 凍結一個空對象，目的估計是避免操作空對象從而污染對象，全程用來對象的比較判斷。 <div class="cline"></div> ```js function isUndef (v) { return v === undefined || v === null } function isDef (v) { return v !== undefined && v !== null } //是否是true function isTrue (v) { return v === true } //是否是false function isFalse (v) { return v === false } //查詢值是否是原始的數據類型，這里應該不包含對象類 function isPrimitive (value) { return ( typeof value === 'string' || typeof value === 'number' || // $flow-disable-line typeof value === 'symbol' || typeof value === 'boolean' ) } //判斷是否是對象類型了 function isObject (obj) { return obj !== null && typeof obj === 'object' } ``` >[info] these helpers produces better vm code in JS engines due to their explicitness and function inlining 一些功能性函數，因為這些函數的明確性和內聯關系，可以更好的在`js`引擎中生成虛擬機代碼。 <div class="cline"></div> ```js var _toString = Object.prototype.toString; //參考鏈接：https://www.cnblogs.com/libin-1/p/5902860.html function toRawType (value) { return _toString.call(value).slice(8, -1) } /** * Strict object type check. Only returns true * for plain JavaScript objects. */ function isPlainObject (obj) { return _toString.call(obj) === '[object Object]' } function isRegExp (v) { return _toString.call(v) === '[object RegExp]' } ``` >[info] Get the raw type string of a value e.g. [object Object] 這里解釋說明下，什么是`plain javascript objects`? 即：純粹的對象，通過`{}`或`new Object`創建的對象。 ##### 關于`toRawType`的幾點說明 1. 為什么使用`Object.prototype.toString.call()`? 目的是獲取對象原型的`toString`，防止重寫`toString`方法。 2. 原理是什么？ >[info] ECMAScript 3 >在ES3中,Object.prototype.toString方法的規范如下: >115.2.4.2 Object.prototype.toString() >在toString方法被調用時,會執行下面的操作步驟: >1. 獲取this對象的[[Class]]屬性的值. >2. 計算出三個字符串"[object ", 第一步的操作結果Result(1), 以及 "]"連接后的新字符串. >3. 返回第二步的操作結果Result(2). <div class="cline"></div> ```js /** * Check if val is a valid array index. */ function isValidArrayIndex (val) { var n = parseFloat(String(val)); return n >= 0 && Math.floor(n) === n && isFinite(val) } /** * Convert a value to a string that is actually rendered. */ function toString (val) { return val == null ? '' : typeof val === 'object' ? JSON.stringify(val, null, 2) : String(val) } /** * Convert a input value to a number for persistence. * If the conversion fails, return original string. */ function toNumber (val) { var n = parseFloat(val); return isNaN(n) ? val : n } ``` 一些轉換操作，代碼看上去很嚴謹和簡潔，學習了！冷知識，`JSON.stringify`的參數： >[info] 語法：JSON.stringify(value[, replacer [, space]]) * `value` 將要序列化成一個JSON 字符串的值。 * `replacer` 可選如果該參數是一個函數，則在序列化過程中，被序列化的值的每個屬性都會經過該函數的轉換和處理；如果該參數是一個數組，則只有包含在這個數組中的屬性名才會被序列化到最終的 JSON 字符串中；如果該參數為null或者未提供，則對象所有的屬性都會被序列化；關于該參數更詳細的解釋和示例，請參考使用原生的 JSON 對象一文。 * `space` **可選** 指定縮進用的空白字符串，用于美化輸出（pretty-print）；如果參數是個數字，它代表有多少的空格；上限為10。該值若小于1，則意味著沒有空格；如果該參數為字符串(字符串的前十個字母)，該字符串將被作為空格；如果該參數沒有提供（或者為null）將沒有空格。 <div class="cline"></div> ```js /** * Make a map and return a function for checking if a key * is in that map. */ function makeMap ( str, expectsLowerCase ) { var map = Object.create(null); var list = str.split(','); for (var i = 0; i < list.length; i++) { map[list[i]] = true; } return expectsLowerCase ? function (val) { return map[val.toLowerCase()]; } : function (val) { return map[val]; } } /** * Check if a tag is a built-in tag. */ var isBuiltInTag = makeMap('slot,component', true); /** * Check if a attribute is a reserved attribute. */ var isReservedAttribute = makeMap('key,ref,slot,slot-scope,is'); ``` 這段是將字符串轉為`map`集合，并返回函數，檢查`key`值是否存在，具體這塊代碼的作用稍后分析。 <p class="over"></p>