Последовательность функций как в jquery
Скажите, пожалуйста, как можно реализовать последовательность функций по типу как это реализовано в джиквери. т.е.
el.func1().func2().func3(); Может быть есть где-то информация по данному поводу. Полдня искал, так и не нашел. Хотя может что-то не то искал. Буду крайне признателен за любую информацию. |
platedz,
Для начала нужен код этих самых функций, судя по записи - это методы http://javascript.ru/tutorial/object...avlenie-metoda |
они все возвращают this который в свою очередь указывает на вызывающий объект
поэтому после выполнения каждой функции мы получаем тот же объект только модернизирванный добавляй в конце return this вот здесь в самом низу пример есть http://sartas.ru/js-cepochka-funkcij-kak-v-jquery/ |
вызов функций или методов?
методов
var object_ = {
first: function () {
alert('первый');
return this;
},
second: function () {
alert('второй');
return this;
}
}
object_.first().second();
функций
function _object() {
var self = arguments.callee;
self.first = function () {
alert('первый');
return self;
}
self.second = function () {
alert('второй');
return self;
}
return self;
}
_object().first().second();
|
Спасибо. Буду разбираться и пробовать.
|
Последовательность сама по себе вышла, но если соответствовать методу jquery, то мы должны первым объявить элемент, а потом уже назначать ему методы.
Я написал так
tel = function(window){
return {
elemmm : function(e){ return document.getElementById(e); },
first: function (w) {
alert(w);
return this;
},
second: function (w) {
alert(w);
return this;
}
}
}(window);
tel.first(tel.elemmm("apslaed"));
Но это не правильно, тк. должно быть примерно так или навроде того
tel.elemmm("apslaed").first();
|
platedz,
Вы просто присвойте потом tel =$("apslaed") |
мой совет, лучше делайте так
function test () {
var self = this;
this.first = function () {
alert('one');
return self;
}
this.second = function () {
alert('two');
return self;
}
}
var obj = new test();
obj.first().second();
|
cyber отличные примеры спс :)
|
Честно говоря не понимаю, как реализовать. Можно какой-нибудь пример с присвоением элемента и затем последовательного выполнения пары функций.
Т.е. Скажем мы берем элемент и последовательно выводим его к примеру в двух алертах, или что-то подобное.
document.getElementById("id").alert1().alert2();
соответственно alert1 должен вывести alert1(document.getElementById("id").innerHTML) из функции function alert1(e){alert(e.innerHTML);} соответственно alert2 должен вывести alert(document.getElementById("id").id) function alert2(e){alert(e.id);} код абсолютно условный, потому что я даже приблизительно не знаю, как его написать. Помогите, пожалуйста. |
Т.е. должно получиться примерно это
tel = function(window){
sdf = document.getElementById("apslaed");
return {
first: function () {
alert(sdf.innerHTML);
return this;
},
second: function () {
alert(sdf.id);
return this;
}
}
}(window);
tel.first().second();
но sdf нужно определить впереди, перед first и second, как это делается в jqeury, а не внутри функции как в примере выше |
можно так
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<div id='fignya'>что то типо текста</div>
<script>
var elem = document.getElementById('fignya');
function ElelemMethod () {
var self = this;
self.alert1 = function () {
alert(this.innerHTML)
return self;
}
self.alert2 = function () {
alert(this.id)
return self;
}
return self;
}
ElelemMethod.call(elem).alert1().alert2();
</script>
</body>
</html>
можно использовать bind или прототипное наследование (в нем не шарю, еще 2 главы до него :)) |
Спасибо всем кто ответил. Сам бы не справился.
Я сделал так
tel = function(window){
return {
elems : function(e) { dd = document.getElementById(e); return this;},
first: function () {
alert(dd.innerHTML+" - "+this);
return this;
},
second: function () {
alert(dd.id+" - "+this);
return this;
}
}
}(window);
tel.elems("apslaed").first().second();
Теперь хотелось бы вот эту часть tel.elems привести к одному знаменателю например к $ как в jqueru Подскажите, как это сделать. |
не совсем понял что вы хотите
|
убрать точку отсюда tel.elems,
а точнее сделать так, чтобы вметос tel.elems писать скажем $ Т.е чтобы tel.elems == $ и записать все это как $("apslaed").first().second(); |
$ - это имя функции, сделайте функцию с таким именем =)
|
А как я это сделаю.
Я могу сделать так $.elems("apslaed").first().second(); или так tel.$("apslaed").first().second(); а нужно так $("apslaed").first().second(); |
Цитата:
Цитата:
Цитата:
|
Спасибо за пояснение.
А можно как то записать теперь функцию, чтобы она выполняла метод elems объекта tel? Или может снести куда-нибудь метод, или переопределить его как-то, я честно говоря даже не знаю. |
можно так ,но я не уверен что это правильно решение (в прототипах еще не шарю), если я не прав поправьте меня
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<script>
var object_ = {
first: function () {
alert('one');
return this;
}
}
function $() {
return {}.prototype = object_;
}
$().first();
</script>
</body>
</html>
|
Спасибо попробую. Возникла другая проблема. Если элемент не существует, то метод undefined. И на существующие элементы метод перестает работать. Подскажите, пожалуйста, как это обойти?
|
код в студию=)
|
Пока код все тот же.
tel = function(window){
return {
elems : function(e) { dd = document.getElementById(e); return this;},
first: function () {
alert(dd.innerHTML+" - "+this);
return this;
},
second: function () {
alert(dd.id+" - "+this);
return this;
}
}
}(window);
tel.elems("a").first().second();
tel.elems("b").first().second();
Если id="a" на странице не существует, то el.elems("b").first().second(); не выполнится, а надо чтобы работал. |
elems : function(e) {
try {
dd = document.getElementById(e);
} catch(e) {}
return this;
},
|
Спасибо, я тоже так думал. Но все равно не работает.
|
Кстати, вот так у меня не получилось
function $() {return {}.prototype = tel.elems; }
Зато вышло так,
function $(e) {return {}.prototype = tel.elems(e); }
Но я сделал так,
function $(e) {return tel.elems(e); }
тк.. с прототипами у меня дела совсем плохо обстоят. Хотя буду рад любому пояснению касательно того, что это такое и зачем они нужны и как с ними работать. |
http://learn.javascript.ru/inheritance-intro
Цитата:
лучше уже так
function $(e) {return tel; }
|
Спасибо за информацию. Уже начинаю немного понимать, в плане прототипов, особенно в сравнении с php. Хотя еще только на далеко базовом уровне.
Ваш пример не работает, и что не менее Важно теряется elems, т.е. даже если и вернуть корректно tel и заменить его на другое название то все равно придется вызывать elems, например $.elems(id) а нужно $(id) А самое главное, если id не существует, то код не работает, и это нужно как-то обойти. |
Цитата:
Цитата:
вот так правильно function $(e) {return tel.elems(e); }
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<script>
var object_ = {
message: function (id){
alert(id)
return this;
}
}
function $ (id) {
return object_.message(id);
}
$('привет');
</script>
</body>
</html>
|
Спасибо за ответ.
try{}cathe(){} не дает результата. Насколько я понимаю, вызывается метод к элементу которого еще не существует. В общем если эту проблему решить, то все будет просто замечательно. |
Кстати, насколько я понимаю, вот так вот можно создать полную копию объекта.
copy = {}.prototype = tel;
при этом {}.prototype здесь служит как бы посредником. А как еще можно записать подобное выражение? И самый главный вопрос, как заставить работать код, если элемента на странице не существует. |
опять туплю =)
а зачем вообще что то делать? если такого id нет то в переменная dd = null;
var dd = document.getElementById('id');
alert('run');
var dd = document.getElementById;
alert('run');
и код ниже выполнится, ошибки не будет |
В данном случае я вывожу кнопку войти, в личном кабинете, либо кнопку кабинет, если человек вошел. Кроме прочего элемента может еще не быть на странице, но он может быть создан в ходе каких-то действий.
Видимо ошибка выдается т.к. к объекту котогоро нет, применяется метод, на что и ругается браузер. |
ну смотрите вы не записали нечего переменную и применили метод вы всеравно получите ошибку, перед тем как его применять делайте проверку и все
|
Спасибо. Вроде все верно. Буду разбирать код по частям и разбираться.
Возник еще один вопрос. В данном примере я могу применить метод к dd, но не могу вернуть сам dd - элемент на который я применяю метод. Можно ли как-то сделать так, чтобы применить к dd стандартные методы и свойства javascript, т.е. сделать так, чтобы подобная запись работала alert(tel.elems(e).innerHTML) |
я не знаю, просто в jquery , все на много сложней чем вам кажется=)
|
Спору нет.
Но я к сожалению довольно слаб в ооп. На данный момент я могу либо вернуть элемент return dd = document.getElementById('id'); либо вернуть this. dd = document.getElementById('id'); return this; При этом я честно говоря, так до конца и не понял, что же происходит, когда я возвращаю this. т.е. this содержит весь код объекта. Т.е. если я верно понимаю я возвращаю код объекта, т.е. сам объект и что происходит потом ? |
можно так
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<div id='elem'>askasdfskdofkdof</div>
<script>
var object_ = {
find: function (id) {
this.elem = document.getElementById(id);
this.innerHTML = this.elem.innerHTML;
return this;
},
}
function $(select) {
return object_.find(select);
}
alert($('elem').innerHTML)
</script>
</body>
</html>
|
Цитата:
|
Спасибо.
А где содержится InnerHTML? Можно ли как-то получить весь список глобальных свойств и затем перебрав их в цикле присвоить их к данному объекту. |
| Часовой пояс GMT +3, время: 23:12. |