レディ知識
1、[]。Slice.call（）/ Array.prototype.slice.call（）は、ダミーアレイ真のアレイに変換します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="fragment_test">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<script>
const lis = document.getElementsByTagName('li')
console.log(lis instanceof Array, lis[1].innerHTML, lis.forEach) //false 'test2' undefined
const lis2 = Array.prototype.slice.call(lis)
console.log(lis2 instanceof Array, lis2[1].innerHTML, lis2.forEach) //true 'test2' function
</script>
</body>
</html>与えるために2、node.nodeTypeノードタイプ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test">哈哈哈</div>
<script>
const elementNode = document.getElementById('test')
const attrNode = elementNode.getAttributeNode('id')
const textNode = elementNode.firstChild
console.log(elementNode.nodeType, attrNode.nodeType, textNode.nodeType) //1 2 3
</script>
</body>
</html>3、Object.defineProperty（OBJ、プロパティ名、{}）を追加属性（指定記述）対象へのES5構文はIE8をサポートしていません
属性記述子：
- データ記述子
設定可能：再定義することができ
可算：かどうかを列挙
値：初期値の
書き込み可能：属性値を変更できるかどうか
- アクセス記述子
取得：他の関連するプロパティの現在のプロパティ値に応じて動的に計算されたコールバック関数
を設定：コールバック関数、現在の属性値の変化を監視し、属性値が他の関連する更新を
const obj = {
firstName: 'A',
lastName: 'B'
}
Object.defineProperty(obj, 'fullName', {
configurable: false,
enumerable: true,
get () {
return this.firstName + ' ' + this.lastName
},
set (value) {
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
})4、配列自体を与えるObject.keys（OBJ）は、の属性を列挙することができます
const names = Object.keys(obj)
console.log(names)5、obj.hasOwnProperty（プロペラ）は独自の属性か否かを判断プロプ
console.log(obj.hasOwnProperty('fullname'), obj.hasOwnProperty('toString'))図6に示すように、ドキュメント・ドキュメントフラグメント（効率的な更新複数のノード）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test">哈哈哈</div>
<ul id="fragment_test">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<script>
const ul = document.getElementById('fragment_test')
const fragment = document.createDocumentFragment()
let child
while(child=ul.firstChild){ // 一个节点只能有一个父亲
fragment.appendChild(child)
}
Array.prototype.slice.call(fragment.childNodes).forEach(node => {
if (node === 1) { // 元素节点<li>
node.textContent = 'xixixi'
}
})
ul.appendChild(fragment)
</script>
</body>
</html>データエージェント
- データエージェント：別のプロキシオブジェクト属性を操作して、オブジェクト（読み取り/書き込み）
- VUEデータ剤：対象VMの操作によってオブジェクトのすべてのプロパティにプロキシデータ
- 利点：データDATAのより便利な操作
- 基本的な実装方法：
- VM属性記述子にObject.defineProperty（）によってオブジェクトに追加の属性データに対応
- すべてのプロパティは、ゲッター/セッターを含ん追加
- 対応するデータの属性データの内部で動作するようにゲッター/セッター
function MVVM (options) {
this.$options = options
var data = this._data = this.$options.data
var me = this
// 实现vm.xxx -> vm._data.xxx
Object.keys(data).forEach(function(key){
me.proxy(key)
})
}
MVVM.prototype = {
_proxy: function(key) {
var me = this
Object.defineProperty(me, key, {
configurable: false,
enumerable: true,
// 当通过vm.xxx读取属性值时可调用，从data中获取对应的属性值返回，代理读操作
get: function proxyGetter () {
return me._data[key]
},
// 当通过vm.xxx = value时，value被保存到data中对应的属性上，代理写操作
set: function proxySetter (value) {
me._data[key] = value
}
})
}
}