vueソースから見るとProxyの用途は
6748 ワード
vueソースから見るとProxyの用途は
The Proxy oject is used to define custom behavior for fundendament operation s(e.g.property look up,assignment,enumeration,function invocation,etc)MDN Proxy
MDNは、オブジェクトのコンストラクタが、あるオブジェクトに対してユーザのカスタム挙動を定義するためのものであると述べている.これはいったいどういう意味ですか?私たちはVueのソースコードの中でProxyオブジェクトの場所に適用され、オブジェクトのコンストラクタの役割を理解するために直接分析します.
ProxyのVueでの応用
まず私達はVueソースの1430行を見にきます.
ソースの説明
Proxyに必要なパラメータ
二つは、var b=new Proxy(a、{has:fn xxx,get:fn xxx,set:fn xxx.})
タージが代理されるオブジェクト
handlerプロセッサオブジェクト
このオブジェクトに対する私たちの様々な操作を定義します.
完全なhandlerプロセッサ対象内容:
だからProxyの役割は?
ブロック、警報、新聞、拡張機能、統計、強化対象…得られるものはすべて点の端につけられます.ここでVueのコードは主に代理でブロックに運びます.また、規範は発展していますので、皆さんは慎重に使ってください.
資料
MDN js Proxy Object
MDN Proxy Handler
sec-proxy-object-interal-methods-and-inntinal-slaots
The Proxy oject is used to define custom behavior for fundendament operation s(e.g.property look up,assignment,enumeration,function invocation,etc)MDN Proxy
MDNは、オブジェクトのコンストラクタが、あるオブジェクトに対してユーザのカスタム挙動を定義するためのものであると述べている.これはいったいどういう意味ですか?私たちはVueのソースコードの中でProxyオブジェクトの場所に適用され、オブジェクトのコンストラクタの役割を理解するために直接分析します.
ProxyのVueでの応用
まず私達はVueソースの1430行を見にきます.
/* not type checking this file because flow doesn't play well with Proxy */
var initProxy;
{
var allowedGlobals = makeMap(
'Infinity,undefined,NaN,isFinite,isNaN,' +
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
'require' // for Webpack/Browserify
);
var warnNonPresent = function(target, key) {
warn(
"Property or method \"" + key + "\" is not defined on the instance but " +
"referenced during render. Make sure to declare reactive data " +
"properties in the data option.",
target
);
};
var hasProxy = typeof Proxy !== 'undefined' &&
Proxy.toString().match(/native code/);
if (hasProxy) {
var isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta');
config.keyCodes = new Proxy(config.keyCodes, {
set: function set(target, key, value) {
if (isBuiltInModifier(key)) {
warn(("Avoid overwriting built-in modifier in config.keyCodes: ." + key));
return false
} else {
target[key] = value;
return true
}
}
});
}
var hasHandler = {
has: function has(target, key) {
var has = key in target;
var isAllowed = allowedGlobals(key) || key.charAt(0) === '_';
if (!has && !isAllowed) {
warnNonPresent(target, key);
}
return has || !isAllowed
}
};
var getHandler = {
get: function get(target, key) {
if (typeof key === 'string' && !(key in target)) {
warnNonPresent(target, key);
}
return target[key]
}
};
initProxy = function initProxy(vm) {
if (hasProxy) {
// determine which proxy handler to use
var options = vm.$options;
var handlers = options.render && options.render._withStripped
? getHandler
: hasHandler;
vm._renderProxy = new Proxy(vm, handlers);
} else {
vm._renderProxy = vm;
}
};
}
まず、一つのことを理解したいです.vueはie 9以下のサポートを放棄しました.それでもProxyは、新たな特性としては、まだ支持度が高くないため、著者は試しに使ってみました.次に私達は一歩ずつ説明します.ソースの説明
var allowedGlobals = makeMap(
'Infinity,undefined,NaN,isFinite,isNaN,' +
'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
'require' // for Webpack/Browserify
);
ここでは、グローバルオブジェクトのタイプを指定します.var warnNonPresent = function(target, key) {
warn(
"Property or method \"" + key + "\" is not defined on the instance but " +
"referenced during render. Make sure to declare reactive data " +
"properties in the data option.",
target
);
};
ここではアラームの方法を定義しています.キーまたはメソッド名を入力し、ロゴは警告を表示します. var hasProxy = typeof Proxy !== 'undefined' &&
Proxy.toString().match(/native code/);
ここでは、ES 6特性Proxyの検出手段として、Proxyがオリジナルであることを確認し、ユーザーコードによってカバーされていない. var isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta');
config.keyCodes = new Proxy(config.keyCodes, {
set: function set(target, key, value) {
if (isBuiltInModifier(key)) {
warn(("Avoid overwriting built-in modifier in config.keyCodes: ." + key));
return false
} else {
target[key] = value;
return true
}
}
});
このセグメントコードはconfig.keyCodesオブジェクトを代理しています.Vue内に建てられたいくつかのキーの値をユーザーが変更することを禁止するという意味です.これらのボタンの値とボタン名は対応しています.Vueを使ったことがあるユーザーは、Vueがイベントの対象として、いくつかの常用キーと常用操作を内蔵していることを知っているはずです.そこで、私たちはconfig.keyCodes['stop']=xxxのような操作をすると、Vueは「あなたは正直ではないです.なぜ私のものを変えたいですか?」とあなたに教えてくれます.直接に内部配置を書き換えることを禁止する警告を出します.建物の内容がない場合は、直接設定できます. initProxy = function initProxy(vm) {
if (hasProxy) {
// determine which proxy handler to use
var options = vm.$options;
var handlers = options.render && options.render._withStripped
? getHandler
: hasHandler;
vm._renderProxy = new Proxy(vm, handlers);
} else {
vm._renderProxy = vm;
}
};
この言葉はもう説明しません.上のようです.でも、読者はhasとは何ですか?それでは、Proxyの各パラメータについて説明します.Proxyに必要なパラメータ
二つは、var b=new Proxy(a、{has:fn xxx,get:fn xxx,set:fn xxx.})
タージが代理されるオブジェクト
handlerプロセッサオブジェクト
このオブジェクトに対する私たちの様々な操作を定義します.
完全なhandlerプロセッサ対象内容:
{
get: ' ',
set: ' ',
deleteProperty: ' ',
enumerate: ' ',
ownKeys: ' ',
has: ' , "xxx" in target',
defineProperty: ' defineProperty, ',
getOwnPropertyDescriptor: ' ',
getPrototypeOf: ' ',
setPrototypeOf: ' ',
isExtensible: ' ',
preventExtensions: ' ',
apply: ' ',
construct: ' '
}
以上は全部関数です.だからProxyの役割は?
ブロック、警報、新聞、拡張機能、統計、強化対象…得られるものはすべて点の端につけられます.ここでVueのコードは主に代理でブロックに運びます.また、規範は発展していますので、皆さんは慎重に使ってください.
資料
MDN js Proxy Object
MDN Proxy Handler
sec-proxy-object-interal-methods-and-inntinal-slaots