Как инициализировать плагин?

Question

[Max Ba]

Нашел два типа создания плагинов. Причем оба способа вроде сильно отличаются.
Наведите на путь истинный)

//этот блок обязательно размещается на странице.
<div id="block1"></div>

//способ 1 (немного необычная для меня инициализация)

window.onload = function(e){
  
  new myPlugin({
    id: "#block1",
    //params
  });

  function myPlugin(param){
    this.obj = document.getElementById(param.id);
    var param1 = 100;
    var param2 = 200;
    this.method2 = function(){
    },
    this.method2 = function(){
    }
  }

}

//способ 2 (причем, я не знаю, как этот объект привязать к #block1)

var myPlugin = {
  param1: 100,
  param2: 200,
  method1: function(){
  },
  method2: function(){
  }
}

Может есть простая статья на эту тему? Всё, что попадалось мне, непонятно. Отсюда и вопрос.

Comments

[Max Ba]

Мне больше нравится способ 2, тк как-то легче воспринимается. Но как его привязать к диву block1 после загрузки страницы, не совсем понятно.

Answer 1

[Max Ba]

<div id="gallery1">
  <input type="button" class="btn1" value="-">
  <input type="button" class="btn2" value="+">
  <div class="result">0</div>
</div>

<div id="gallery2">
  <input type="button" class="btn1" value="-">
  <input type="button" class="btn2" value="+">
  <div class="result">0</div>
</div>

function Slider(el){
    
this.main = document.getElementById(el.id);
this.speed = 0;
this.btn1 = this.main.getElementsByClassName('btn1')[0];
this.btn2 = this.main.getElementsByClassName('btn2')[0];
this.result = this.main.getElementsByClassName('result')[0];

this.updateResult = function(){
  this.result.innerHTML = this.speed;
};

this.method1 = function(){
  if(this.speed > 0){
    this.speed--;
  }
  this.updateResult();
};

this.method2 = function(){
  this.speed++;
  this.updateResult();
};

this.btn1.addEventListener('click', this.method1.bind(this));
this.btn2.addEventListener('click', this.method2.bind(this));

}

new Slider({
  id: "gallery1"
});

new Slider({
  id: "gallery2"
});

Answer 2

[Шохрух Шаймардонов]

Вот результат беглого гуглинга.

Comments

[Max Ba]

Способ 1 оттуда.

Вот еще и третий способ нашел и совсем запутался((

(function(window) {
   window.MyPlugin = function(element) {
      this.element = element;
   }
   myPlugin.prototype.myMethod = function() {
      //...
   }
})(window);


var elem = document.getElementById('elem');
var test = new MyPlugin(elem);
test.myMethod();

[Ihor Bratukh]

Max Ba, это аналог записи первого способа. В первом вы вешали методы на this, а здесь на прототип функции но результат тот же.

[Шохрух Шаймардонов]

Max Ba, не понятно. В чем вы запутались? Вам нужен ментор/наставник? Или вы начали писать код и наткнулись на ошибку/незнакомую вам логику кода?

[Max Ba]

Шохрух Шаймардонов, да я хотел написать свой плагин, чтобы JS работал строго в рамках одного этого блока, и наткнулся на разные способы реализации. Кто-то делает через Классы, кто-то объектами, замыкания. Кароче да, незнакомая мне логика)

[Шохрух Шаймардонов]

Max Ba, вы должны понимать, что в js почти все объект. По сути класс тоже некий объект.
А насчет того, чтобы работал в рамках 1го блока, это вам надо в методах плагина писать.

Пишите желательно в виде классов, выше уже предлагали. Если знакомы с другими языками с парадигмой ооп, то не составит труда понять общее устройство кода, остальное можно гуглить и методом тыка на ошибках делать

[Max Ba]

Шохрух Шаймардонов, я принял решение, делать вот так:

window.onload = function(e){

  new Slider('block1');

  function Slider(el){
    
    this.main = document.getElementById(el);
    this.speed = 0;
    this.btn1 = this.main.getElementsByClassName('btn1')[0];
    this.btn2 = this.main.getElementsByClassName('btn2')[0];
    this.result = this.main.getElementsByClassName('result')[0];

    this.updateResult = function(){
      this.result = innerHTML(this.speed);
    }

    this.btn1.addEventListener('click', function(){
      if(this.speed > 0){
        this.speed--;
      }
      this.updateResult;
    });
    
    this.btn2.addEventListener('click', function(){
      this.speed++;
      this.updateResult;
    });
	
  }
}

Да, не работает пока, доделываю, но сам смысл вроде бы уловил :)

[Шохрух Шаймардонов]

Max Ba, this.result = innerHTML(this.speed);
Замените на
this.result.innerHTML = this.speed

[Max Ba]

Шохрух Шаймардонов, спасибо, а можете подсказать в чем тут проблема?

this.updateResult = function(){
  this.result.innerHTML = this.speed;
},

