weixin_34129145
weixin_34129145

Proxy详解，运用与Mobx

本文简单阐述一点元编程的知识，然后较为详细的给出 Proxy 的有关用法（起码比 MDN 详细，补充了各种错误情况的具体示例，且比上面的机翻准确），再用一些例子讲述 Proxy 适合在什么场景下使用

元编程

首先，在编程中有以下两个级别：

  • 基本级别/应用程序级别：代码处理用户输入
  • 元级别：代码处理基本级别的代码

元( meta ) 这个词缀在这里的意思是：关于某事自身的某事，因此元编程( metaprogramming )这个词意味着 关于编程的编程，可以在两种同的语言进行元编程，编写元程序的语言称之为元语言。被操纵的程序的语言称之为“目标语言”，在下面这段代码中 JavaScript 为元语言，而 Java 为目标语言：

const str = 'Hello' + '!'.repeat(3);
console.log('System.out.println("'+str+'")');
复制代码

一门编程语言同时也是自身的元语言的能力称之为反射(Reflection)，用于发现和调整你的应用程序结构和语义。

元编程有三种形式：

  • 自省(Introspection): 暴露出程序运行时的状态，以只读的形式获取程序结构
    • 比如使用 Object.keys(obj) 等，ES6 中新出了个 Reflect 对许多获取内部状态的接口进行了整合与统一
  • Self-modification: 可以修改运行时的程序结构/数据
    • 比如 delete 或 property descriptors 等
  • 调解(Intercession): 可以重新定义某些语言操作的语义
    • 比如本文中的 Proxy

元编程与 Reflect

ES6 中也新增了一个全局对象 Reflect，其中的大多数方法都早已以其他形式存在，这次将其接口统一的目的在于：

  1. 在以前各种获取/修改程序运行时状态的方法通常是散落在各处的，有的挂在 Object.prototype 上，有的挂在 Function.prototype 上，有的是一个操作符(如 delete / in 等 )
  2. 以前的调用过于复杂或不够安全
    • 某些情况下调用 obj.hasOwnProperty 时对象上可能没有这个方法（比如这个对象是通过 Object.create(null) 创建的），因此这个时候使用 Object.prototype.hasOwnProperty.call 才是最安全的，但是这样过于复杂
    • call 和 apply 也有上述问题
  3. 返回值不科学，如使用 Object.defineProperty ，如果成功返回一个对象，否则抛出一个 TypeError ，因此不得不使用 try...catch 来捕获定义属性时发生的任何错误。而 Reflect.defineProperty 返回一个布尔值表示的成功状态，所以在这里可以只用 if...else

这里可以参考一篇文章来了解 Reflect 做出了哪些优化

Proxy 的基本内容

终于来到了我们的主角，首先我们来看看 Proxy 的构造函数:

