Помогите с созданием нового объекта
Помогите начинающему веб-программисту разобраться с ООП. Я хочу создать объект, который что-то делает с блоком <div>, например вставляет туда кнопку при нажатии на которую еще что-то делается ЭТИМ же объектом. Я имею ввиду, что объект внутри блока <div id="DivId"> создается код html с кнопкой, у которой событие - это метод этого же объекта. Что-то типа такого:
function myObj() {
this.a = "Text";
this.func1 = function() {
$("#DivId").html('<input type="button" value="' + this.a + '" onclick="' + this.func2 + '">');
}
this.func2 = function() {alert("Ok")}
this.func1();
}
$().ready(function() {var myBut = new myObj(); });
Как это вообще реализовать? Как правильно задать событие кнопке? Ведь когда эта кнопка присоединиться к дереву, то это уже должно быть как бы обращение к методу funk2 из вне объекта. |
Начинающему программисту лучше пока оставить jQuery в покое и начать читать:
http://dmitrysoshnikov.com/ecmascrip...eneral-theory/ http://dmitrysoshnikov.com/ecmascrip...mplementation/ ну и остальные статьи там и на этом сайте.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<div id="test-container"></div>
<script>
if (!Function.prototype.bind) {
Function.prototype.bind = function (obj) {
var args = Array.prototype.slice.call(arguments, 1), thisFunc = this;
function wrap() {
return thisFunc.apply(this instanceof wrap ? this : obj || window, args.concat(Array.prototype.slice.call(arguments)));
}
return wrap;
};
}
var common = {
event: {
add: function (element, eventType, listener) {
var wrap;
if ("addEventListener" in element) {
element.addEventListener(eventType, listener, false);
}
else if ("attachEvent" in element) {
wrap = function () {
listener.call(element, window.event);
}
element.attachEvent("on" + eventType, wrap);
}
return wrap || listener;
}
}
};
function MyObj(node) {
this._container = node;
this.render();
}
MyObj.prototype = {
constructor: MyObj,
buttonCaption: "Text",
message: "Ok",
eventType: "click",
_container: null,
_button: null,
render: function () {
this.addButton();
this.initEvents();
},
addButton: function () {
var btn = document.createElement("input");
btn.type = "button";
btn.value = this.buttonCaption;
this._container.appendChild(btn);
this._button = btn;
},
initEvents: function () {
common.event.add(this._button, this.eventType, this.showMessage.bind(this));
},
showMessage: function () {
alert(this.message);
}
};
new MyObj(document.getElementById("test-container"));
</script>
</body>
</html>
|
Ну Вы жжёте вообще) Я весь мозг сломал пока процентов 20 отсюда понял :)
|
Я плагин видел для Квери,создающий новый объект. Погуглите,найдете его
|
jQuery головного мозга детектед
|
У кого?))
|
Цитата:
|
popov654, вам бы действительно для начала основы подучить. Чего вы хотите добиться этой строкой:
onclick="' + this.func2 + '" Вот как думаете, что у вас туда попадет? |
Цитата:
Цитата:
|
Спасибо за ссылки, но подобную литературу я уже прочла. Но вот несколько моментов осталось непонятых. Я изучила основы JavaScript jQuery, по только ОСНОВЫ. Я могу написать на JavaScript процедурным способом. Т. е. создать 20 функций в скрипте и вызывать из одной функции другую. Так у меня получается. Но я хочу разобраться с ООП, с пространством имен. Мне нужна помощь конкретно в этом примере. Еще раз привожу его, немного изменив. Вот есть страничка index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
var first = "Первая кнопка",
second = "Вторая кнопка";
function firstBut(){$("#doc").append('<input type="button" value="'+first+'" onclick="secondBut()">');}
function secondBut() {$("#doc").append('<input type="button" value="'+second+'" onclick="ok()">');}
function ok() {alert("ОК!");}
$().ready(function() {firstBut();});
</script>
</head>
<body>
Начало
<div id="doc"></div>
</body>
</html>
Если ее запустить, то все работает. Но тут реализовано процедурным способом. А как сделать так, что бы переменные first и second были свойвствами какого то объекта, а функции firstBut и secondBut - его методами? |
Народ, помогите пожалуйста! Наверняка опытные программисты сталкивались с таким. Если нужно я могу уточнить вопрос...
|
yambbkru,
Создай объект, создай у объекта нужные свойства и методы. А что должен делать скрипт? |
Да этот скрипт - выдуманный. Я его придумала только для того, что бы научится. Я вроде немного разобралась. Если я создаю объект вот так:
function C(a){with (C) {
first = a.b;
second = "Вторая кнопка";
firstBut = function() {$("#doc").append('<input type="button" value="'+first+'" onclick="secondBut()">');}
secondBut = function() {$("#doc").append('<input type="button" value="'+second+'" onclick="ok()">');}
ok = function() {alert("ОК!");}
firstBut();
}};
$().ready(function() {new C({b:"Первая кнопка"});});
то, все работает так же, как и процедурным способом. Буду пока так делать... |
Женщина, все скрипты выдумываются мозгом. Объясни, что он должен делать.
|
Не самый удачный выбран пример. Как я понял нужно что-то типа этого:
function MyWTFObject()
{
this.$obj = $('<div id="my-wtf-object" style="border:1px solid green"></div>').appendTo('body');
this.$firstButton = new Object();
this.$secondButton = new Object();
this.createFirstButton();
}
MyWTFObject.prototype.createFirstButton = function()
{
var obj = this;
this.firstButton = $('<input type="button" value="first-button"/>')
.appendTo(this.$obj)
.click(function(){obj.createSecondButton()});
}
MyWTFObject.prototype.createSecondButton = function()
{
var obj = this;
this.firstButton = $('<input type="button" value="second-button"/>')
.appendTo(this.$obj)
.click(function(){obj.showOk()});
}
MyWTFObject.prototype.showOk = function()
{
alert('ok');
}
/*----------------------------------------------*/
$(function()
{
window.wtfObject = new MyWTFObject();
});
В примере используется ООП совместно с jQuery |
Я не очень поняла ваш пример! Вы можете дописать комментарии? Зачем использовать прототип? Почему просто нельзя добавить свойства и методы объекту?
|
Для того, кто спрашивал что делает скрипт: мой выдуманный скрипт должен при запуске показывать кнопку, при нажатии на которую появляется еще одна кнопка, при нажатии на которую выскакивает сообщение ОК!
|
вот запускаемый скрипт - пример
<body> </body>
<script>
/* создает кнопку с указанным html и обработчиком клика */
function Button( html, handler ){
var a = document.createElement('button');
a.innerHTML = html;
a.onclick = handler;
return a;
};
// когза страница загрузится, отобразим первую кнопку
window.onload = function(){
// не знаю, зачем, но я их сохраняю
var firstB,secondB;
firstB = new Button("первая", function(){
secondB = new Button("вторая", function(){
alert("OK");
});
// добавляем её туда же,куда и первую
firstB.parentNode.appendChild( secondB );
});
// добавляем первую кнопку в <body>
document.body.appendChild( firstB );
};
</script>
это тот же код, но разноцветный.
/* создает кнопку с указанным html и обработчиком клика */
function Button( html, handler ){
var a = document.createElement('button');
a.innerHTML = html;
a.onclick = handler;
return a;
};
// когза страница загрузится, отобразим первую кнопку
window.onload = function(){
var firstB,secondB;
firstB = new Button("первая", function(){
secondB = new Button("вторая", function(){
alert("OK");
});
// добавляем её туда же,куда и первую
firstB.parentNode.appendChild( secondB );
});
// добавляемпервую кнопку в <body>
document.body.appendChild( firstB );
};
использовать Button можно было и без new, но тут эти три буквы добавляют к читаемости кода |
Спасибо большое! Этот пример мне более понятен. Он больше похож на программирование в Делфи: каждая кнопка - объект и все они часть другого объекта - всего документа.
|
Цитата:
//конструктор объекта-прототипа котрый будет всем рулить
function MyWTFObject()
{
//создаем контейнер в который все будет отрисовываться
this.$obj = $('<div id="my-wtf-object" style="border:1px solid green"></div>').appendTo('body');
//объявим что у объекта есть два свойства - это первая и вторая кнопка соответственно
this.$firstButton = new Object();
this.$secondButton = new Object();
//создадим первую кнопку
this.createFirstButton();
}
//метод создает первую кнопку
MyWTFObject.prototype.createFirstButton = function()
{
var obj = this;//переменная obj теперь ссылается на this который в данном контексте ссылается на сам объект (см замыкания)
//создаем кнопку и сохраняем ссылку на нее в соответствующем свойстве объекта
this.firstButton = $('<input type="button" value="first-button"/>')
.appendTo(this.$obj)//отрисовываем кнопку в контейнер
.click(function(){obj.createSecondButton()});//вешаем событие на клик по кнопке, так как указатель this в этом месте не ссылается на текущий объект то используем для доступа к текущему объекту ранее созданную переменную obj
}
//метод создает вторую кнопку
MyWTFObject.prototype.createSecondButton = function()
{
var obj = this;
this.firstButton = $('<input type="button" value="second-button"/>')
.appendTo(this.$obj)
.click(function(){obj.showOk()});
}
//метод аллертует "ok"
MyWTFObject.prototype.showOk = function()
{
alert('ok');
}
/*----------------------------------------------*/
$(function()
{
//зоздаем экземпляр в глобальной области видимости(т.е. просто делаем его свойством window)
window.wtfObject = new MyWTFObject();
});
Цитата:
|
Абсолютно не понятно, зачем нужны эти строчки:
this.$firstButton = new Object(); this.$secondButton = new Object();??? |
Цитата:
|
Спасибо, kadabrik! Так стало понятней. А можно еще попутный вопрос? Я прочла уже несколько раз в учебнике и на этом сайте о наследовании в javascript. Но остались не понятые моменты. Допустим есть класс
function Obj1(c) {
this.a = c;
this.b = function() {alert(this.a);}
this.b();
}
При запуске
var myObj1 = new Obj1("1");
показывает сообщение 1. Теперь я хочу создать новый класс
function Obj2(c) {
this.d = c + [B]this.a[/B];
[B]this.b();[/B]
}
где this.a и this.b() - это свойство и метод объекта Obj1. Как мне связать эти эти объекты? Так?
Obj2.prototype = new Obj1("1")
Но тогда попутно создается и объект Obj1. Я читала про обходные пути, что мол создается объект, а функция-конструктор пустая или копируют свойства из первого объекта во второй... А можно так связать объекты, что бы не создавать первый объект, а только взять его методы? Не скопировать, а как то сослаться не создавая его? Тем более строчка с прототипом должна быть написана вне обеих функций, я так поняла. Но было бы гораздо удобнее связать функции в теле второй функции Obj2. Так можно сделать? И еще вопрос. Что значит строчка О1 = Obj1 ? Как в этом случае ведут себя оба класса? Если в правый добавить свойства что будет? А если в левый? И что сделалось с прототипом? |
yambbkru, если речь идет о наследовании, то в js есть несколько способов его реализовать. Лично мне больше всего нравится этот метод. Для наследования именно свойств, а не методов лучше подходит вызов конструктора родителя в конструкторе потомка: MyClass.superclass.constructor.call(this). После этого все переменные объявленные в конструкторе родителя будут и у потомка.
|
Цитата:
function Obj1(c) {
this.a = c;
this.b = function() {
alert(this.a);
}
this.b();
}
var myObj1 = new Obj1("1");
function Obj2(c) {
debugger
this.d = c + this.a;
this.b();
}
*!*
Obj2.prototype = myObj1;
*/!*
// создадим экземпляр второго объекта, чтобы проверить работоспособность
new Obj2('c');
выдает два алерта, в которых 1. Цитата:
|
melky, как же всетаки текст на аватарке контрастирует с началом предыдущего сообщения :)
|
Я увидел здесь разговор о var..Скажите пожайлуста, существет ли АНИМИРОВАНЫЙ АЛЕРТ и АНИМИРОВАНЫЙ var наподобие счетчика ? .Алерт выводит только стационарное значение var.
Причина вопроса такая_ меняется ширина картинки,ее анимированная ширина динамически передается другому объекту для его css.Как быть? |
Цитата:
|
Цитата:
|
А можно еще спросить? Вот есть такие 2 функции:
function a() {
var t = {
c : "1"
}
return t
}
function b() {
var t = {
d : "2"
}
return t
}
var A = a();
var B = b();
alert(A.c + B.d)
В результате выдает сообщение "12". Как мне сделать, что бы все объекты, создаваемые функцией b() имели своим прототипом объект, создаваемый функцией а()? |
b.prototype = new a();
|
Цитата:
|
А зачем там new? а() и b() - это функции, которые возвращают объекты. Это не конструкторы, я так понимаю. Объект создается внутри этих функций. Мне действительно не нужен лишний объект а!!! Я пока вижу только один способ наследования: копирование всех свойств из а() в b(). Но мне это не совсем нравится, поскольку лишнее время затрачивается на это копирование. Хотелось бы через прототип.
|
Цитата:
Цитата:
|
Хочешь через объект-прототип? Рекомендую самую обычную реализацию:
function B(){
this.d = 2;
};
B.prototype.c = 1;
var b = new B;
alert( b.c + b.d );
|
Спасибо, но мне не нужно реализовывать выдуманную мной задачу для примера другими способами! Мне нужен совет по поводу именно такой моей реализации. Пожалуйста, если кто может, помогите. Нужно те две функции как-то связать через прототип.
|
| Часовой пояс GMT +3, время: 02:26. |