摘要:創(chuàng)建一個自調用匿名函數(shù),設計參數(shù),并傳入對象。表示獨一無二的值聲明時不能使用,而是聲明時可以加參數(shù),用于描述作為時不能被遍歷這個函數(shù)主要是檢測當前對象是否有某種屬性。給變量賦值一個空的對象返回一個的函數(shù),將函數(shù)的參數(shù)的帶入并賦值,返回。
VUE 2.6.8
(function (global, factory) { typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? define(factory) : (global = global || self, global.Vue = factory()); }(this, function () { "use strict";
創(chuàng)建一個自調用匿名函數(shù),設計參數(shù)window,并傳入window對象。不污染全局變量,也不會別的代碼污染
emptyObjectvar emptyObject = Object.freeze({});
字面上意義:空對象=凍結掉這個對象
Object.freeze({})這個方法核心在于對于這個對象將無法修改,添加。isUndef
function isUndef (v) {return v === undefined || v === null}
是否未被定義,如果參數(shù)等于undefined或者為空,返回trueisDef
function isDef (v) {return v !== undefined && v !== null}
是否定義,如果參數(shù)不等于undefined或者為空,返回trueisTrue
function isTrue (v) {return v === true}
是否真,參數(shù)為真是返回trueisFalse
function isFalse (v) {return v === false}
是否假,參數(shù)為真是返回true
function isPrimitive (value) { return ( typeof value === "string" || typeof value === "number" || // $flow-disable-line typeof value === "symbol" || typeof value === "boolean" ) }
是否為原始類型,typeof 返回isObject
function isObject (obj) {return obj !== null && typeof obj === "object"}
是否為對象,如果對象不等于空且typeof返回為object,返回true_toString
var _toString = Object.prototype.toString;
該方法返回描述某個對象數(shù)據(jù)類型的字符串,如自定義的對象沒有被覆蓋,則會返回“[object type]”,其中,type則是實際的對象類型。在使用該方法檢測的時候,可以使用Object.prototype.toString.call()或者Object.prototype.toString.apply()進行測試,如toRawType
function toRawType (value) {return _toString.call(value).slice(8, -1)}
slice(startIndex,endIndex),從0開始索引,其中8代表從第8位(包含)開始截取(本例中代表空格后面的位置),-1代表截取到倒數(shù)第一位(不含),所以正好截取到[object String]中的String。isPlainObject
function isPlainObject (obj) {return _toString.call(obj) === "[object Object]"}
isPlainObject 靜態(tài)函數(shù) 判斷指定參數(shù)是否是一個純粹的對象isRegExp
function isRegExp (v) {return _toString.call(v) === "[object RegExp]"}
判斷指定參數(shù)是否是一個正則isValidArrayIndex
function isValidArrayIndex (val) { var n = parseFloat(String(val)); return n >= 0 && Math.floor(n) === n && isFinite(val) }
是否為一個有效的數(shù)組,現(xiàn)將值轉為字符串,然后用parseFloat解析,字符串中的首個字符是否是數(shù)字。如果是,則對字符串進行解析,直到到達數(shù)字的末端為止,然后以數(shù)字返回該數(shù)字,而不是作為字符串。isPromise
如果n>=0以及向下取整等于n以及isFinite是一個有限數(shù)。如1/0
function isPromise (val) { return ( isDef(val) && typeof val.then === "function" && typeof val.catch === "function" ) }
首先檢測這個值是否被定義,然后判斷它的then和catch是否為一個函數(shù)toString
function toString (val) { return val == null ? "" : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString) ? JSON.stringify(val, null, 2) : String(val) }
首先判斷val是否為空,如果為空輸出""否則
Array.isArray() 先確定是否值為一個Array
或者前面的isPlainObject方法判定是否為一個對象
和值轉成字符串是否等于Object.prototype.toString返回該對象的字符串;
如果條件滿足JSON.stringify(val, null, 2)stringify是有3個參數(shù),
第一個,參數(shù)是傳入的值可以是String|Object|String|Number|Boolean|null
第二個,則是過濾器,過濾器可以是數(shù)組,也可以是函數(shù)
第三個,可以是空的格子(4)也可以是特殊符號/t
否則將val轉成字符串toNumber
function toNumber (val) { var n = parseFloat(val); return isNaN(n) ? val : n }
先使用parseFloat函數(shù)轉換值,然后isNaN檢查是否為一個數(shù)值,如果是輸出val,否則輸出parseFloat(val)基本也就輸出NaN了makeMap
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]; } } var isBuiltInTag = makeMap("slot,component", true); var isReservedAttribute = makeMap("key,ref,slot,slot-scope,is");
remove官方解釋:制作一個映射并返回一個函數(shù),用于檢查鍵是否在該映射中。
創(chuàng)建一個空的對象復制給map
將值根據(jù)‘,’分割成字符串數(shù)組
遍歷循環(huán)檢測這個數(shù)組
如果expectsLowerCase有值且為true,將map中的數(shù)組轉換為小寫,否則直接輸出map中的值實際上主要就是檢查map中是否存在某個key
檢查標記是否為內置標記
檢查屬性是否為保留屬性
function remove (arr, item) { if (arr.length) { var index = arr.indexOf(item); if (index > -1) { return arr.splice(index, 1) } } }
hasOwnProperty從數(shù)組中移除
indexOf獲取數(shù)組中參數(shù)的位置
如果index > -1 存在,刪除當前
.splice(index,howmany,item1,.....,itemX)補充,index為位置,howmany為刪除數(shù)量如果為0不刪除,這2個參數(shù)為必填。第三個則是向數(shù)組中添加
var hasOwnProperty = Object.prototype.hasOwnProperty; function hasOwn (obj, key) { return hasOwnProperty.call(obj, key) }
這個是很有意思的案例
首先hasOwnProperty();這個方法,它的參數(shù)很有意思,字符串或者Symbol。然后返回true或false
Symbol是es6一種新的類型,所以有的時候問js有多少類型啊,記得多了一個。
表示獨一無二的值;
聲明時不能使用new Symbol(),而是 Symbol();
聲明時可以加參數(shù),用于描述;
作為key時不能被遍歷;
cachedhasOwn這個函數(shù)主要是檢測當前對象是否有某種屬性。
這個地方還可以做一些衍生
如果你想要實現(xiàn)支持setter和getter特性的拷貝,該怎么實現(xiàn)?Object.defineproperties (定義屬性)
Object.getOwnPropertyDescriptors(es2017,獲取對象的多個屬性)
Object.getOwnPropertyDescriptor(老一點,獲取對象的單個屬性的屬性),但babel可以解決。
function cached (fn) { var cache = Object.create(null); return (function cachedFn (str) { var hit = cache[str]; return hit || (cache[str] = fn(str)) }) }
給變量cache賦值一個空的對象駝峰化
返回一個cacheFn的函數(shù),將函數(shù)的參數(shù)的key帶入cache并賦值,返回hit。
如果cache中存在str那么返回hit,反之將其賦值到cache中返回
var camelizeRE = /-(w)/g; var camelize = cached(function (str) { return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ""; }) }); var hyphenateRE = /B([A-Z])/g; var hyphenate = cached(function (str) { return str.replace(hyphenateRE, "-$1").toLowerCase() });
polyfillBind注釋寫著將字符串駝峰化
匹配一個-組成單詞的字符
調用前面cached函數(shù),并將字符串replace(egexp/substr,replacement)中做一個判斷里面的函數(shù) c這個參數(shù)理解不清楚。
補充_是占位符,c是組1思考:.substring(0,1).toUpperCase()不知道是否可以這樣寫。或者直接用字符串型數(shù)組?.toUpperCase()
function polyfillBind (fn, ctx) { function boundFn (a) { var l = arguments.length; return l ? l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a) : fn.call(ctx) } boundFn._length = fn.length; return boundFn }
獲取boundFn中的arguments的長度
if(l){ if(l>1){ fn.apply(ctx, arguments) }else{ fn.call(ctx, a) } }else{ fn.call(ctx) }
如果參數(shù)不存在,直接綁定作用域調用該函數(shù)fn.call(ctx)
如果存在且只有一個,那么調用fn.call(ctx, a), a是入?yún)?br>如果存在且不止一個,那么調用fn.apply(ctx, arguments)call與apply的區(qū)別,call接受參數(shù)是一個一個接收,apply是作為數(shù)組來接收。如:
fn.call(this, 1,2,3) fn.apply(this, [1,2,3])
對于不支持它的環(huán)境,使用簡單的綁定polyfill,nativeBind
例如,Phantomjs 1.x。從技術上講,我們不再需要這個了。
因為在大多數(shù)瀏覽器中,本機綁定的性能已經(jīng)足夠了。
但是刪除它意味著破壞能夠運行的代碼
PhantomJS 1.x,所以為了向后兼容,必須保留它。
function nativeBind (fn, ctx) { return fn.bind(ctx) } var bind = Function.prototype.bind ? nativeBind : polyfillBind;
原生的bind。以及判定這個bind是原生的還是polyfilltoArray
function toArray (list, start) { start = start || 0; var i = list.length - start; var ret = new Array(i); while (i--) { ret[i] = list[i + start]; } return ret }
數(shù)據(jù)轉換。感覺就是遍歷循環(huán)一個個存儲到一個新的ret上。extend
function extend (to, _from) { for (var key in _from) { to[key] = _from[key]; } return to }
檢查有多少個屬性,然后賦值返回到to上toObject
function toObject (arr) { var res = {}; for (var i = 0; i < arr.length; i++) { if (arr[i]) { extend(res, arr[i]); } } return res }
定義了一個res對象noop
遍歷傳遞的arr數(shù)組。然后通過上面那個extend函數(shù)傳遞到res
function noop (a, b, c) {}
一個空函數(shù)?。。。不知道干啥。往下再看看no
var no = function (a, b, c) { return false; };
一個no??綁定了一個函數(shù)返回false?再看看identity
var identity = function (_) { return _; };
一個傳什么返回自己的東西?genStaticKeys
function genStaticKeys (modules) { return modules.reduce(function (keys, m) { return keys.concat(m.staticKeys || []) }, []).join(",") }
從編譯器模塊生成包含靜態(tài)鍵的字符串looseEqual(未完待續(xù))
function looseEqual (a, b) { if (a === b) { return true } //如果:參數(shù)a和參數(shù)b恒等于返回true; //isObject這個函數(shù)已經(jīng)看到過了,不為空且恒等于object var isObjectA = isObject(a); var isObjectB = isObject(b); if (isObjectA && isObjectB) { //判定a和b是否滿足 try { var isArrayA = Array.isArray(a); var isArrayB = Array.isArray(b); //a和b是否為一個數(shù)組 if (isArrayA && isArrayB) { //如果如果滿足,檢測a是否滿足條件 //補充every()函數(shù) e是當前元素值,索引 //array.every(function(currentValue,index,arr), thisValue) return a.length === b.length && a.every(function (e, i) { return looseEqual(e, b[i]) }) } else if (a instanceof Date && b instanceof Date) { return a.getTime() === b.getTime() } else if (!isArrayA && !isArrayB) { var keysA = Object.keys(a); var keysB = Object.keys(b); return keysA.length === keysB.length && keysA.every(function (key) { return looseEqual(a[key], b[key]) }) } else { /* istanbul ignore next */ return false } } catch (e) { /* istanbul ignore next */ return false } } else if (!isObjectA && !isObjectB) { return String(a) === String(b) } else { return false } }
這一段有點長,我看下注釋打在代碼里.作用判斷兩個值是否相等。結構是否相同looseIndexOf
function looseIndexOf (arr, val) { for (var i = 0; i < arr.length; i++) { if (looseEqual(arr[i], val)) { return i } } return -1 }
返回索引,如果沒找到-1,否則用上面的looseEqual()函數(shù)once
function once (fn) { var called = false; return function () { if (!called) { called = true; fn.apply(this, arguments); } } }
一個閉包函數(shù),只有在called = false時執(zhí)行,如果調用過后,返回true。只能用一次。
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102451.html
摘要:源碼目錄結構打包相關的配置文件,其中最重要的是。主要是根據(jù)不同的入口,打包為不同的文件。這個目錄下的代碼邏輯會把文件內容解析成一個的對象。 源碼目錄結構 VUE 2.6.10 ├── scripts # 打包相關的配置文件,其中最重要的是config.js。主要是根據(jù)不同的入口,打 包為不同的文件。 ├── dist # 打包之后文...
摘要:運行時用來創(chuàng)建實例渲染并處理虛擬等的代碼?;旧暇褪浅ゾ幾g器的其它一切。版本可以通過標簽直接用在瀏覽器中。為這些打包工具提供的默認文件是只有運行時的構建。為瀏覽器提供的用于在現(xiàn)代瀏覽器中通過直接導入。 Vue版本:2.6.9 源碼結構圖 ├─ .circleci // 包含CircleCI持續(xù)集成/持續(xù)部署工具的配置文件 ├─ .github ...
摘要:運行時用來創(chuàng)建實例渲染并處理虛擬等的代碼。基本上就是除去編譯器的其它一切。版本可以通過標簽直接用在瀏覽器中。為這些打包工具提供的默認文件是只有運行時的構建。為瀏覽器提供的用于在現(xiàn)代瀏覽器中通過直接導入。 Vue版本:2.6.9 源碼結構圖 ├─ .circleci // 包含CircleCI持續(xù)集成/持續(xù)部署工具的配置文件 ├─ .github ...
摘要:運行時用來創(chuàng)建實例渲染并處理虛擬等的代碼。基本上就是除去編譯器的其它一切。版本可以通過標簽直接用在瀏覽器中。為這些打包工具提供的默認文件是只有運行時的構建。為瀏覽器提供的用于在現(xiàn)代瀏覽器中通過直接導入。 Vue版本:2.6.9 源碼結構圖 ├─ .circleci // 包含CircleCI持續(xù)集成/持續(xù)部署工具的配置文件 ├─ .github ...
閱讀 642·2021-11-25 09:43
閱讀 1655·2021-11-18 10:02
閱讀 1033·2021-10-15 09:39
閱讀 1877·2021-10-12 10:18
閱讀 2115·2021-09-22 15:43
閱讀 756·2021-09-22 15:10
閱讀 2084·2019-08-30 15:53
閱讀 978·2019-08-30 13:00