ES6学习笔记（十）代理器Proxy

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Java可以使用面向切面（AOP）的方法来实现某些统一的操作，比如某个操作的前置通知，后置通知等等，这种操作非常方便，其本质便是动态代理，JS的代理Proxy代理该如何使用呢？

某位大神的实现如下：

 var objectProxy={

         create:function(target,methodHandler){

             if(!(target instanceof Object)){

                 throw new Error("target argument is not object type!");

             }

             var isFunction = function(o){

                 return (o instanceof Function);

             }

             if(!(methodHandler instanceof Object)){

                 throw new Error("methodHandler is not a valid object!");

             }

             //前置 后置 错误 返回 四个处理器

             if(!methodHandler.before && !methodHandler.after && !methodHandler.error && !methodHandler.returing){

                 return target;

             }

             var proxy = {};

             for(var i in target){//获取对象属性方法

                 var targetPrototype = target[i];

                 if(isFunction(targetPrototype)){

                     var process = true;

                     if(methodHandler.filter)

                         process = methodHandler.filter(i);

                     if(process){

                         proxy[i] = function(){

                             var args = {name:i,args:arguments};

                             if(methodHandler.before)methodHandler.before.call(target,args);//执行前置处理

                             var result = null;

                             try{

                                 result = targetPrototype(arguments);

                                 args["result"] = result;//设置返回值

                                 if(methodHandler.after)methodHandler.after.call(target,args);//执行后置处理

                             }catch(e){

                                 args["error"] = e;//设置异常信息

                                 if(methodHandler.error)methodHandler.error.call(target,args);//执行异常处理

                             }

                             if(methodHandler.returing)

                                 result = methodHandler.returing.call(target,args);//执行返回处理

                             return result;

                         }

                     }

                 }

             }

             return proxy;

         }

 };

 window.onload=function(){

     var proxy = {prop:"prop name!",func:function(){

         alert("process ...!");

         return "test proxy!";

     }};

     var methodHandler = {

             filter:function(name){//过滤方法 (true|false) false 表示不处理

                return true;

             },

             before:function(args){//前置

                 alert("before methodHandler name : "+args.name);

             },

             after:function(args){//后置

                 alert("after methodHandler name : "+args.name+",return : "+args.result);

             },

             error:function(args){//错误

                 alert("error methodHandler name : "+args.name+",error : "+args.error);

             },

             returing:function(args){//返回

                 alert("returing methodHandler name : "+args.name+",error : "+(args.error?args.error:null)+",return : "+args.result);

                 return "changed : "+args.result;

             }

         };

     proxy = objectProxy.create(proxy,methodHandler);

     proxy.func();

 }

然后开始学习Proxy

1.概述

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

 var obj = new Proxy({}, {

     get: function (target, key, receiver) {

         console.log(`getting ${key}!`);

         return Reflect.get(target, key, receiver);

     },

     set: function (target, key, value, receiver) {

         console.log(`setting ${key}!`);

         return Reflect.set(target, key, value, receiver);

     }

 });

 obj.count = 1;//setting count!

 ++ obj.count;//getting count!, setting count!

上面代码定义了一个空对象{ }的代理对象obj，在代理对象上重定义了属性的读取（ get ）和设置（ set ）行为。这里暂时先不解释具体的语法，只看运行结果。对设置了拦截行为的对象 obj ，去读写它的属性，就会触发定义的拦截操作。

上面代码说明，Proxy 实际上重载（overload）了点运算符(...)，即用自己的定义覆盖了语言的原始定义。

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法，都是上面这种形式，不同的只是 handler 参数的写法。

其中， new Proxy() 表示生成一个 Proxy 实例， target 参数表示所要拦截的目标对象， handler 参数也是一个对象，用来定制拦截行为。

下面是另一个拦截读取属性行为的例子。

var proxy = new Proxy({}, {

    get: function (target, property) { return 35; }

});

console.log(proxy.name); //

console.log(proxy.age); //

console.log(proxy.salary); //