Proxy(target, handler)
复制代码
  • target: 用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
  • handler: 处理器对象( proxy's handler)用来自定义代理对象的各种可代理操作。其中包括众多 traps

不变量(Invariants)

在进一步探究 Proxy 有什么之前，先回顾一下如何通保护对象：

  • 不可扩展(Non-extensible)
    • 不可新增属性且不可改变原型
    'use strict'
    const obj = Object.preventExtensions({});
    console.log(Object.isExtensible(obj)); // false
    obj.foo = 123; // Cannot add property foo, object is not extensible
    Object.setPrototypeOf(obj, null) // # is not extensible
复制代码 
   
     
    
  • 不可写(Non-writable) 
     
       
      
    • value 不能被赋值运算符改变
      •  
     
    •  
    
  • 不可配置(Non-configurable) 
     
       
      
    • 不能改变/删除属性（除了把 writable 改为 false ）
      •  
     
    •  
   
 
   
使用代理以后，很容易违反上述约束（因为上述约束作用在被 Proxy 代理的对象中， Proxy 对象并不受其约束），因此在调用/返回的时候 Proxy 会帮我们检查或者强制做类型转换等（比如预期是 Boolean 时会把 truish 和 falsish 强制转换成 Boolean 等）。后文中的约束部分有进一步的解释与示例。
 
   
这里有一份关于 不变量的文档
 
   
然后来看看 Proxy 的 handler 提供了哪些东西供我们使用
 
   
handler.get()
 
   
拦截对象的读取属性操作。
 
   
get: function(target, property, receiver) {}
复制代码
 
   
     
    
  • target :目标对象。
    •  
    
  • property :被获取的属性名。
    •  
    
  • receiver :最初被调用的对象。通常是 proxy 本身，但 handler 的 get 方法也有可能在原型链上或以其他方式被间接地调用（因此不一定是 proxy 本身）。 
     
       
      
    • 这里的 target 和 property 都很好理解，但是 receiver 需要额外注意，下面使用一个例子帮助理解:
      •  
     
    •  
   
 
   
    var obj = {
        myObj: 1
    };
    obj.__proto__ = new Proxy({
        test: 123
    },{
        get:function(target, property, receiver) {
            console.log(target, property, receiver);
            return 1;
        }
    });
    console.log(obj.test);
    // {test: 123}, "test" ,{myObj: 1}
    // 可以看见 receiver 是最初被调用的对象
复制代码
 
   
该方法会拦截目标对象的以下操作:
 
   
     
    
  • 访问属性: proxy[foo] 和 proxy.bar
    •  
    
  • 访问原型链上的属性: Object.create(proxy)[foo]
    •  
    
  • Reflect.get()
    •  
   
 
   
约束（违反约束会抛出 Type Error）:
 
   
     
    
  • 如果要访问的目标属性是不可写以及不可配置的，则返回的值必须与该目标属性的值相同。
    •  
   
 
   
    const obj = {};
    // 不可写以及不可配置
    Object.defineProperty(obj, "a", { 
        configurable: false,
        enumerable: true, 
        value: 10, 
        writable: false
    });

    const p = new Proxy(obj, {
        get: function(target, prop) {
            return 20;
        }
    });

    console.log(p.a); // 'get' on proxy: property 'a' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '10' but got '20')
复制代码
 
   
     
    
  • 如果目标对象的属性是不可配置且没有定义其 get 方法，则其返回值必须为 undefined
    •  
   
 
   
    const obj = { a: 10 };
    // 不可配置 且 没有定义 get
    Object.defineProperty(obj, "a", { 
        configurable: false,
        get: undefined,
    });

    const p = new Proxy(obj, {
        get: function(target, prop) {
            return 20;
        }
    });

    console.log(p.a) // 'get' on proxy: property 'a' is a non-configurable accessor property on the proxy target and does not have a getter function, but the trap did not return 'undefined' (got '20')
复制代码
 
   
handler.set()
 
   
拦截设置属性值的操作
 
   
set: function(target, property, value, receiver) {}
复制代码
 
   
     
    
  • target :目标对象。
    •  
    
  • property :被设置的属性名。
    •  
    
  • value :被设置的新值
    •  
    
  • receiver :最初被调用的对象。同上文 get 中的 receiver
    •  
   
 
   
返回值:
 
   
set 方法应该返回一个 Boolean :
 
   
     
    
  • 返回 true 代表此次设置属性成功了
    •  
    
  • 返回 false 且设置属性操作发生在严格模式下，那么会抛出一个 TypeError
    •  
   
 
   
注意: Proyx 中大多数方法要求返回 Boolean 时本质上是会帮你把返回值转换成 Boolean，因此可以在里面随便返回啥，到了外面拿到的都是 Boolean；这也是为什么报错的时候用词为: truish 和 falsish
 
   
该方法会拦截目标对象的以下操作:
 
   
     
    
  • 指定属性值: proxy[foo] = bar 和 proxy.foo = bar
    •  
    
  • 指定继承者的属性值: Object.create(proxy)[foo] = bar
    •  
    
  • Reflect.set()
    •  
   
 
   
约束:
 
   
     
    
  • 若目标属性是不可写及不可配置的，则不能改变它的值。
    •  
   
 
   
    const obj = {};
    // 不可写以及不可配置
    Object.defineProperty(obj, "a", {
        configurable: false,
        enumerable: true,
        value: 10,
        writable: false
    });

    const p = new Proxy(obj, {
        set: function(target, prop, value, receiver) {
            console.log("called: " + prop + " = " + value);
            return true;
        }
    });

    p.a = 20; // trap returned truish for property 'a' which exists in the proxy target as a non-configurable and non-writable data property with a different value
    // 注意这里我们并没有真正改变 'a' 的值，该错误由 return true 引起    
复制代码
 
   
     
    
  • 如果目标对象的属性是不可配置且没有定义其 set 方法，则不能设置它的值。
    •  
   
 
   
    const obj = {};
    // 不可写 且 没有定义 set
    Object.defineProperty(obj, "a", {
        configurable: false,
        set: undefined
    });

    const p = new Proxy(obj, {
        set: function(target, prop, value, receiver) {
            console.log("called: " + prop + " = " + value);
            return true;
        }
    });

    p.a = 20; // trap returned truish for property 'a' which exists in the proxy target as a non-configurable and non-writable accessor property without a setter
    // 注意这里我们并没有真正改变 'a' 的值，该错误由 return true 引起
复制代码
 
   
     
    
  • 在严格模式下，若 set 方法返回 false ，则会抛出一个 TypeError 异常。
    •  
   
 
   
    'use strict'
    const obj = {};
    const p = new Proxy(obj, {
        set: function(target, prop, value, receiver) {
            console.log("called: " + prop + " = " + value);
            return false;
        }
    });
    p.a = 20; // trap returned falsish for property 'a'
复制代码
 
   
handler.apply()
 
   
拦截函数的调用
 
   
apply: function(target, thisArg, argumentsList) {}
复制代码
 
   
     
    
  • target :目标对象（函数）。
    •  
    
  • thisArg :被调用时的上下文对象。
    •  
    
  • argumentsList :被调用时的参数数组。
    •  
   
 
   
该方法会拦截目标对象的以下操作:
 
   
     
    
  • proxy(...args)
    •  
    
  • Function.prototype.apply() 和 Function.prototype.call()
    •  
    
  • Reflect.apply()
    •  
   
 
   
约束:
 
   
     
    
  • target 本身必须是可被调用的。也就是说，它必须是一个函数对象。
    •  
   
 
   
handler.construct()
 
   
用于拦截 new 操作符
 
   
construct: function(target, argumentsList, newTarget) {}
复制代码
 
   
     
    
  • target :目标对象。
    •  
    
  • argumentsList :constructor 的参数列表。
    •  
    
  • newTarget :最初被调用的构造函数。
    •  
   
 
   
该方法会拦截目标对象的以下操作:
 
   
     
    
  • new proxy(...args)
    •  
    
  • Reflect.construct()
    •  
   
 
   
注意:
 
   
     
    
  • 为了使 new 操作符在生成的 Proxy 对象上生效，用于初始化代理的目标对象自身必须具有 [[Construct]] 内部方法，即 new target 必须是有效的。比如说 target 是一个 function
    •  
   
 
   
约束:
 
   
     
    
  • construct 方法必须返回一个对象，否则将会抛出错误 TypeError
    •  
   
 
   
    const p = new Proxy(function () {}, {
        construct: function (target, argumentsList, newTarget) {
            return 1;
        }
    });
    new p(); // 'construct' on proxy: trap returned non-object ('1')
复制代码
 
   
handler.defineProperty()
 
   
用于拦截 Object.defineProperty() 操作
 
   
defineProperty: function(target, property, descriptor) {}
复制代码
 
   
     
    
  • target :目标对象。
    •  
    
  • property :待检索其描述的属性名。
    •  
    
  • descriptor :待定义或修改的属性的描述符。
    •  
   
 
   
注意:
 
   
     
    
  • defineProperty 方法也必须返回一个布尔值，表示定义该属性的操作是否成功。(严格模式下返回 false 会抛 TypeError)
    •  
    
  • defineProperty 方法只能接受如下标准属性，其余的将直接无法获取（示例代码如下）: 
     
       
      
    • enumerable
      •  
      
    • configurable
      •  
      
    • writable
      •  
      
    • value
      •  
      
    • get
      •  
      
    • set
      •  
     
    •  
   
 
   
var p = new Proxy({}, {
    defineProperty(target, prop, descriptor) {
        console.log(descriptor);
        return Reflect.defineProperty(target, prop, descriptor);
    }
});

Object.defineProperty(p, 'name', {
    value: 'proxy',
    type: 'custom'
}); 
// { value: 'proxy' }
复制代码
 
   
该方法会拦截目标对象的以下操作 :
 
   
     
    
  • Object.defineProperty()
    •  
    
  • Reflect.defineProperty()
    •  
   
 
   
约束:
 
   
     
    
  • 如果目标对象不可扩展， 将不能添加属性。
    •  
   
 
   
    const obj = {
        a: 10
    };
    Object.preventExtensions(obj);
    const p = new Proxy(obj, {
        defineProperty(target, prop, descriptor) {
            return true;
        }
    });
    Object.defineProperty(p, 'name', {
        value: 'proxy'
    }); // 'defineProperty' on proxy: trap returned truish for adding property 'name'  to the non-extensible proxy target
复制代码
 
   
     
    
  • 如果属性不是作为目标对象的不可配置的属性存在，则无法将属性添加或修改为不可配置。
    •  
   
 
   
    const obj = {
        a: 10
    };
    const p = new Proxy(obj, {
        defineProperty(target, prop, descriptor) {
            return true;
        }
    });
    Object.defineProperty(p, 'a', {
        value: 'proxy',
        configurable: false,
    }); // trap returned truish for defining non-configurable property 'a' which is either non-existant or configurable in the proxy target
复制代码
 
   
     
    
  • 如果目标对象存在一个对应的可配置属性，这个属性可能不会是不可配置的。
    •  
    
  • 如果一个属性在目标对象中存在对应的属性，那么 Object.defineProperty(target, prop, descriptor) 将不会抛出异常。
    •  
    
  • 在严格模式下， false 作为 handler.defineProperty 方法的返回值的话将会抛出 TypeError 异常.
    •  
   
 
   
    const obj = {
        a: 10
    };
    const p = new Proxy(obj, {
        defineProperty(target, prop, descriptor) {
            return false
        }
    });
    Object.defineProperty(p, 'a', {
        value: 'proxy',
    }); // 'defineProperty' on proxy: trap returned falsish for property 'a'
复制代码
 
   
handler.deleteProperty()
 
   
用于拦截对对象属性的 delete 操作
 
   
deleteProperty: function(target, property) {}
复制代码
 
   
     
    
  • target : 目标对象。
    •  
    
  • property : 待删除的属性名。
    •  
   
 
   
返回值: 必须返回一个 Boolean 类型的值，表示了该属性是否被成功删除。（这次返回 false 不会报错了）
 
   
该方法会拦截以下操作:
 
   
     
    
  • 删除属性: delete proxy[foo] 和 delete proxy.foo
    •  
    
  • Reflect.deleteProperty()
    •  
   
 
   
约束:
 
   
     
    
  • 如果目标对象的属性是不可配置的，那么该属性不能被删除。并且尝试删除会抛 TypeError
    •  
   
 
   
    const obj = {};
    Object.defineProperty(obj, 'a', {
        value: 'proxy',
    });
    const p = new Proxy(obj, {
        deleteProperty: function (target, prop) {
            return true;
        }
    });

    delete p.a; // trap returned truish for property 'a' which is non-configurable in the proxy target
复制代码
 
   
handler.getOwnPropertyDescriptor()
 
   
用于拦截对对象属性的 getOwnPropertyDescriptor() 方法
 
   
getOwnPropertyDescriptor: function(target, prop) {}
复制代码
 
   
     
    
  • target :目标对象。
    •  
    
  • prop :属性名。
    •  
   
 
   
返回值: 必须返回一个 object 或 undefined。
 
   
该方法会拦截以下操作:
 
   
     
    
  • Object.getOwnPropertyDescriptor()
    •  
    
  • Reflect.getOwnPropertyDescriptor()
    •  
   
 
   
约束:
 
   
     
    
  • getOwnPropertyDescriptor 必须返回一个 object 或 undefined
    •  
   
 
   
    const obj = { a: 10 };
    const p = new Proxy(obj, {
        getOwnPropertyDescriptor: function(target, prop) {
            return '';
        }
    });
    Object.getOwnPropertyDescriptor(p, 'a'); // trap returned neither object nor undefined for property 'a'
复制代码
 
   
     
    
  • 如果属性作为目标对象的不可配置的属性存在，则该属性无法报告为不存在。
    •  
   
 
   
    const obj = { a: 10 };
    Object.defineProperty(obj, 'b', {
        value: 20
    });
    const p = new Proxy(obj, {
        getOwnPropertyDescriptor: function(target, prop) {
            return undefined;
        }
    });
    Object.getOwnPropertyDescriptor(p, 'b'); // trap returned undefined for property 'b' which is non-configurable in the proxy target
复制代码
 
   
     
    
  • 如果属性作为目标对象的属性存在，并且目标对象不可扩展，则该属性无法报告为不存在。
    •  
   
 
   
    const obj = { a: 10 };
    Object.preventExtensions(obj);
    const p = new Proxy(obj, {
        getOwnPropertyDescriptor: function(target, prop) {
            return undefined;
        }
    });
    Object.getOwnPropertyDescriptor(p, 'a'); // trap returned undefined for property 'a' which exists in the non-extensible proxy target
复制代码
 
   
     
    
  • 如果属性不存在作为目标对象的属性，并且目标对象不可扩展，则不能将其报告为存在。
    •  
   
 
   
    const obj = { a: 10 };
    Object.preventExtensions(obj);
    const p = new Proxy(obj, {
        getOwnPropertyDescriptor: function(target, prop) {
            return Object.getOwnPropertyDescriptor(obj, prop) || {};
        }
    });
    console.log(Object.getOwnPropertyDescriptor(p, 'a'))
    Object.getOwnPropertyDescriptor(p, 'b'); // trap returned descriptor for property 'b' that is incompatible with the existing property in the proxy target
复制代码
 
   
     
    
  • 如果一个属性作为目标对象的自身属性存在，或者作为目标对象的可配置的属性存在，则它不能被报告为不可配置
    •  
   
 
   
    const obj = { a: 10 };
    const p = new Proxy(obj, {
        getOwnPropertyDescriptor: function(target, prop) {
            return { configurable: false };
        }
    });
    Object.getOwnPropertyDescriptor(p, 'a'); // trap reported non-configurability for property 'a' which is either non-existant or configurable in the proxy target
复制代码
 
   
     
    
  • Object.getOwnPropertyDescriptor(target)的结果可以使用 Object.defineProperty 应用于目标对象，也不会抛出异常。
    •  
   
 
   
handler.getPrototypeOf()
 
   
用于拦截读取代理对象的原型的方法
 
   
getPrototypeOf(target) {}
复制代码
 
   
     
    
  • target : 被代理的目标对象。
    •  
   
 
   
返回值: 必须返回一个对象值或者返回 null ，不能返回其它类型的原始值。
 
   
该方法会拦截以下操作:
 
   
     
    
  • Object.getPrototypeOf()
    •  
    
  • Reflect.getPrototypeOf()
    •  
    
  • __proto__
    •  
    
  • Object.prototype.isPrototypeOf()
    •  
    
  • instanceof
    •  
   
 
   
举例如下:
 
   
const obj = {};
const p = new Proxy(obj, {
    getPrototypeOf(target) {
        return Array.prototype;
    }
});
console.log(
    Object.getPrototypeOf(p) === Array.prototype,  // true
    Reflect.getPrototypeOf(p) === Array.prototype, // true
    p.__proto__ === Array.prototype,               // true
    Array.prototype.isPrototypeOf(p),              // true
    p instanceof Array                             // true
);
复制代码
 
   
约束:
 
   
     
    
  • getPrototypeOf() 方法返回的不是对象也不是 null 。
    •  
   
 
   
    const obj = {};
    const p = new Proxy(obj, {
        getPrototypeOf(target) {
            return "foo";
        }
    });
    Object.getPrototypeOf(p); // TypeError: trap returned neither object nor null
复制代码
 
   
     
    
  • 目标对象是不可扩展的，且 getPrototypeOf() 方法返回的原型不是目标对象本身的原型。
    •  
   
 
   
    const obj = {};
    Object.preventExtensions(obj);
    const p = new Proxy(obj, {
        getPrototypeOf(target) {
            return {};
        }
    });
    Object.getPrototypeOf(p); // proxy target is non-extensible but the trap did not return its actual prototype
复制代码
 
   
handler.has()
 
   
主要用于拦截 in 和 with 操作
 
   
has: function(target, prop) {}
复制代码
 
   
     
    
  • target : 目标对象
    •  
    
  • prop : 需要检查是否存在的属性
    •  
   
 
   
返回值: Boolean (返回一个可以转化为 Boolean 的也没什么问题)
 
   
该方法会拦截以下操作:
 
   
     
    
  • 属性查询: foo in proxy
    •  
    
  • 继承属性查询: foo in Object.create(proxy)
    •  
    
  • with 检查: with(proxy) { (foo); }
    •  
    
  • Reflect.has()
    •  
   
 
   
约束:
 
   
     
    
  • 如果目标对象的某一属性本身不可被配置，则该属性不能够被代理隐藏
    •  
   
 
   
    const obj = {};
    Object.defineProperty(obj, 'a', {
        value: 10
    })
    const p = new Proxy(obj, {
        has: function (target, prop) {
            return false;
        }
    });
    'a' in p; // trap returned falsish for property 'a' which exists in the proxy target as non-configurable
复制代码
 
   
     
    
  • 如果目标对象为不可扩展对象，则该对象的属性不能够被代理隐藏
    •  
   
 
   
    const obj = { a: 10 };
    Object.preventExtensions(obj);
    const p = new Proxy(obj, {
        has: function(target, prop) {
            return false;
        }
    });
    'a' in p; // trap returned falsish for property 'a' but the proxy target is not extensible
复制代码
 
   
handler.isExtensible()
 
   
用于拦截对对象的 Object.isExtensible() 操作
 
   
isExtensible: function(target) {}
复制代码
 
   
     
    
  • target : 目标对象。
    •  
   
 
   
该方法会拦截目标对象的以下操作:
 
   
     
    
  • Object.isExtensible()
    •  
    
  • Reflect.isExtensible()
    •  
   
 
   
返回值: Boolean 值或可转换成 Boolean 的值。
 
   
约束:
 
   
     
    
  • Object.isExtensible(proxy) 必须同 Object.isExtensible(target) 返回相同值。 
     
       
      
    • 如果 Object.isExtensible(target) 返回 ture ，则 Object.isExtensible(proxy) 必须返回 true 或者为 true 的值
      •  
      
    • 如果 Object.isExtensible(target) 返回 false ，则 Object.isExtensible(proxy) 必须返回 false 或者为 false 的值
      •  
     
    •  
   
 
   
    const p = new Proxy({}, {
        isExtensible: function(target) {
            return false;
        }
    });
    Object.isExtensible(p); // trap result does not reflect extensibility of proxy target (which is 'true')
复制代码
 
   
handler.ownKeys()
 
   
用于拦截 Reflect.ownKeys()
 
   
ownKeys: function(target) {}
复制代码
 
   
     
    
  • target : 目标对象
    •  
   
 
   
返回值: 一个可枚举对象
 
   
该方法会拦截目标对象的以下操作（同时有一些额外的限制）:
 
   
     
    
  • Object.getOwnPropertyNames() 
     
       
      
    • 返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）
      •  
      
    • 返回的结果中只能拿到 String 的，Symbol 类型的将被忽视
      •  
     
    •  
    
  • Object.keys() 
     
       
      
    • 返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致。 可枚举的属性可以通过 for...in 循环进行遍历（除非该属性名是一个Symbol）
      •  
      
    • 所以返回的结果中只能拿到可枚举的 String 数组
      •  
     
    •  
    
  • Object.getOwnPropertySymbols() 
     
       
      
    • 只返回一个给定对象自身的所有 Symbol 属性的数组
      •  
      
    • 返回的结果中只能拿到 Symbol ， String 类型的将被忽视
      •  
     
    •  
    
  • Reflect.ownKeys() 
     
       
      
    • 返回一个目标对象自身的属性键
      •  
      
    • 什么都返回
      •  
     
    •  
   
 
   
    const mySymbel = Symbol('juanni');
    const obj = { a: 10 };
    Object.defineProperty(obj, 'b', { 
        configurable: false, 
        enumerable: false, 
        value: 10 }
    );
    Object.defineProperty(obj, mySymbel, { 
        configurable: true, 
        enumerable: true, 
        value: 10 }
    );
    const p = new Proxy(obj, {
        ownKeys: function (target) {
            return ['a', 'b', mySymbel];
        }
    });
    console.log(Object.getOwnPropertySymbols(p)); // [Symbol(juanni)]

    console.log(Object.getOwnPropertyNames(p)); // ["a", "b"]

    console.log(Object.keys(p)); // ["a"]

    console.log(Reflect.ownKeys(p)); // ["a", "b", Symbol(juanni)]
复制代码
 
   
约束:
 
   
     
    
  • ownKeys 的结果必须是一个数组
    •  
   
 
   
    const obj = {
        a: 10
    };
    const p = new Proxy(obj, {
        ownKeys: function (target) {
            return 123;
        }
    });
    Object.getOwnPropertyNames(p); // CreateListFromArrayLike called on non-object
复制代码
 
   
     
    
  • 数组的元素类型要么是一个 String ，要么是一个 Symbol
    •  
   
 
   
    const obj = {
        a: 10
    };
    const p = new Proxy(obj, {
        ownKeys: function (target) {
            return [123];
        }
    });
    Object.getOwnPropertyNames(p); // 123 is not a valid property name
复制代码
 
   
     
    
  • 结果列表必须包含目标对象的所有不可配置（ non-configurable ）、自有（ own ）属性的 key
    •  
   
 
   
    const obj = {
        a: 10
    };
    Object.defineProperty(obj, 'b', { 
        configurable: false, 
        enumerable: true, 
        value: 10 }
    );
    const p = new Proxy(obj, {
        ownKeys: function (target) {
            return [];
        }
    });
    Object.getOwnPropertyNames(p); // trap result did not include 'b'
复制代码
 
   
     
    
  • 如果目标对象不可扩展，那么结果列表必须包含目标对象的所有自有（ own ）属性的 key ，不能有其它值
    •  
   
 
   
    const obj = { a: 10 };
    Object.preventExtensions(obj);
    const p = new Proxy(obj, {
        ownKeys: function (target) {
            return ['a', 'd'];
        }
    });
    Object.getOwnPropertyNames(p); // trap returned extra keys but proxy target is non-extensible
复制代码
 
   
handler.preventExtensions()
 
   
用于拦截对对象的 Object.preventExtensions() 操作
 
   
preventExtensions: function(target) {}
复制代码
 
   
     
    
  • target : 所要拦截的目标对象
    •  
   
 
   
该方法会拦截目标对象的以下操作:
 
   
     
    
  • Object.preventExtensions()
    •  
    
  • Reflect.preventExtensions()
    •  
   
 
   
返回值: Boolean
 
   
约束:
 
   
     
    
  • 只有当 Object.isExtensible(proxy) 是 false 时 Object.preventExtensions(proxy) 才能 true
    •  
   
 
   
    const p = new Proxy({}, {
        preventExtensions: function (target) {
            return true;
        }
    });
    Object.preventExtensions(p); // trap returned truish but the proxy target is extensible
复制代码
 
   
handler.setPrototypeOf()
 
   
用于拦截对对象的 Object.setPrototypeOf() 操作
 
   
setPrototypeOf: function(target, prototype) {}
复制代码
 
   
     
    
  • target : 被拦截目标对象
    •  
    
  • prototype : 对象新原型或为 null
    •  
   
 
   
该方法会拦截目标对象的以下操作:
 
   
     
    
  • Object.setPrototypeOf()
    •  
    
  • Reflect.setPrototypeOf()
    •  
   
 
   
返回值: Boolean
 
   
约束:
 
   
     
    
  • 如果 target 不可扩展, 原型参数必须与 Object.getPrototypeOf(target) 的值相
    •  
   
 
   
    const obj = {
        a: 10
    };
    Object.preventExtensions(obj);
    const p = new Proxy(obj, {
        setPrototypeOf(target, prototype) {
            Object.setPrototypeOf(target, prototype)
            return true;
        }
    });
    Object.setPrototypeOf(obj, null); // # is not extensible
复制代码 
   
撤销 Proxy
 
   
Proxy.revocable() 方法被用来创建可撤销的 Proxy 对象。此种代理可以通过revoke函数来撤销并且关闭代理。关闭代理后，在代理上的任意的操作都会导致 TypeError
 
   
const revocable = Proxy.revocable({}, {
    get: function (target, name) {
        return "[[" + name + "]]";
    }
});
const proxy = revocable.proxy;
console.log(proxy.foo); // "[[foo]]"

revocable.revoke();

console.log(proxy.foo); // Cannot perform 'get' on a proxy that has been revoked
proxy.foo = 1 // Cannot perform 'set' on a proxy that has been revoked
delete proxy.foo; // Cannot perform 'deleteProperty' on a proxy that has been revoked
typeof proxy // "object", typeof doesn't trigger any trap
复制代码
 
   
在 Mobx5 中的运用
 
   
在这里打算用 Vue 和 Mobx 来体现出 Proxy 的优势
 
   
首先看看 Vue2.x 因为使用 defineProperty 带来的限制：
 
   
     
    
  1. 不能检测利用索引直接设置一个项: vm.items[indexOfItem] = newValue
    2.  
    
  2. 不能检测修改数组的长度: vm.items.length = newLength
    3.  
    
  3. 不能检测对象属性的添加或删除
    4.  
    
  4. ...
    5.  
   
 
   
隔壁 Mobx4 也是用的 defineProperty ，但是通过一系列 hack 来绕过一些限制：
 
   
     
    
  1. 使用自己撸的类数组对象来解决上述 1、2 两个问题。但是也有额外限制： 
     
       
      
    1. Array.isArray 返回 false
      2.  
      
    2. 传递给外部或者需要使用真正数组时，必须使用 array.slice() 创建一份浅拷贝的真正数组
      3.  
      
    3. sort 和 reverse 不会改变数组本身，而只是返回一个排序过/反转过的拷贝
      4.  
     
    2.  
    
  2. 没能解决不能直接在对象上添加/删除属性的问题
    3.  
   
 
   
因为使用了类数组对象，所以 length 变成了对象上的属性而不是数组的 length ，因此可以被劫持。更多技巧可以查看 observablearray.ts
 
   
    Object.defineProperty(ObservableArray.prototype, "length", {
        enumerable: false,
        configurable: true,
        get: function(): number {
            return this.$mobx.getArrayLength()
        },
        set: function(newLength: number) {
            this.$mobx.setArrayLength(newLength)
        }
    })
复制代码
 
   
Mobx5 在今年使用 Prxoy 重写后正式发布，成功解决了上述问题，接下来简单看一看它是如何解决的：
 
   
     
    
  1. 拦截修改数组 length 的操作/直接设置值：
    2.  
   
 
   
const arrayTraps = {
    get(target, name) {
        if (name === $mobx) return target[$mobx]
        // 成功拦截 length
        if (name === "length") return target[$mobx].getArrayLength()
        if (typeof name === "number") {
            return arrayExtensions.get.call(target, name)
        }
        if (typeof name === "string" && !isNaN(name as any)) {
            return arrayExtensions.get.call(target, parseInt(name))
        }
        if (arrayExtensions.hasOwnProperty(name)) {
            return arrayExtensions[name]
        }
        return target[name]
    },
    set(target, name, value): boolean {
        // 成功拦截 length
        if (name === "length") {
            target[$mobx].setArrayLength(value)
            return true
        }
        // 直接设置数组值
        if (typeof name === "number") {
            arrayExtensions.set.call(target, name, value)
            return true
        }
        // 直接设置数组值
        if (!isNaN(name)) {
            arrayExtensions.set.call(target, parseInt(name), value)
            return true
        }
        return false
    },
    preventExtensions(target) {
        fail(`Observable arrays cannot be frozen`)
        return false
    }
}
复制代码
 
   
     
    
  1. 直接在对象上添加/删除属性 
     
       
      
    • 这一点本质是因为 defineProperty 是劫持的对象上的属性引起的，没有办法劫持对象上不存在的属性，而 Prxoy 劫持整个对象自然没有了这个问题
      •  
     
    2.  
   
 
   
polyfill
 
   
这个东西因为语言本身限制所以 polyfill 并不好搞，但是部分实现还是可以的：
 
   
proxy-polyfill 是谷歌基于 defineProperty 撸的，只支持 get , set , apply , construct, 也支持 revocable ，代码只有一百多行非常简单，所以就不多做讲解
 
   
实际运用
 
   
基础知识了解了这么多，接下来该看看实际运用了
 
   
设计模式
 
   
正好有个设计模式叫代理模式：为其他对象提供一种代理以控制对这个对象的访问。在某些情况下，一个对象不适合或者不能直接引用另一个对象，而代理对象可以在客户端和目标对象之间起到中介的作用。
 
   
优点有二：
 
   
     
    
  • 单一职责原则: 面向对象设计中鼓励将不同的职责分布到细粒度的对象中， Proxy 在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念。
    •  
    
  • 开放-封闭原则：代理可以随时从程序中去掉，而不用对其他部分的代码进行修改，在实际场景中，随着版本的迭代可能会有多种原因不再需要代理，那么就可以容易的将代理对象换成原对象的调用
    •  
   
 
   
需要注意的 this
 
   
在热身之前有一个需要注意的小点 - this ：
 
   
    const target = {
        foo() {
            return {
                thisIsTarget: this === target,
                thisIsProxy: this === proxy,
            };
        }
    };
    const handler = {};
    const proxy = new Proxy(target, handler);

    console.log(target.foo()); // {thisIsTarget: true, thisIsProxy: false}
    console.log(proxy.foo()); // {thisIsTarget: false, thisIsProxy: true}
复制代码
 
   
通常情况下，通过 Proxy 中的 this 来调用方法或者获取/设置属性没什么问题，因为最终还是会被拦截到走到原始对象上，但是如果是本身用 this 进行骚操作或是有些内置方法需要 this 指向正确就需要额外注意了
 
   
     
    
  1. 对 this 使用骚操作需要额外注意
    2.  
   
 
   
    const _name = new WeakMap();
    class Person {
        constructor(name) {
            _name.set(this, name);
        }
        get name() {
            return _name.get(this);
        }
    }

    const juanni = new Person('Juanni');
    const proxy = new Proxy(juanni, {});
    console.log(juanni.name); // 'juanni'
    console.log(proxy.name); // undefined
复制代码
 
   
     
    
  1. 内置方法依赖 this
    2.  
   
 
   
    const target = new Date();
    const handler = {};
    const proxy = new Proxy(target, handler);

    // 依赖 this 导致报错
    proxy.getDate(); // this is not a Date object.

    // 修正方案
    const handler = {
        get(target, propKey, receiver) {
            if (propKey === 'getDate') {
                return target.getDate.bind(target);
            }
            return Reflect.get(target, propKey, receiver);
        },
    };
    const proxy = new Proxy(new Date('2020-12-24'), handler);
    proxy.getDate(); // 24
复制代码
 
   
热身
 
   
首先让我们简单热身一下，看一个简单的：假设我们有一个函数tracePropAccess(obj, propKeys) ，只要设置或获得了 obj 的在 propKeys 的属性，就会被记录下来。
 
   
由于这个是简单的热身 demo，因此就直接给出使用 defineProperty 和 Proxy 完成的代码来供对比
 
   
// ES5
    function tracePropAccess(obj, propKeys) {
        const propData = Object.create(null);
        propKeys.forEach(function (propKey) {
            propData[propKey] = obj[propKey];
            Object.defineProperty(obj, propKey, {
                get: function () {
                    console.log(`GET ${propKey}`);
                    return propData[propKey];
                },
                set: function (value) {
                    console.log(`SET ${propKey} = ${value}`);
                    propData[propKey] = value;
                },
            });
        });
        return obj;
    }

    class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        toString() {
            return `Point( ${this.x} , ${this.y} )`;
        }
    }
    p = tracePropAccess(new Point(7), ['x', 'y']);
    p.x // GET x
    p.x = 666 // SET x = 666
    p.toString()
    // GET x
    // GET y
