看Vue原始碼前的準備工作

最近很慌, 想看原始碼, 先把簡單的相關概念理一理

object.defineproperty

首先, 概念 :

object.defineproperty() 方法會直接在乙個物件上定義乙個新屬性，或者修改乙個物件的現有屬性，並返回這個物件。

沒啥好說的, 直接上例子

// 定義乙個物件
const obj = 
// 資料描述符-----------------------------------------------
// 新增乙個屬性
object.defineproperty(obj, 'age', )
// 不可重新配置
object.defineproperty(obj, 'age', )   // 報錯
// 不可刪除
delete obj.age  // false
console.log(obj.age) // 18
// 不可列舉
object.keys(obj)   // ["firstname", "lastname"]
// 不可寫
obj.age = 17
console.log(obj.age) // 18
// 訪問描述符-----------------------------------------------
object.defineproperty(obj, 'fullname', ,
set(value) 
})obj.fullname  // d-z
obj.fullname = 'a-b' 
obj.lastname  // b
obj.firstname // a

configurable: false不可重新定義, 也就是說再執行object.defineproperty(obj, 'age', )將會報錯, 並且, 屬性不可刪除enumerable: false不可列舉, 也就是再執行object.keys()或for in等將取不到該屬性

value:18值

writable: false不可寫, 也就是對age賦值操作將不會生效, 但不會報錯

get取值操作 ,function, 預設undefined

set屬性值修改時，觸發執行該方法 ,function, 預設undefined

以上這一些屬性, 稱為描述符, 需要注意的是, 當使用了getter或setter方法，不允許使用writable和value這兩個屬性

get set 看起來就很像vue的計算屬性

偽陣列偽陣列 (arraylike) ，又稱類陣列。是乙個類似陣列的物件，但是有如下幾個特徵。

按索引方式儲存資料

0: ***, 1: ***, 2: ***...

具有length屬性

但是length屬性不是動態的，不會隨著成員的變化而改變

不具有陣列的push()， foreach()等方法

arraylike.__proto__ === object.prototype;
//true 
arraylike instanceof
object
;//true 
arraylike instanceof
array
;//false

以下是常見偽陣列：

轉換為真陣列方法

遍歷偽陣列存入真陣列

array.prototype.splice.call(arraylike)

array.from(arraylike)

[…arraylike]

原型繼承,arraylike.proto=array.prototype

其他工具庫中的方法，如jquery中的makearray() toarray()等

nodetype

元素,屬性,文字等, 都實現了 node 介面, 都會有nodetype屬性, 它標識了節點屬於的型別

常見的有:

1 -> 元素節點

3 -> 文字節點

8 -> 注釋節點

11 -> documentfragment 節點

class
="my"
>
123>
456span
>
>
789span
>
div>
上面的html片段, 分別用childnodes和children取值, 結果分別是什麼呢
document.

queryselector

('.my'

).childnodes // nodelist(5) [text, span, text, span, text]

document.

queryselector

('.my'

).children // htmlcollection(2) [span, span]從圖中可以看到, my div下, 包含了5個node, 其中123, 以及兩個小紅框位置的換行符, 屬於 textnode , span標籤屬於 elementnode

childnodes和children結果分別是節點list 和子元素 list

documentfragment

文件片段介面，表示乙個沒有父級檔案的最小文件物件.

通常的用例是建立文件片段，將元素附加到文件片段，然後將文件片段附加到dom樹。在dom樹中，文件片段被其所有的子元素所代替。

因為文件片段存在於記憶體中，並不在dom樹中，所以將子元素插入到文件片段時不會引起頁面回流（對元素位置和幾何上的計算）。因此，使用文件片段通常會帶來更好的效能。

let content = document.

createdocumentfragment()

let el = document.

queryselector

('.nums'

)content.

(el)

// 這個時候 .nums 元素會從頁面消失, 存入content這個fragment片段proxy

proxy用於修改某些操作的預設行為，也可以理解為在目標物件之前架設一層攔截，外部所有的訪問都必須先通過這層攔截，因此提供了一種機制，可以對外部的訪問進行過濾和修改。這個詞的原理為**，在這裡可以表示由它來「**」某些操作，譯為「**器」。

var obj =
newproxy(,
!`)return reflect.
get(target, key, receiver)},
set(target, key, value, receiver)!`)
return reflect.
set(target, key, value, receiver)}}
)

上面**對乙個空物件架設了一層攔截，重新定義了屬性的讀取(get)和設定(set)行為。對設定了攔截行為的物件obj，去讀寫它的屬性，用自己的定義覆蓋了語言的原始定義，執行得到下面的結果

obj.count = 1// setting count! ++obj.count // getting count! // setting count! // 2

看Vue原始碼前的準備工作

3 1 學習nginx原始碼前的準備工作

spring原始碼分析準備工作

迎新前準備工作

看Vue原始碼前的準備工作

3 1 學習nginx原始碼前的準備工作

spring原始碼分析 準備工作

迎新前準備工作

相關推薦

spring原始碼分析準備工作