上面代码中，作为构造函数， Proxy 接受两个参数。第一个参数是所要代理的目标对象（上例是一个空对象），即如果没有 Proxy 的介入，操作原来要访问的就是这个对象；

第二个参数是一个配置对象(不是回调函数)，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。

上面代码中，配置对象有一个 get 方法，用来拦截对目标对象属性的访问请求。 get 方法的两个参数分别是目标对象和所要访问的属性。可以看到，由于拦截函数总是返回 35 ，所以访问任何属性都得到 35 。

注意，要使得 Proxy 起作用，必须针对 Proxy 实例（上例是 proxy 对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。

如果 handler 没有设置任何拦截，那就等同于直接通向原对象。

var target = {};

var handler = {};

var proxy = new Proxy(target, handler);

target.a = 'b',

console.log(target.a);//b

上面代码中， handler 是一个空对象，没有任何拦截效果，访问 proxy 就等同于访问 target 。

一个技巧是将 Proxy 对象，设置到 object.proxy 属性，从而可以在 object 对象上调用。

var object = { proxy: new Proxy(target, handler) };

Proxy 实例也可以作为其他对象的原型对象。

var proxy = new Proxy({}, {

  get: function(target, property) {

    return 35;

  }

});

let obj = Object.create(proxy);

obj.time //

上面代码中， proxy 对象是 obj 对象的原型， obj 对象本身并没有 time 属性，所以根据原型链，会在 proxy 对象上读取该属性，导致被拦截。

同一个拦截器函数，可以设置拦截多个操作。

 var handler = {

     get: function (target, name) {

         if (name === 'prototype') {

             return Object.prototype;

         }

         return 'Hello, ' + name;

     },

     apply: function (target, thisBinding, args) {

         return args[0];

     },

     construct: function (target, args) {

         return {value: args[1]};

     }

 };

 //target是个代理对象，而函数也是对象，所以此处可以传入一个函数作为目标对象

 var fproxy = new Proxy(function (x, y) {

     return x + y;

 }, handler);

 console.log(fproxy(1, 2));//1，函数调用时执行apply方法，被拦截，只传入了第一个参数

 console.log(new fproxy(1, 2));//{ value: 2 }，new对象时执行construct构造方法，被拦截，只使用了第二个参数

 console.log(fproxy.prototype === Object.prototype);//获取prototype属性，被拦截，返回Object.prototype，所以相等

 console.log(fproxy.foo === 'Hello, foo');//获取foo属性，返回固定的'Hello, ' + 属性名

对于可以设置、但没有设置拦截的操作，则直接落在目标对象上，按照原先的方式产生结果。

下面是 Proxy 支持的拦截操作一览，一共 13 种。