复制代码
 
   
// ES6 with Proxy
    function tracePropAccess(obj, propKeys) {
        const propKeySet = new Set(propKeys);
        return new Proxy(obj, {
            get(target, propKey, receiver) {
                if (propKeySet.has(propKey)) {
                    console.log(`GET ${propKey}`);
                }
                return Reflect.get(target, propKey, receiver);
            },
            set(target, propKey, value, receiver) {
                if (propKeySet.has(propKey)) {
                    console.log(`SET ${propKey} = ${value}`);
                }
                return Reflect.set(target, propKey, value, receiver);
            },
        });
    }

    class Point {
        constructor(x, y) {
            this.x = x;
            this.y = y;
        }
        toString() {
            return `Point( ${this.x} , ${this.y} )`;
        }
    }
    p = tracePropAccess(new Point(7), ['x', 'y']);
    p.x // GET x
    p.x = 666 // SET x = 666
    p.toString()
    // GET x
    // GET y
复制代码
 
   
负数组索引
 
   
隔壁 python 等都可以通过负数索引访问到数组倒数第 N 个元素，现在我们有了一种新方法直接实现这一特性：
 
   
    function createArray(array) {
        if(!Array.isArray(array)) {
            throw Error('must be an array');
        }
        const handler = {
            get(target, propKey, receiver) {
                const index = Number(propKey);
                if (index < 0) {
                    propKey = String(target.length + index);
                }
                return Reflect.get(target, propKey, receiver);
            }
        };
        return new Proxy(array, handler);
    }
    const arr = createArray(['a', 'b', 'c']);
    console.log(arr[-1]); // c