this.btn2.addEventListener('click', function(){
  this.speed++;
  this.updateResult; //не обновляет информацию в самом HTML. Реакции нет.
  console.log(this.speed);  //выводит NAN.
});

Либо я напутал с this, либо что-то другое.

[Шохрух Шаймардонов]

Max Ba, откуда у вас btNext взялся?

[Max Ba]

Шохрух Шаймардонов, заменил на btn2

[Шохрух Шаймардонов]

Max Ba, и?

[Max Ba]

Шохрух Шаймардонов, не, тут видимо я что-то не так передаю. Вообще не видит свойство внутри метода. Почему-то)))

function Slider(el){
    
this.main = document.getElementById(el),
this.speed = 0,
this.btn1 = this.main.getElementsByClassName('btn1')[0],
this.btn2 = this.main.getElementsByClassName('btn2')[0],
this.result = this.main.getElementsByClassName('result')[0],

this.updateResult = function(){
  this.result.innerHTML = this.speed;
},

this.method1 = function(){
  /*if(this.speed > 0){
    this.speed--;
  }*/
  console.log(this.speed); //undefined
},

this.method2 = function(){
  //this.speed++;
  console.log(this.speed); //undefined
};

this.btn1.addEventListener('click', this.method1);
this.btn2.addEventListener('click', this.method2);

}

new Slider('gallery');

[Шохрух Шаймардонов]

Max Ba, вы методы присваиваете к this. Объявите их как обычную функцию только без ключевого слово function. То что вы сейчас пытаетесь сделать это самый обычный геттер (метод который возвращает значение свойства класса), тем самым выполняя 1 из 3х принципов ООП: инкапсуляцию)

[Max Ba]

Шохрух Шаймардонов, сложно то как( Говорю, хромает грамматика. Второй вариант и был понятней, тк хотя бы синтаксис не сильно запутан. А тут мало того, проблемы с this, так еще и можно запятые вместо ; писать. Прочту еще раз)

[Шохрух Шаймардонов]

Max Ba, правильное решение. Раз вы начали этим методом делать, прочитайте досканально туториал по ссылке, откуда вы брали 1й вариант

[Max Ba]

Шохрух Шаймардонов, спасибо за помощь.

[Шохрух Шаймардонов]

Max Ba, пожалуйста.
З.ы. Либо закройте вопрос, либо укажите решение. Чтобы в будущем люди не проходили мимо, из-за отсутствия решения и не плодили повторно одни и те же вопросы

[Max Ba]

Вот рабочий код.

<div id="gallery1">
  <input type="button" class="btn1" value="-">
  <input type="button" class="btn2" value="+">
  <div class="result">0</div>
</div>

<div id="gallery2">
  <input type="button" class="btn1" value="-">
  <input type="button" class="btn2" value="+">
  <div class="result">0</div>
</div>

function Slider(el){
    
this.main = document.getElementById(el.id);
this.speed = 0;
this.btn1 = this.main.getElementsByClassName('btn1')[0];
this.btn2 = this.main.getElementsByClassName('btn2')[0];
this.result = this.main.getElementsByClassName('result')[0];

this.updateResult = function(){
  this.result.innerHTML = this.speed;
};

this.method1 = function(){
  if(this.speed > 0){
    this.speed--;
  }
  this.updateResult();
};

this.method2 = function(){
  this.speed++;
  this.updateResult();
};

this.btn1.addEventListener('click', this.method1.bind(this));
this.btn2.addEventListener('click', this.method2.bind(this));

}

new Slider({
  id: "gallery1"
});

new Slider({
  id: "gallery2"
});

Не хватало функции bind(this)

[Шохрух Шаймардонов]

Max Ba, раз это решение, то выложите ваш комментарий как ответ и отметьте как решение. чтобы другие смогли сразу увидеть решение. Надеюсь, смог хоть как-то помочь

Answer 3

[Ihor Bratukh]

Первый вариант более предпочтительный и лучше через class если позволяет поддержка. Но если хочется второй вариант, чтобы понимать что и как, то используйте замыкание:

function myPlugin(param) {
	var id = param.id;
	return {
		param1: 100,
		param2: 200,
		method1: function () {
			return id;
		},
		method2: function () {}
	}
}

var plg = myPlugin({
	id: "#block1"
})

console.log(plg.method1()); //>  "#block1"

Comments

[Max Ba]

а протитипы не смотреть? я так понял, это тоже вариант)))

[Ihor Bratukh]

Max Ba, конечно смотреть, это вариант просто чтобы вы поняли логику. Смотреть обязательно прототипы, а лучше классы. Для этой задачи мой вариант больше костыль чем решение.

[Max Ba]

Ihor Bratukh, как раз и запилил тему, чтобы сразу выучить правильно. Без костылей и будущих переписываний кода)
Ну и с учетом того, что буду изучать Java позже.

[Ihor Bratukh]

Max Ba, javascript !== java