get(target, propKey, receiver) ：拦截对象属性的读取，比如 proxy.foo 和 proxy['foo'] 。
set(target, propKey, value, receiver) ：拦截对象属性的设置，比如 proxy.foo = v 或 proxy['foo'] = v ，返回一个布尔值。
has(target, propKey) ：拦截 propKey in proxy 的操作，返回一个布尔值。
deleteProperty(target, propKey) ：拦截 delete proxy[propKey] 的操作，返回一个布尔值。
ownKeys(target) ：拦截 Object.getOwnPropertyNames(proxy) 、 Object.getOwnPropertySymbols(proxy) 、 Object.keys(proxy) 、 for...in 循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而 Object.keys() 的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey) ：拦截 Object.getOwnPropertyDescriptor(proxy, propKey) ，返回属性的描述对象。
defineProperty(target, propKey, propDesc) ：拦截 Object.defineProperty(proxy, propKey, propDesc） 、 Object.defineProperties(proxy, propDescs) ，返回一个布尔值。
preventExtensions(target) ：拦截 Object.preventExtensions(proxy) ，返回一个布尔值。
getPrototypeOf(target) ：拦截 Object.getPrototypeOf(proxy) ，返回一个对象。
isExtensible(target) ：拦截 Object.isExtensible(proxy) ，返回一个布尔值。
setPrototypeOf(target, proto) ：拦截 Object.setPrototypeOf(proxy, proto) ，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
apply(target, object, args) ：拦截 Proxy 实例作为函数调用的操作，比如 proxy(...args) 、 proxy.call(object, ...args) 、 proxy.apply(...) 。
construct(target, args) ：拦截 Proxy 实例作为构造函数调用的操作，比如 new proxy(...args) 。

2.Proxy 实例的方法

下面是上面这些拦截方法的详细介绍。

get()

get() 方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

 var person = {

     name:'aaa',

 }

 var porxy = new Proxy(person, {

     get: function (target, property) {

         if (property in target) {

             return target[property];

         } else {

             throw new ReferenceError(`${property} not exsist as person`);

         }

     }

 });

 console.log(porxy.name);//aaa

 console.log(porxy.age);//ReferenceError: age not exsist as person

上面代码表示，如果访问目标对象不存在的属性，会抛出一个错误。如果没有这个拦截函数，访问不存在的属性，只会返回 undefined 。

get 方法可以继承，也就是说可以放在原型上。

var proxy = new Proxy({}, {

    get: function (target, property, receiver) {

        console.log('GET: ' + property);

        return target[property];

    }

});

var obj = Object.create(proxy);

obj.foo;//GET: foo

上面代码中，get的拦截操作定义在原型对象上，所以调用实例继承了proxy的obj实例时，拦截生效。

下面的例子使用 get 拦截，实现数组读取负数的索引。

 function CreateArray(...elements) {

     let handler = {

         get(target, propKey, receiver){

             let index = Number(propKey);

             if (index < 0) {

                 propKey = String(target.length + index);//把传入的复数转为对应的正数下标

             }

             return Reflect.get(target, propKey, receiver);//返回当前get函数

         }

     };

     let target = [];

     target.push(...elements);//数组对象数据填充

     return new Proxy(target, handler);//返回一个数组代理对象

 }

 let arr = new CreateArray(1,2,3,4,5);

 console.log(arr[-2]);//

上面是一个自定义的数组构造函数，获取值时，数组的位置参数是 -2 ，就会输出数组的倒数第二个成员。

下面是一个 get 方法的第三个参数的例子，它总是指向原始的读操作所在的那个对象，一般情况下就是 Proxy 实例。

const proxy = new Proxy({}, {

  get: function(target, property, receiver) {

    return receiver;

  }

});

proxy.getReceiver === proxy // true

上面代码中， proxy 对象的 getReceiver 属性是由 proxy 对象提供的，所以 receiver 指向 proxy 对象。

const proxy = new Proxy({}, {

  get: function(target, property, receiver) {

    return receiver;

  }

});

const d = Object.create(proxy);

d.a === d // true

上面代码中， d 对象本身没有 a 属性，所以读取 d.a 的时候，会去 d 的原型 proxy 对象找。这时， receiver 就指向 d ，代表原始的读操作所在的那个对象。

如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象访问该属性会报错。

set()

set 方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。

 //定义一个set处理函数

 let validator = {

     set(target, prop, value){

         if (prop === 'age') {

             if (!Number.isInteger(value)) {

                 throw new TypeError('The age is not an integer');

             }

             if (value > 200) {

                 throw new RangeError('The age seems invalid');

             }

         }

         target[prop] = value;//对于满足条件的age及其他属性，直接赋值

     }

 }

 let person = new Proxy({}, validator);

 person.name = 'aaa';

 person.age = 'cbd';

 person.age = '201';

上面代码中，由于设置了存值函数 set ，任何不符合要求的 age 属性赋值，都会抛出一个错误，这是数据验证的一种实现方法。利用 set 方法，还可以数据绑定，即每当对象发生变化时，会自动更新 DOM。

有时，我们会在对象上面设置内部属性，属性名的第一个字符使用下划线开头，表示这些属性不应该被外部使用。结合 get 和 set 方法，就可以做到防止这些内部属性被外部读写。

 //get/set处理操作

 const handler = {

     get(target, key){

         invariant(key, 'get');

         return target[key];

     },

     set(target, key,  value){

         invariant(key, 'set');

         target[key] = value;

         return true;

     }

 };

 //属性名-get/set校验方法

 function invariant(key, action) {

     if (key[0] === '_') {

         throw new Error(`Invalid attemp to ${action} private "${key}" property`);

     }

 }

 const target = {};

 const proxy =  new Proxy(target, handler);

 // proxy._proto;//Error: Invalid attemp to get private "_proto" property

 proxy._proto = 5;//Error: Invalid attemp to set private "_proto" property

上面代码中，只要读写的属性名的第一个字符是下划线，一律抛错，从而达到禁止读写内部属性的目的。

为了达到一个类似Java的private效果，不，这已经是finally效果了，可谓煞费苦心，这便是JS在封装上的短板吧。

到目前为止发现，target对象可以是某个对象，对象原型或者方法，而handler对象常用的几个代理方法却是不变的，所以代理的核心思想应该是需要改变的，做的处理过程---handler，并且这个处理对象是可以被重用的。

set 方法的第四个参数 receiver ，指的是原始的操作行为所在的那个对象，一般情况下是 proxy 实例本身；

 const handler = {

   set: function(obj, prop, value, receiver) {

     obj[prop] = receiver;

   }

 };

 const proxy = new Proxy({}, handler);

 const myObj = {};

 Object.setPrototypeOf(myObj, proxy);

 myObj.foo = 'bar';

 myObj.foo === myObj // true

上面代码中，设置 myObj.foo 属性的值时， myObj 并没有 foo 属性，因此引擎会到 myObj 的原型链去找 foo 属性。 myObj 的原型对象 proxy 是一个 Proxy 实例，设置它的 foo 属性会触发 set 方法。这时，第四个参数 receiver 就指向原始赋值行为所在的对象 myObj 。

注意，如果目标对象自身的某个属性，不可写且不可配置，那么 set 方法将不起作用。

注意，严格模式下， set 代理如果没有返回 true ，就会报错。

 'use strict';

 const handler = {

   set: function(obj, prop, value, receiver) {

     obj[prop] = receiver;

     // 无论有没有下面这一行，都会报错

     return false;

   }

 };

 const proxy = new Proxy({}, handler);

 proxy.foo = 'bar';

 // TypeError: 'set' on proxy: trap returned falsish for property 'foo'

上面代码中，严格模式下， set 代理返回 false 或者 undefined ，都会报错。

apply()

apply 方法拦截函数的调用、 call 和 apply 操作。按照动态代理来说，这个拦截操作才是重点。

apply 方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（ this ）和目标对象的参数数组。

const handler = {

    apply(target, ctx, args){

        return Reflect.apply(...arguments); //Reflect:反射，下一节学到，相当于另一个Object

    }

};

无参数的简单例子

 //目标对象是一个函数的时候，apply调用拦截才有用武之地

 const target = function () {

     return 'I am the target';

 }

 const handler = {

     apply(){

         return 'I am the proxy'

     }

 }

 //对象的代理是个对象，函数的代理是个函数

 var proxy = new Proxy(target, handler);

 console.log(proxy());//I am the proxy

再一个例子

 const twice = {

     apply(target, ctx, args){

         return Reflect.apply(...arguments) * 2;

     }

 };

 function sum(left, right) {

     return left + right;

 }

 var proxy = new Proxy(sum, twice);

 console.log(proxy(1,2));//

 console.log(proxy.call(null,3,4));//

 console.log(proxy.apply(null,[5,6]));//

 //call和apply的第一个参数都是需要调用的函数对象，在函数体内这个参数就是this的值，剩余的参数是需要传递给函数的值，

 //call与apply的不同就是call传的值可以是任意的，而apply传的剩余值必须为数组

发现apply的三个参数：目标对象，目标对象的上下文this，参数args没有被使用，他们应该在需要使用的地方才用。

上面代码中，每当执行 proxy 函数（直接调用或 call 和 apply 调用），就会被 apply 方法拦截。

另外，直接调用 Reflect.apply 方法，也会被拦截。

has()

has 方法用来拦截 HasProperty 操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是 in 运算符。这个拦截应该不常用。

has 方法可以接受两个参数，分别是目标对象、需查询的属性名。

 var handler = {

   has (target, key) {

     if (key[0] === '_') {

       return false;

     }

     return key in target;

   }

 };

 var target = { _prop: 'foo', prop: 'foo' };

 var proxy = new Proxy(target, handler);

 '_prop' in proxy // false

上面代码中，如果原对象的属性名的第一个字符是下划线， proxy.has 就会返回 false ，从而不会被 in 运算符发现。

注意：如果原对象不可配置或者禁止扩展，使用 has 拦截就会报错，也就是说，如果某个属性不可配置（或者目标对象不可扩展），则 has 方法就不得“隐藏”（即返回 false ）目标对象的该属性。

注意： has 方法拦截的是 HasProperty 操作，而不是 HasOwnProperty 操作，即 has 方法不判断一个属性是对象自身的属性，还是继承的属性。

另外，虽然 for...in 循环也用到了 in 运算符，但是 has 拦截对 for...in 循环不生效。

construct()

construct 方法表示构造函数被调用，用于拦截 new 命令，下面是拦截对象的写法。

var handler = {

    construct(target, args, newTarget){

        return new target(...args);

    }

};

construct 方法可以接受三个参数。

target ：目标对象
args ：构造函数的参数对象
newTarget ：创造实例对象时， new 命令作用的构造函数（下面例子的 p ），可选参数

 var p = new Proxy(function () {}, {

     construct(target, args){

         console.log('called: ' + args.join(','));

         return {value: args[0] * 10};

     }

 });

 console.log((new p(1)).value);

 // called: 1

 //

构造函数的目标函数是一个匿名空函数，就像空对象一样。

construct 方法返回的必须是一个对象，否则会报错，因为是构造函数。

deleteProperty()

deleteProperty 方法用于拦截 delete 操作，如果这个方法抛出错误或者返回 false ，当前属性就无法被 delete 命令删除。

 var handler = {

   deleteProperty (target, key) {

     invariant(key, 'delete');

     delete target[key];

     return true;

   }

 };

 function invariant (key, action) {

   if (key[0] === '_') {

     throw new Error(`Invalid attempt to ${action} private "${key}" property`);

   }

 }

 var target = { _prop: 'foo' };

 var proxy = new Proxy(target, handler);

 delete proxy._prop

 // Error: Invalid attempt to delete private "_prop" property

上面代码中， deleteProperty 方法拦截了 delete 操作符，删除第一个字符为下划线的属性会报错。

注意，目标对象自身的不可配置（configurable）的属性，不能被 deleteProperty 方法删除，否则报错。

关于对象的代理操作符在AOP中应该不常用。在OOP中使用应该较多。

其他方法

defineProperty 方法拦截了 Object.defineProperty 操作。

getOwnPropertyDescriptor 方法拦截 Object.getOwnPropertyDescriptor() ，返回一个属性描述对象或者 undefined 。

getPrototypeOf 方法主要用来拦截获取对象原型。具体来说，拦截下面这些操作。

Object.prototype.__proto__
Object.prototype.isPrototypeOf()
Object.getPrototypeOf()
Reflect.getPrototypeOf()
instanceof

isExtensible 方法拦截 Object.isExtensible 操作。

ownKeys 方法用来拦截对象自身属性的读取操作。具体来说，拦截以下操作。

Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.keys()
for...in 循环

preventExtensions 方法拦截 Object.preventExtensions() 。该方法必须返回一个布尔值，否则会被自动转为布尔值。

这个方法有一个限制，只有目标对象不可扩展时（即 Object.isExtensible(proxy) 为 false ）， proxy.preventExtensions 才能返回 true ，否则会报错。

setPrototypeOf 方法主要用来拦截 Object.setPrototypeOf 方法。

3.Proxy.revocable()

Proxy.revocable 方法返回一个可取消的 Proxy 实例。用于一次性限制的代理对象。

 let target = {};

 let handler = {};

 let {proxy, revoke} = Proxy.revocable(target, handler);

 proxy.foo = 123;

 proxy.foo //

 revoke();

 proxy.foo // TypeError: Revoked

Proxy.revocable 方法返回一个对象，该对象的 proxy 属性是 Proxy 实例， revoke 属性是一个函数，可以取消 Proxy 实例。上面代码中，当执行 revoke 函数之后，再访问 Proxy 实例，就会抛出一个错误。

Proxy.revocable 的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。

4.this 问题

虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的 this 关键字会指向 Proxy 代理。

此外，有些原生对象的内部属性，只有通过正确的 this 才能拿到，所以 Proxy 也无法代理这些原生对象的属性。

const target = new Date();

const handler = {};

const proxy = new Proxy(target, handler);

proxy.getDate();

// TypeError: this is not a Date object.

上面代码中， getDate 方法只能在 Date 对象实例上面拿到，如果 this 不是 Date 对象实例就会报错。这时， this 绑定原始对象，就可以解决这个问题。

const target = new Date('2015-01-01');

const handler = {

  get(target, prop) {

    if (prop === 'getDate') {

      return target.getDate.bind(target);//把getDate绑定到target

    }

    return Reflect.get(target, prop);

  }

};

const proxy = new Proxy(target, handler);

proxy.getDate() //

所谓bind绑定，就是把某个属性或方法挂在到目标对象上。

5.实例：Web 服务的客户端

Proxy 对象可以拦截目标对象的任意属性，这使得它很合适用来写 Web 服务的客户端。

const service = createWebService('http://example.com/data');

service.employees().then(json => {

  const employees = JSON.parse(json);

  // ···

});

上面代码新建了一个 Web 服务的接口，这个接口返回各种数据。Proxy 可以拦截这个对象的任意属性，所以不用为每一种数据写一个适配方法，只要写一个 Proxy 拦截就可以了。这便是AOP的思想。

function createWebService(baseUrl) {

  return new Proxy({}, {

    get(target, propKey, receiver) {

      return () => httpGet(baseUrl+'/' + propKey);

    }

  });

}

同理，Proxy 也可以用来实现数据库的 ORM 层。

总结：Proxy的应用：极顶的接口对象和极底的ORM数据库对象。

正文

1.概述

2.Proxy 实例的方法

get()

set()

apply()

has()

construct()

deleteProperty()

其他方法

3.Proxy.revocable()

4.this 问题

5.实例：Web 服务的客户端

相关阅读

[基础]ES6编程艺术

ES6零基础视频教程实战解析彩票项目ES6视频教程共35课

ES6零基础学习解析彩票项目视频教程价值188元

某课网售价248元的ES6+开发电商网站的账号体系JS SDK课程

ES6+ 开发电商网站的账号体系 JS SDK

游戏中飞行的浴缸，游戏中飞行的浴缸怎么玩

飞机甲战略游戏，机甲空战游戏

手机拨号键怎么调整大小，手机拨号键缩小了怎么恢复

目录[+]

1.概述

2.Proxy 实例的方法

get()

set()

apply()

has()

construct()

deleteProperty()

其他方法

3.Proxy.revocable()

4.this 问题

5.实例：Web 服务的客户端

相关阅读

[基础]ES6编程艺术

ES6零基础视频教程 实战解析彩票项目ES6视频教程 共35课

ES6零基础学习解析彩票项目视频教程 价值188元

某课网售价248元的ES6+开发电商网站的账号体系JS SDK课程

ES6+ 开发电商网站的账号体系 JS SDK

游戏中飞行的浴缸，游戏中飞行的浴缸怎么玩

飞机甲战略游戏，机甲空战游戏

手机拨号键怎么调整大小，手机拨号键缩小了怎么恢复

目录[+]

ES6零基础视频教程实战解析彩票项目ES6视频教程共35课

ES6零基础学习解析彩票项目视频教程价值188元