复制代码
 
   
拦截调用
 
   
对于方法调用没有单一操作可以进行拦截，因为方法调用被视为两个独立的操作：首先使用 get 检索函数，然后调用该函数。
 
   
const obj = {
    multiply(x, y) {
        return x * y;
    },
    squared(x) {
        return this.multiply(x, x);
    },
};

function traceMethodCalls(obj) {
    const handler = {
        get(target, propKey, receiver) {
            const origMethod = target[propKey];
            return function (...args) {
                const result = origMethod.apply(this, args);
                console.log(propKey + JSON.stringify(args)
                    + ' -> ' + JSON.stringify(result));
                return result;
            };
        }
    };
    return new Proxy(obj, handler);
}
const tracedObj = traceMethodCalls(obj);

console.log(tracedObj.multiply(2,7));
// multiply[2,7] -> 14
// test.js:25 14
console.log(tracedObj.squared(9));
// multiply[9,9] -> 81
// test.js:16 squared[9] -> 81
// test.js:26 81
复制代码
 
   
我们可以看见即使 this 指向了 Proxy 在原始对象内部的方法调用(如 this.multiply(x, x) )也能被拦截到
 
   
单例模式
 
   
function singleton(func) {
    let instance,
        handler = {
            construct: function (target, args) {
                if (!instance) {
                    instance = new func();
                }
                return instance;
            }
        };
    return new Proxy(func, handler);
}
复制代码
 
   
让某个属性彻底消失
 
   
     
    
  • Reflect.has 、Object.hasOwnProperty 、Object.prototype.hasOwnProperty 、 in 运算符全部使用了 [[HasProperty]]，可以通过 has 拦截。
    •  
    
  • Object.keys 、 Object.getOwnPropertyNames , Object.entrie 都使用了 [[OwnPropertyKeys]]，可以通过 ownKeys 拦截。
    •  
    
  • Object.getOwnPropertyDescriptor 使用了 [[GetOwnProperty]]可以通过 getOwnPropertyDescriptor 拦截。
    •  
   
 
   
