Jak napisać wtyczkę javascript bez jQuery

Question

Pisanie wtyczek z jQuery jest stosunkowo łatwe, po prostu użyj $ .fn i jesteś na dobrej drodze. Podobnie jak:

$.fn.analyse = function() { 
... 
} 

Ale co, jeśli nie możesz używać jQuery?

Powiedzmy, że chcemy, aby móc użyć następującego kodu:

document.querySelector("#mydiv").analyse(); 

mogę iść o nim tak:

Object.prototype.analyse = function() { 
... 
} 

Ale z tego co rozumiem to jest mile widziana!

Answer 1

Oto coś na początek:

var proto_methods = { 
    analyse: function() { 
     var node = this.node; 

     // ... 
    } 
}, wrap, _wrap; 

_wrap = function(selector) { this.node = document.querySelector(selector); }; 
_wrap.prototype = proto_methods; 

wrap = function(selector) { 
    return new _wrap(selector); 
}; 

Używaj go tak:

wrap("#mydiv").analyse(); 

Użyj tego jeśli chcesz dodać więcej wtyczek (i jest to trochę bardziej zorientowany obiektowo):

var pack = { 
    binder: [{}] 
}; 

pack.query_bind = function(bound) { 
    if (bound) pack.binder[1] = bound; 
}; 

pack.fn = function(attributes) { 
    for (var i in attributes) pack.binder[0][i] = attributes[i]; 
}; 

var _wrap = function(selector) { 
    this.node = /^(#|.)\w+/.test(selector) ? pack.binder[1](selector) : {}; 
}; 

_wrap.prototype = pack.binder[0]; 

var wrap = function(selector) { 
    pack.query_bind(document.querySelector.bind(document)); 
    return new _wrap(selector); 
}; 

wrap.fn = pack.fn; 

wrap.fn({ 
    cool: function() {}, 
    nice: function() {} 
}); 

wrap('#mydiv').cool(); 

można zadzwonić wrap.fn w dowolnym momencie i prototyp zostanie zaktualizowany.

Należy jednak pamiętać, że to nie jest prawdziwy zamiennik jQuery jak istnieje wiele rzeczy, które nie zostały uwzględnione w tym kodzie. Funkcja wrap nie jest tak zaawansowana i użyteczna, jak jQuery's $ na wiele sposobów.

Mam nadzieję, że to pomoże.

Answer 2

Właśnie napisałem schemat. Nie ma własnej logiki selektora, ponieważ jest przeznaczony dla biblioteki na D3.js, który ma już własny silnik selektora. https://gist.github.com/turboMaCk/34bde8e744f5921be0c4