$('my').load(); Как сделать, чтобы это заработало
Подскажите, Как сделать, чтобы это заработало.
Начинка не важна , главное сама структура записи класса
<html>
<body>
ljkj
<div id=my>HI</div>
</body>
</html>
<script>
function $(id)
{
this.load = function() {alert(1);}
}
$('my').load();
</script>
|
new $('my').load();
|
Ну если без new хочется, то как-то так:
function $(arg) {
return new $.wrapper(arg);
}
$.wrapper = function () {
this…
};
$.wrapper.prototype = $.prototype = {
constructor: $,
method: function (…) {
…
}
};
|
А есть ли где-нинибь статья про это, чтобы прочитать, или учебник, я щас читаю Javascript подробное руководство 5-ое издание автор Дэвид Флэнаган уже на 157 странице, третью неделю читаю, столько всего узнал.....
|
|
попробовал, этот пример, что-то не могу его доделать, если кто может, подскажите. просто хочется свой jquery написать ...
|
ну еще у одного «jQuery головного мозга», как говорит Kolyaj :D
Что не получается то? |
Должно же быть как то так, но оно не работает
function $(arg) {
return new $.load(arg);
}
$.load = function () {
alert(1)// this…
};
$.load.prototype = $.prototype = {
constructor: $,
method: function (…) {
//…
}
};
|
function $(node) {
return new $.wrapper(node);
}
$.wrapper = function (node) {
this.node = node;
};
$.wrapper.prototype = $.prototype = {
constructor: $,
load: function () {
alert(1);
},
test: function () {
alert(this.node.nodeName);
return this;
}
};
$(document.body).test().load();
|
Просто хотел показать, что получилось вот это, а теперь буду смотреть Ваш код Octane, огромное спасибо.
<html>
<body>
ljkj
<div id=my>HI</div>
</body>
</html>
<script>
function $(arg) {}
$.prototype.load = function() {alert(1);}
new $('hi').load();
</script>
|
Octane, огромнейшее Вам спасибо...
|
Вот, что получилось.
А как вы считаете стоит ли так делать? Просто есть $ а хочется в противоположность ему рубль то есть р и все команды писать на русском. Стоит ли так делать?
function р(id) {
return new р.wrapper(id);
}
р.wrapper = function (id) {
this.id = id;
};
р.wrapper.prototype = р.prototype = {
constructor: р,
загрузить: function (data) {
alert("this.id="+this.id+"\n");
alert("data="+data+"\n");
},
test: function () {
alert(this.id.nodeName);
return this;
}
};
р("Привет").загрузить("Ураааа");
|
Можно сказать это первый релиз своего jquery, огромнейшее спасибо Octane.
Так если глянуть ничего сложного, хотя не совсем пока понимаю вот эту строчку
$.any.prototype = $.prototype = {constructor: $};
А так всё нормально. Ещё когда смотришь на jquery знак $ так пугает, думаешь это наверное что-то супер навороченное, а это просто название функции всего навсего.
<html>
<body>
ljkj
<div id=my style="border:5px solid #8899ff">HI</div>
</body>
</html>
<script>
function $$(id)
{
return document.getElementById(id);
}
function $(id)
{
return new $.any(id);
}
$.any = function (id)
{
this.id = id;
};
$.any.prototype = $.prototype = {constructor: $};
$.prototype.text = function(data)
{
var id=this.id;
$$(id).innerHTML=data;
return this;
}
$.prototype.css = function(property,data)
{
var id=this.id;
$$(id).style[property]=data;
return this;
}
$.prototype.load = function(data)
{
var id=this.id;
var xml;
if(window.ActiveXObject)
{
try
{
xml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xml=false;
}
}
else
{
try
{
xml=new XMLHttpRequest();
}
catch (e)
{
xml=false;
}
}
if(!xml) alert("Error creating the XMLHttpRequest object");
xml.onreadystatechange = function()
{
if(xml.readyState != 4 || xml.readyState==0)
{
$$(id).innerHTML=" <img src='/img/pb.gif'> ";
}
if(xml.readyState == 4)
{
if(xml.status == 200)
{
$(id).text(xml.responseText);
}
else
{
$(id).text("Error: returned status code " + xml.status + " " + xml.statusText);
}
}
};
xml.open("GET", data, true);
xml.send(null);
return this;
}
$("my").text("Через 5 секунд суда загрузится другое слово")
setTimeout('$("my").text("Скоро кое что ещё поменятеся")',5000);
setTimeout('$("my").css("border","1px solid #888888")',10000);
</script>
|
Цитата:
|
Цитата:
function $(id) {
return new any(id);
}
function any(id) {
…
}
any.prototype.text = function (…) {…};
any нам не нужен больше нигде, кроме как в функции $, поэтому, чтобы он не валялся в глобальной области видимости, просто переносим его в свойства функции $:
function $(id) {
return new $.any(id);
}
$.any = function (id) {
…
};
$.any.prototype.text = function (…) {…};
а чтобы вообще забыть про этот any, инициализируем его прототип ссылкой на прототип $:
function $(id) {
return new $.any(id);
}
$.any = function (id) {
…
};
$.any.prototype = $.prototype;
$.prototype.text = function (…) {…};
теперь $.any.prototype и $.prototype указывают на один и тот же объект, но нам удобнее использовать ссылку $.prototype, про $.any.prototype забываем. чтобы каждый раз при создании нового метода не писать $.prototype.methodName, можно сделать так:
$.prototype = {
method1: function (…) {…},
method2: function (…) {…},
method3: function (…) {…}
};
но надо не забыть, что конструктор у нас $.any и методы должны находится в его прототипе:
$.prototype = {
method1: function (…) {…},
method2: function (…) {…},
method3: function (…) {…}
};
$.any.prototype = $.prototype;
или короче
$.any.prototype = $.prototype = {
method1: function (…) {…},
method2: function (…) {…},
method3: function (…) {…}
};
но при инициализации прототипа новым объектом, теряется ссылка на конструктор, поэтому и определяем её вручную ($.any нам не нужен, поэтому напишем просто $):
$.any.prototype = $.prototype = {
constructor: $,
method1: function (…) {…},
method2: function (…) {…},
method3: function (…) {…}
};
вот и получается та штука, что я показал в первый раз:
function $(id) {
return new $.any(id);
}
$.any = function (id) {
…
};
$.any.prototype = $.prototype = {
constructor: $,
method1: function (…) {…},
method2: function (…) {…},
method3: function (…) {…}
};
ссылка на конструктор хоть и не совсем правильная, но остается работоспособной, потому что return из конструктора вернет нужный объект: var obj = new $(…); // так тоже будет работать |
Аргументированно, меня тоже отбило желание эта статья на русском делать свой framework...
|
Если честно ничего не понял, но думаю если раз 10 прочитать то пойму...
|
Как сделать чтобы можно было вызвать это же метод $ например вот так
my('div1').text('Привет'); ? Можно конечно просто весь код внутри поментяь, но в jquery , как то по другому , но что-то не пойму |
Создать еще одну глобальную ссылку на функцию $. Читай теорию, разбирайся, а то кинулся функционал реализовать, а как основы работают не понимаешь, без этого ничего хорошего не получится.
|
Читаю ту же книгу:) Седьмой день - 85 страница.
Очень хорошая книга. |
Что то я не пойму как реализовать таймер, так в принципе пользоваться умею и setTimeout и setInterval и clearIterval
Но вот, думаю какой код делать Такой ?
$.timer(50,function(){i++}).start();
Если такой, то как start определить, она же должна будет вызывать функцию setInterval, тогда её нужно будет иметь доступ к аргументам в timer, т.е. к 50 и function(){i++}, и к тому , чтобы её потом можно было остановить, нужно присвоить значение т.е.
timer1=setIneterval(function(){i++},50);
И откуда этот timer1 , и делать ли его глобальным? Или вот такой код?
$('timer1').timer(50,function(){i++});
Но в этом случае придётся вообще весь получившийся framework (хотя он маленький пока) переделывать. Поэтому отпадает. и как вообще определять start() ? Должен ли он значения какие нибудь принмать, и должен ли возвращать как и другие себя следующим образом return this; Посмотрел как в js-core сделано, пока не догоняю ))) Хотя на вид вроде просто. Главный вопрос, как потом из start() получить данные переданные в timer(50,function(){i++})???? |
$.timer такой же конструктор, как и $, функция и параметры запоминаются в свойствах нового объекта, а метод start находится в прототипе $.timer, поэтому имеет доступ к свойствам объекта по ссылке this.
|
Ух вроде просто )) , буду пробовать, если честно я наверное не совсем к
ООП в js привык ). |
Попробовал немного другой способ, и он вроде даже лучше и проще для понимания, можете оценить
<script>
function $$(id)
{
switch (typeof id)
{
case "object":
return id;
break;
case "string":
if(id.search("#")!=-1)
{
var referenceId=id.replace("#","");
var element=document.getElementById(referenceId);
if(element){return element;}
else {alert("Данного элемента не существует.\ndocument.getElementById(referenceId) вернула\n"+element);}
}
else {alert("Элемент надо указывать так:#id");}
break;
case "function":
alert("function");
break;
default:
alert("Этот тип не поддерживается");
}
}
function $(id)
{
this.id=id;
this.cout=cout;
this.onready=onready;
return this;
}
function cout(text){$$(id).innerHTML=text;};
function onready(toMake)
{
switch (typeof toMake)
{
case "function":
window.onload = toMake;
break;
case "string":
window.onload = function(){eval(toMake);}
break;
default: alert("Ошибка в функции onready:Этот тип не поддерживается\n");
}
}
$.alert = function(text){ alert(text);}
$(document).onready("$('#test').cout('Привет');");
$.alert("Привет");
</script>
<html>
<head>
<title> Классы </title>
</head>
<body>
<div id="test"></div>
<button onclick="$('#test').cout('Ух ты');">Нажать</button>
</body>
</html>
|
Чем лучше?
Умножать матрицы не хочешь, в прототипах разбираться не хочешь… может забить тогда на все и не мучаться?) |
Цитата:
Код:
|
| Часовой пояс GMT +3, время: 18:43. |