因此我们可以写出如下代码彻底让某个属性彻底消失掉
 
   
function hideProperty(object, ...propertiesToHide) {
    const proxyObject = new Proxy(object, {
        has(object, property) {
            if (propertiesToHide.indexOf(property) != -1) {
                return false;
            }
            return Reflect.has(object, property);
        },
        ownKeys(object) {
            return Reflect.ownKeys(object).filter(
                (property) => propertiesToHide.indexOf(property) == -1
            );
        },
        getOwnPropertyDescriptor(object, property) {
            if (propertiesToHide.indexOf(property) != -1) {
                return undefined;
            }
            return Reflect.getOwnPropertyDescriptor(object, property);
        }
    });
    return proxyObject;
}
复制代码
 
   
其他
 
   
这里还有很多可以用 Proxy 来实现的，比如：
 
   
     
    
  • 类型校验 
     
       
      
    • 剥离校验逻辑
      •  
     
    •  
    
  • 私有变量 
     
       
      
    • 通过使用 has, ownKeys , getOwnPropertyDescriptor 和 get, set 来让属性变成私有属性
      •  
     
    •  
    
  • 数据绑定
    •  
    
  • 缓存代理
    •  
    
  • 验证代理
    •  
    
  • 图片懒加载
    •  
    
  • 合并请求
    •  
    
  • 更多有趣的作品可以查看 awesome-es2015-proxy
    •  
   
 
   
