from jQuery to es6 - how to write simple plugin?

Question

I watched Ryan Christiani's tutorials but I can't use it in practice.. :/

For example how to write this code in es6? I would like to know the best practices (class, events etc.)

var defaultOptions = {
    activeClass:    '.active',
    tabClass:       '.tab-item'

};

function changeParam(el) {
    $(defaultOptions.tabClass).removeClass(defaultOptions.activeClass);
    $('#' + $(el).attr('data-tab')).addClass(defaultOptions.activeClass);
}

$(el).on('click', function(){
    changeParam($(this));
});

Thx.

How come your title says that you want to know how to write a simple login but there is no mention of that in the question? — Luca Kiebel, Jul 27 '17 at 12:49

score 1 · Answer 1 · answered Jul 27 '17 at 13:58

1

This would work as ES6 code:

var defaultOptions = {
    activeClass  : '.active',
    tabClass     : '.tab-item'
};

function changeParam(el) {
   let element = document.querySelector(defaultOptions.tabClass);
   element.className = element.className.replace(defaultOptions.activeClass,"");
   el.className += ' ' + defaultOptions.activeClass;
}

el.addEventListener('click', function(event){
    changeParam(event.currentTarget);
});

By the way, your code doesn't have anything to do with classes. You are only attaching a handler to an event.

answered Jul 27 '17 at 13:58

jmtalarn

1,513
1
13
16

When should I use classes. Can you give me example? – JanuszFrontEnd'u Jul 27 '17 at 14:36
Well, you should start learning about what a class represents. It's all based in the concepts of Object Oriented Programming (OOP) https://en.wikipedia.org/wiki/Object-oriented_programming Then, Javascript was a bit tricky trying to apply all this concepts because it is based in prototyping delegation instead of the classic use of Objects inheritance you can see on languages like Java. ES6 introduced, as the following article says http://www.techiejs.com/Blog/Post/Understanding-Classes-in-EcmaScript-6 , "sugar" over all these concepts and provided a more like Java way to declare classes. – jmtalarn Jul 27 '17 at 15:16
So in your case, and what I suppose you are trying to do, you should create a class of a clickable object, and when the click event is produced over the element you execute your changeParam code. – jmtalarn Jul 27 '17 at 15:20

from jQuery to es6 - how to write simple plugin?

1 Answers1