創建jQuery原型集合

Question

我需要在已經存在的jQuery元素集合上初始化某種原型。主要的問題是，原型應該是隻能訪問內該集合，並通過內置的jQuery功能，如.find()上收集或一些子對象該集合的內部，例如生產要素：

var $a = $('a'); 
$a.__proto__.foo/*some magic over here*/ = function(){ alert('foo!'); }; 
$a.foo();   //should show alert('foo!') 
$a.find('b').foo(); //should produce the same action 
$('a').foo();  //should produce an error (method not found) 

如果使用$a.__proto__（如上例），則訪問jQuery.prototype，因此該jQuery集合之外的所有新元素（例如$('a')）都准許訪問.foo()方法。這種行爲在問題陳述上是不可接受的。

這實際上可能嗎？

Answer 1

好的，這是事情，我有一個相當複雜的ES6解決方案，所以我不能很深入地解釋它，但如果你有一些問題，請繼續。

var wrap = (function wrapper() { 
    var store = {}; 

    function wrap(fn) { 
    return new Proxy(fn, { 
     apply(target, thisArg, argumentsList) { 
     var result = Reflect.apply(target, thisArg, argumentsList); 

     // `jQuery(...)` returns a "rich" object that always contain `.length` 
     if (result.length > 0) { 
      result = new Proxy(result, { 
      get(target, propertyKey, receiver) { 
       var value = Reflect.get(target, propertyKey, receiver); 

       if (Object.keys(store).includes(propertyKey)) { 
       value = store[propertyKey]; 
       } 

       return value; 
      }, 

      set(target, propertyKey, value, receiver) { 
       // TODO: use `Reflect.set(), somehow` 
       // return Reflect.set(store, propertyKey, value, receiver); 

       return (store[propertyKey] = value); 
      }, 
      }); 
     } 

     return result; 
     } 
    }); 
    } 

    return wrap; 
})(); 

var $ = wrap(jQuery); 
$.prototype.find = wrap(jQuery.prototype.find); // TODO: implement recursively in `wrap()` 


var x = $('div'); 
var xx = x.find('div'); 
var xxx = x.find('divvv'); 

xx.foo = 123; 

console.log(x.foo); // 123 
console.log(xx.foo); // 123 
console.log(xxx.foo); // undefined