参考
 
   
     
    
  • Proxy
    •  
    
  • [译]ES6 中的元编程：第二部分 —— 反射（Reflect）
    •  
    
  • [译]ES6 中的元编程： 第三部分 —— 代理（Proxies）
    •  
    
  • ECMAScript® 2015 Language Specification
    •  
    
  • Metaprogramming with proxies
    •  
    
  • 抱歉，学会 Proxy 真的可以为所欲为
    •  
   
 
   
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(Proxy详解，运用与Mobx)

        

            

                
    
                    
  • 斤斤计较的婚姻到底有多难？
                        白心之岂必有为

                        
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
    
                    
    • 
                    
  • QQ群采集助手，精准引流必备神器
                        2401_87347160
其他经验分享
                        
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
    
                    
    • 
                    
  • 机器学习与深度学习间关系与区别
                        ℒℴѵℯ心·动ꦿ໊ོ꫞
人工智能学习深度学习python
                        
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
    
                    
    • 
                    
  • 随笔 | 仙一般的灵气
                        海思沧海

                        
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
    
                    
    • 
                    
  • 一百九十四章. 自相矛盾
                        巨木擎天

                        
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
    
                    
    • 
                    
  • 微服务下功能权限与数据权限的设计与实现
                        nbsaas-boot
微服务java架构
                        
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
    
                    
    • 
                    
  • 学点心理知识，呵护孩子健康
                        静候花开_7090

                        
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
    
                    
    • 
                    
  • 《投行人生》读书笔记
                        小蘑菇的树洞

                        
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
    
                    
    • 
                    
  • Long类型前后端数据不一致
                        igotyback
前端
                        
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    
                    
    • 
                    
  • 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码
                        说私域
人工智能小程序
                        
    摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
    
                    
    • 
                    
  • 2021-08-26
                        影幽

                        
    在生活中，女人与男人的感悟往往有所不同。人生最大的舞台就是生活，大幕随时都可能拉开，关键是你愿不愿意表演都无法躲避。在生活中，遇事不要急躁，不要急于下结论，尤其生气时不要做决断，要学会换位思考，大事化小小事化了，把复杂的事情尽量简单处理，千万不要把简单的事情复杂化。永远不要扭曲，别人善意，无药可救。昨天是张过期的支票，明天是张信用卡，只有今天才是现金，要善加利用！执着的攀登者不必去与别人比较自己的
    
                    
    • 
                    
  • 高级编程--XML+socket练习题
                        masa010
java开发语言
                        
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
    
                    
    • 
                    
  • 2018-07-23-催眠日作业-#不一样的31天#-66小鹿
                        小鹿_33

                        
    预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
    
                    
    • 
                    
  • 回溯 Leetcode 332 重新安排行程
                        mmaerd
Leetcode刷题学习记录leetcode算法职场和发展
                        
    重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
    
                    
    • 
                    
  • 每日一题——第九十题
                        互联网打工人no1
C语言程序设计每日一练c语言
                        
    题目：判断子串是否与主串匹配#include#include#include//////判断子串是否在主串中匹配//////主串///子串///boolisSubstring(constchar*str,constchar*substr){intlenstr=strlen(str);//计算主串的长度intlenSub=strlen(substr);//计算子串的长度//遍历主字符串，对每个可能得
    
                    
    • 
                    
  • Python数据分析与可视化实战指南
                        William数据分析
pythonpython数据
                        
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
    
                    
    • 
                    
  • 《庄子.达生9》
                        钱江潮369

                        
    【原文】孔子观于吕梁，县水三十仞，流沫四十里，鼋鼍鱼鳖之所不能游也。见一丈夫游之，以为有苦而欲死也，使弟子并流而拯之。数百步而出，被发行歌而游于塘下。孔子从而问焉，曰：“吾以子为鬼，察子则人也。请问，‘蹈水有道乎’”曰：“亡，吾无道。吾始乎故，长乎性，成乎命。与齐俱入，与汩偕出，从水之道而不为私焉。此吾所以蹈之也。”孔子曰：“何谓始乎故，长乎性，成乎命？”曰：“吾生于陵而安于陵，故也；长于水而安于
    
                    
    • 
                    
  • Python中os.environ基本介绍及使用方法
                        鹤冲天Pro
#Pythonpython服务器开发语言
                        
    文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi
    
                    
    • 
                    
  • 水泥质量纠纷案代理词
                        徐宝峰律师

                        
    贵州领航建设有限公司诉贵州纳雍隆庆乌江水泥有限公司产品质量纠纷案代理词尊敬的审判长、审判员：贵州千里律师事务所接受被告贵州纳雍隆庆乌江水泥有限公司的委托，指派我担任其诉讼代理人，参加本案的诉讼活动。下面，我结合本案事实和相关法律规定发表如下代理意见，供合议庭评议案件时参考：原告应当举证证明其遭受的损失与被告生产的水泥质量的因果关系。首先水泥是一种粉状水硬性无机胶凝材料。加水搅拌后成浆体，能在空气中
    
                    
    • 
                    
  • Goolge earth studio 进阶4——路径修改与平滑
                        陟彼高冈yu
