funkcje typu "chaining"

0

Cześć,

zmagam się z problemem stworzenia rozwiązania które wywołaniem będzie przypominało zachowanie jQuery, chodzi o wywołanie funkcji powiedzmy :

 $$('sekektor').attr('data-counter')

czy ktoś mógłby mnie nakierować jak zrobić , by funkcja $$ zwracała element do funkcji attr ? napisałem już sporo funkcji z prototypami, próbowałem wywoływać funkcję $$ tak by tworzyła nowy obiekt innej funkcji i go zwracała, o ile samo $$ zwraca bez problemu obiekt, o tyle wywołanie jak powyżej kończy się przy każdej mojej próbie tak :

Uncaught TypeError: $$(...).attr is not a function

nie wklejam moich wypocin, męczę temat już kilka dni i nawet nie mam pojęcia aktualnie który mój tok myślenia jest najbliższy rozwiązaniu.

Pozdrawiam
Niespełniony amator JS

0
<div id="output"></div>
class Element {
  attr(arg) {
    return "some result";
  }
}

function $$(arg) {
  return new Element();
}

var div = document.getElementById('output');
div.innerHTML = $$('sekektor').attr('data-counter')

https://jsfiddle.net/g1zp4uzh/

2

Lub bez użycia klasy:

<img src="http://placehold.it/50/ff8888" />
<img src="http://placehold.it/50/88ff88" />
function $$(selector) {
  const elements = document.querySelectorAll(selector)
  
  return {
    attr(name) {
      return [...elements].map(
        element => element.getAttribute(name)
      )
    },
    
    continueChain() {
      // do some side effect, for example:
      console.log('Messing with some state')
      return this
    },
  }
}

const sources = $$('img').continueChain().continueChain().attr('src')

console.log({ sources });

http://codepen.io/anon/pen/vyqaEa?editors=1111

Czy nawet bez użycia this (ja tak robię):
http://codepen.io/anon/pen/vyqaOz?editors=1111

Ogólnie zwracasz z funkcji obiekt z metodami, jeśli metoda zwraca this / zmienną zawierającą ten obiekt to możesz dalej chainować metody, jeśli funkcja zwraca wartość to łańcuch się kończy, przynajmniej dla tego obiektu - możesz dalej chainować metody dla zwracanego obiektu / typu prostego, np:

const sources = $$('img')
  .continueChain()
  .continueChain()
  .attr('src')
  .filter(source => source.startsWith('http://'))
  .map(source => source.slice(7))
  // etc...

1 użytkowników online, w tym zalogowanych: 0, gości: 1