Форум

OlegALL · #1 (**permalink**) 11.11.2014, 09:33

Привет

Задача - сделать так: $('div').addClass('class1').html().addClass('class 2').html(); (без new), не создавая экземпляра класса, оставив при этом прототипное наследование.

function $(selector){
			this.tags = document.querySelectorAll(selector);
		}
		
		$.prototype.addClass = function(className){
			for (var i = 0; i < this.tags.length; i++){
				this.tags[i].classList.add(className);
			}
			return this;			
		}
		
		$.prototype.html = function(){
			this.tags[0].innerHTML;
			console.log(this.tags[0].innerHTML);
			return this;
		}		
		
		new $('div').addClass('class1').html().addClass('class2').html();

Erolast · #2 (**permalink**) 11.11.2014, 10:38

https://ru.wikipedia.org/wiki/Fluent_interface

ksa · #3 (**permalink**) 11.11.2014, 10:39

Сообщение от OlegALL

Задача - сделать так:

$('div').addClass('class1').html().addClass('class  2').html();

Ответ - "так" не сделать...

OlegALL, ты, что вообще хочешь получить?
Присвоить ДИВу два класса и вернуть его ХТМЛ?

OlegALL · #4 (**permalink**) 11.11.2014, 10:54

Сообщение от ksa

Ответ - "так" не сделать...

OlegALL, ты, что вообще хочешь получить?
Присвоить ДИВу два класса и вернуть его ХТМЛ?

Да

ksa · #5 (**permalink**) 11.11.2014, 11:11

Сообщение от OlegALL

Да

Так и пиши...

var val=$('div').addClass('class1 class2').html();

OlegALL · #6 (**permalink**) 11.11.2014, 11:29

Спасибо Erolast за ссылку. Получилось так:

var $ = function (selector){
			this.tags = document.querySelectorAll(selector);
			if(this.$) {
				return new $(selector);
			}
		}
		
		$.prototype.addClass = function(className){
			for (var i = 0; i < this.tags.length; i++){
				this.tags[i].classList.add(className);
			}
			return this;
		}
		
		$.prototype.html = function(){
			this.tags[0].innerHTML;
			console.log(this.tags[0].innerHTML);
			return this;
		}

		
		$('div').addClass('class1').html().addClass('class2').html();

Только вопрос: почему зацикливается вызов $, если писать
так:

return new $(selector);

а не так:

if(this.$) {
    return new $(selector);
}

krutoy · #7 (**permalink**) 11.11.2014, 11:59

Сообщение от OlegALL

var $ = function (selector){ this.tags = document.querySelectorAll(selector); if(this.$) { return new $(selector); } � � }

Толком не вникал, но беглый взгляд -- и уже детская ошибка.

<html>
    <head>
    </head>
 
    <body>

<div>foo</div>
<div>bar</div>
<div>baz</div>

       <script>

var $ = function (selector){
            this.tags = document.querySelectorAll(selector);
            if(this.$) {
                return new $(selector);
            }
        }
$("div")
alert(tags)
        </script>
    </body>
 
</html>

danik.js · #8 (**permalink**) 11.11.2014, 12:30

Сообщение от krutoy

if(this.$) {

Кто тебя надоумил такое написать?

Логика такая: если this - инстанс конструктора $, то все пучком, делаем поиск по селектору.
Если же нет - создаем инстанс сами через new и возвращаем результат.

Таким образом, когда будешь писать $('div'), то будет два вызова - один как вызов функции, второй - как вызов конструктора (через new, создание инстанса то есть). Оно у тебя и щас так работает, но условие не совсем подходящее.

krutoy · #9 (**permalink**) 11.11.2014, 12:41

Сообщение от danik.js

Кто тебя надоумил такое написать?

Это не я написал, это код топикстартера. Я, собственно, просто продемонстрировал, что его ф-ция срет в глобал, дальше я не смотрел

krutoy · #10 (**permalink**) 11.11.2014, 12:45

danik.js,
Слушай, по-моему это чушь какая-то. Какие нах*й инстансы и классы? цель банальна -- вернуть (псевдо) объект, так? Так почему бы не написать тупо

proto={}
$=function(sel){
   var o = document.querySelectorAll(sel)
   o.__proto__=proto
   return o
}

proto.addClass = function(className){
   for (var i = 0; i < this.length; i++){
           this[i].setAttribute("class", className)
   }
           return this;
}

и так далее. Зачем этот цирк?

Форум

Справочник

Discord чат

Курсы javascript