Googleearthstudio进阶教程旅游
                        
    如果我们希望在大约中途时获得更多的城市鸟瞰视角。可以将相机拖动到这里并创建一个新的关键帧。camera_target_clip_7EarthStudio会自动平滑我们的路径，所以当我们通过这个关键帧时，不是一个生硬的角度，而是一个平滑的曲线。camera_target_clip_8路径上有贝塞尔控制手柄，允许我们调整路径的形状。右键单击，我们可以选择“平滑路径”，这是默认的自动平滑算法，或者我们可
    
                    
    • 
                    
  • 18-115 一切思考不能有效转化为行动，都TM是扯淡！
                        成长时间线

                        
    7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的
    
                    
    • 
                    
  • 山东大学小树林支教调研团青青仓木队——翟晓楠
                        山东大学青青仓木队

                        
    过了半年，又一次启程，又一次回到支教的初心之地。比起上一次的试探与不安，我更多了一丝稳重与熟练。心境、处境也都随着半个学期的过去而变得不同，半个学期中，身体上的，心理上的，太多的逆境让我变得步履维艰，曲曲折折，弯弯绕绕，我仿佛打不起精神，没有胃口，没有动力。感觉走的不顺畅的时候，支教这个旅程，给了我力量。自告奋勇承担起队长这一职务的我，从组织时的复杂和困难的经历，协调各种问题，从无到有，和校长和队
    
                    
    • 
                    
  • 直返最高等级与直返APP：无需邀请码的返利新体验
                        古楼

                        
    随着互联网的普及和电商的兴起，直返模式逐渐成为一种流行的商业模式。在这种模式下，消费者通过购买产品或服务，获得一定的返利，并可以分享给更多的人。其中，直返最高等级和直返APP是直返模式中的重要概念和工具。本文将详细介绍直返最高等级的概念、直返APP的使用以及与邀请码的关系。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，
    
                    
    • 
                    
  • 四章-32-点要素的聚合
                        彩云飘过

                        
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 2020-04-12每天三百字之连接与替代
                        冷眼看潮

                        
    不知道是不是好为人师，有时候还真想和别人分享一下我对某些现象的看法或者解释。人类社会不断发展进步的过程，就是不断连接与替代的过程。人类发现了火并应用火以后，告别了茹毛饮血的野兽般的原始生活（火烧、烹饪替代了生食）人类用石器代替了完全手工，工具的使用使人类进步一大步。类似这样的替代还有很多，随着科技的发展，有更多的原始的事物被替代，代之以更高效、更先进的技术。在近现代，汽车替代了马车，高速公路和铁路
    
                    
    • 
                    
  • 探索OpenAI和LangChain的适配器集成：轻松切换模型提供商
                        nseejrukjhad
langchaineasyui前端python
                        
    #探索OpenAI和LangChain的适配器集成：轻松切换模型提供商##引言在人工智能和自然语言处理的世界中，OpenAI的模型提供了强大的能力。然而，随着技术的发展，许多人开始探索其他模型以满足特定需求。LangChain作为一个强大的工具，集成了多种模型提供商，通过提供适配器，简化了不同模型之间的转换。本篇文章将介绍如何使用LangChain的适配器与OpenAI集成，以便轻松切换模型提供商
    
                    
    • 
                    
  • 利用Requests Toolkit轻松完成HTTP请求
                        nseejrukjhad
http网络协议网络python
                        
    RequestsToolkit的力量：轻松构建HTTP请求Agent在现代软件开发中，API请求是与外部服务交互的核心。RequestsToolkit提供了一种便捷的方式，帮助开发者构建自动化的HTTP请求Agent。本文旨在详细介绍RequestsToolkit的设置、使用和潜在挑战。引言RequestsToolkit是一个强大的工具包，可用于构建执行HTTP请求的智能代理。这对于想要自动化与外
    
                    
    • 
                    
  • 数组去重
                        好奇的猫猫猫

                        
    整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
    
                    
    • 
                    
  • 春季养肝正当时
                        dxn悟

                        
    重温快乐2023年2月4日立春。春天来了，春暖花开，小鸟欢唱，那在这样的季节我们如何养肝呢？自然界的春季对应中医五行的木，人体五脏肝属木，“木曰曲直”，是以树干曲曲直直地向上、向外伸长舒展的生发姿态，来形容具有生长、升发、条达、舒畅等特征的食物及现象。根据中医天人相应的理念，肝五行属木，喜条达，主疏泄，与春天相应，所以春天最适合养肝。养肝首先要少生气，因为肝喜条达恶抑郁。人体五志肝为怒，生气发怒最
    
                    
    • 
                                
  • java类加载顺序
                                    3213213333332132
java
                                    
    package com.demo;

/**
 * @Description 类加载顺序
 * @author FuJianyong
 * 2015-2-6上午11:21:37
 */
public class ClassLoaderSequence {
	
	String s1 = "成员属性"; 
	
	static String s2 = "
    
                                
    • 
                                
  • Hibernate与mybitas的比较
                                    BlueSkator
sqlHibernate框架ibatisorm
                                    
    第一章     Hibernate与MyBatis 
Hibernate 是当前最流行的O/R mapping框架，它出身于sf.net，现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。 
MyBatis 参考资料官网：http:
    
                                
    • 
                                
  • php多维数组排序以及实际工作中的应用
                                    dcj3sjt126com
PHPusortuasort
                                    
    自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8&q
    
                                
    • 
                                
  • DOM改变字体大小
                                    周华华
前端
                                    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml&q
    
                                
    • 
                                
  • c3p0的配置
                                    g21121
c3p0
                                    
    c3p0是一个开源的JDBC连接池，它实现了数据源和JNDI绑定，支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是：http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。 
以在spring中配置dataSource为例： 
<!-- spring加载资源文件 -->
<bean name="prope
    
                                
    • 
                                
  • Java获取工程路径的几种方法
                                    510888780
java
                                    
    第一种： 
File f = new File(this.getClass().getResource("/").getPath()); 
System.out.println(f); 
结果: 
C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin 
获取当前类的所在工程路径; 
如果不加“
    
                                
    • 
                                
  • 在类Unix系统下实现SSH免密码登录服务器
                                    Harry642
免密ssh
                                    
    1.客户机 
    (1)执行ssh-keygen -t rsa -C "[email protected]"生成公钥，xxx为自定义大email地址 
    (2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上，xxx为服务器地址 
    (3)执行cat
    
                                
    • 
                                
  • Java新手入门的30个基本概念一
                                    aijuans
javajava 入门新手
                                    
    在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。　　Java概述:　　目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合
    
                                
    • 
                                
  • Memcached for windows 简单介绍
                                    antlove
javaWebwindowscachememcached
                                    
    1. 安装memcached server 
a. 下载memcached-1.2.6-win32-bin.zip 
b. 解压缩，dos 窗口切换到 memcached.exe所在目录，运行memcached.exe -d install 
c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo
    
                                
    • 
                                
  • 数据库对象的视图和索引
                                    百合不是茶
索引oeacle数据库视图
                                    
      
视图 
  
  视图是从一个表或视图导出的表，也可以是从多个表或视图导出的表。视图是一个虚表，数据库不对视图所对应的数据进行实际存储，只存储视图的定义，对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图 
  
    为什么oracle需要视图; 
   &
    
                                
    • 
                                
  • Mockito(一) --入门篇
                                    bijian1013
持续集成mockito单元测试
                                    
            Mockito是一个针对Java的mocking框架，它与EasyMock和jMock很相似，但是通过在执行后校验什么已经被调用，它消除了对期望 行为（expectations）的需要。其它的mocking库需要你在执行前记录期望行为（expectations），而这导致了丑陋的初始化代码。 
 &nb
    
                                
    • 
                                
  • 精通Oracle10编程SQL(5)SQL函数
                                    bijian1013
oracle数据库plsql
                                    
    /*
 * SQL函数
*/

--数字函数
--ABS(n):返回数字n的绝对值
declare
  v_abs number(6,2);
begin
  v_abs:=abs(&no);
  dbms_output.put_line('绝对值：'||v_abs);
end;

--ACOS(n):返回数字n的反余弦值，输入值的范围是-1~1，输出值的单位为弧度
    
                                
    • 
                                
  • 【Log4j一】Log4j总体介绍
                                    bit1129
log4j
                                    
    Log4j组件：Logger、Appender、Layout 
  
Log4j核心包含三个组件：logger、appender和layout。这三个组件协作提供日志功能： 
 
 日志的输出目标 
 日志的输出格式 
  日志的输出级别(是否抑制日志的输出) 
  logger继承特性 
A logger is said to be an ancestor of anothe
    
                                
    • 
                                
  • Java IO笔记
                                    白糖_
java
                                    
    	public static void main(String[] args) throws IOException {
		//输入流
		InputStream in = Test.class.getResourceAsStream("/test");
		InputStreamReader isr = new InputStreamReader(in);
		Bu
    
                                
    • 
                                
  • Docker 监控
                                    ronin47
docker监控
                                    
             
目前项目内部署了docker，于是涉及到关于监控的事情，参考一些经典实例以及一些自己的想法，总结一下思路。 1、关于监控的内容 监控宿主机本身 
监控宿主机本身还是比较简单的，同其他服务器监控类似，对cpu、network、io、disk等做通用的检查，这里不再细说。 
额外的，因为是docker的
    
                                
    • 
                                
  • java-顺时针打印图形
                                    bylijinnan
java
                                    
    一个画图程序 要求打印出： 
 

1.int i=5;   
2.1  2  3  4  5  
3.16 17 18 19 6  
4.15 24 25 20 7  
5.14 23 22 21 8  
6.13 12 11 10 9  
7.  
8.int i=6  
9.1  2  3  4  5   6  
10.20 21 22 23 24  7  
11.19
    
                                
    • 
                                
  • 关于iReport汉化版强制使用英文的配置方法
                                    Kai_Ge
iReport汉化英文版
                                    
    对于那些具有强迫症的工程师来说，软件汉化固然好用，但是汉化不完整却极为头疼，本方法针对iReport汉化不完整的情况，强制使用英文版，方法如下： 
在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数，即可变为英文版。   
# ${HOME} will be replaced by user home directory accordin
    
                                
    • 
                                
  • [并行计算]论宇宙的可计算性
                                    comsci
并行计算
                                    
     
 
      现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识...... 
 
      那么,这种概念让我们推论出一个结论 
 
 
    &nb
    
                                
    • 
                                
  • 用OpenGL实现无限循环的coverflow
                                    dai_lm
androidcoverflow
                                    
    网上找了很久，都是用Gallery实现的，效果不是很满意，结果发现这个用OpenGL实现的，稍微修改了一下源码，实现了无限循环功能 
 
源码地址： 
https://github.com/jackfengji/glcoverflow 
 
 

public class CoverFlowOpenGL extends GLSurfaceView implements
		GLSurfaceV
    
                                
    • 
                                
  • JAVA数据计算的几个解决方案1
                                    datamachine
javaHibernate计算
                                    
    老大丢过来的软件跑了10天，摸到点门道，正好跟以前攒的私房有关联，整理存档。 
 
-----------------------------华丽的分割线------------------------------------- 
 
    数据计算层是指介于数据存储和应用程序之间，负责计算数据存储层的数据，并将计算结果返回应用程序的层次。J 
 &nbs
    
                                
    • 
                                
  • 简单的用户授权系统,利用给user表添加一个字段标识管理员的方式
                                    dcj3sjt126com
yii
                                    
    怎么创建一个简单的(非 RBAC)用户授权系统 
通过查看论坛，我发现这是一个常见的问题，所以我决定写这篇文章。 
本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。 数据库 
首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限 扩展 CWebUser 类 
在配置文件(一般为 protecte
    
                                
    • 
                                
  • 未选之路
                                    dcj3sjt126com
诗
                                    
    作者:罗伯特*费罗斯特 
  
黄色的树林里分出两条路, 
可惜我不能同时去涉足, 
我在那路口久久伫立, 
我向着一条路极目望去, 
直到它消失在丛林深处. 
  
但我却选了另外一条路, 
它荒草萋萋,十分幽寂; 
显得更诱人,更美丽, 
虽然在这两条小路上, 
都很少留下旅人的足迹. 
  
那天清晨落叶满地, 
两条路都未见脚印痕迹. 
呵,留下一条路等改日再
    
                                
    • 
                                
  • Java处理15位身份证变18位
                                    蕃薯耀
18位身份证变15位15位身份证变18位身份证转换
                                    
      
15位身份证变18位，18位身份证变15位 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 
蕃薯耀 201
    
                                
    • 
                                
  • SpringMVC4零配置--应用上下文配置【AppConfig】
                                    hanqunfeng
springmvc4
                                    
    从spring3.0开始，Spring将JavaConfig整合到核心模块，普通的POJO只需要标注@Configuration注解，就可以成为spring配置类，并通过在方法上标注@Bean注解的方式注入bean。 
  
Xml配置和Java类配置对比如下： 
applicationContext-AppConfig.xml 
  
<!-- 激活自动代理功能 参看：
    
                                
    • 
                                
  • Android中webview跟JAVASCRIPT中的交互
                                    jackyrong
JavaScripthtmlandroid脚本
                                    
      在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面举例说明之: 
 
1 JAVASCRIPT脚本调用android程序 
   要在webview中,调用addJavascriptInterface(OBJ,int
    
                                
    • 
                                
  • 8个最佳Web开发资源推荐
                                    lampcy
编程Web程序员
                                    
    Web开发对程序员来说是一项较为复杂的工作，程序员需要快速地满足用户需求。如今很多的在线资源可以给程序员提供帮助，比如指导手册、在线课程和一些参考资料，而且这些资源基本都是免费和适合初学者的。无论你是需要选择一门新的编程语言，或是了解最新的标准，还是需要从其他地方找到一些灵感，我们这里为你整理了一些很好的Web开发资源，帮助你更成功地进行Web开发。 
这里列出10个最佳Web开发资源，它们都是受
    
                                
    • 
                                
  • 架构师之面试------jdk的hashMap实现
                                    nannan408
HashMap
                                    
    1.前言。 
  如题。 
2.详述。 
  (1)hashMap算法就是数组链表。数组存放的元素是键值对。jdk通过移位算法（其实也就是简单的加乘算法），如下代码来生成数组下标(生成后indexFor一下就成下标了）。 
 

static int hash(int h) 
{ 
    h ^= (h >>> 20) ^ (h >>>
    
                                
    • 
                                
  • html禁止清除input文本输入缓存
                                    Rainbow702
html缓存input输入框change
                                    
    多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。    
如果不想让浏览器缓存input的值，有2种方法： 
方法一： 在不想使用缓存的input中添加 autocomplete="off";  
<input type="text" autocomplete="off" n
    
                                
    • 
                                
  • POJO和JavaBean的区别和联系
                                    tjmljw
POJOjava beans
                                    
    POJO 和JavaBean是我们常见的两个关键字，一般容易混淆，POJO全称是Plain Ordinary Java Object / Pure Old Java Object，中文可以翻译成：普通Java类，具有一部分getter/setter方法的那种类就可以称作POJO，但是JavaBean则比 POJO复杂很多， Java Bean 是可复用的组件，对 Java Bean 并没有严格的规
    
                                
    • 
                                
  • java中单例的五种写法
                                    liuxiaoling
java单例
                                    
    /**
 * 单例模式的五种写法：
 * 1、懒汉
 * 2、恶汉
 * 3、静态内部类
 * 4、枚举
 * 5、双重校验锁
 */
/**
 * 五、 双重校验锁，在当前的内存模型中无效
 */
class LockSingleton
{

    private volatile static LockSingleton singleton;

    pri
    
                                
    •