Динамический Генератор Подсказку


В этом проекте я взял мой первый выстрел в ОО JavaScript и я не уверен, как оказалось. Скрипт динамически делает подсказки с разным текстом, Если вы так выбираете. Сейчас это занимает много , чтобы создать подсказку и показать, есть ли способ, чтобы сделать это поменьше?

Вот код на JSFiddle. Дайте мне знать, если проще было бы вставить сюда.

/*global window, document*/

var note;

function Note() {
    'use strict';

    this.identifier = 0;
}

Note.prototype.makeWrap = function () {
    'use strict';
    var wrap;

    wrap = document.createElement('div');
    wrap.id = 'wrap' + this.identifier;

    wrap.style.border    = '1px solid #43484A';
    wrap.style.boxShadow = '-1px -1px 5px #292929, 1px 1px 5px #292929';
    wrap.style.height    = '185px';
    wrap.style.opacity   = '.95';
    wrap.style.position  = 'absolute';
    wrap.style.width     = '300px';

    return wrap;
};

Note.prototype.makeHead = function () {
    'use strict';
    var head;

    head = document.createElement('div');
    head.id = 'head' + this.identifier;

    head.style.backgroundColor = '#43484A';
    head.style.color           = '#EEEEEE';
    head.style.height          = '30px';
    head.style.paddingLeft     = '6px';
    head.style.position        = 'relative';
    head.style.width           = '294px';

    return head;
};

Note.prototype.makeTitle = function (text) {
    'use strict';
    var title;

    title = document.createElement('div');
    title.id = 'title' + this.identifier;

    title.style.backgroundColor = 'inherit';
    title.style.color           = 'inherit';
    title.style.float           = 'left';
    title.style.fontFamily      = 'Georgia, "Times New Roman", serif';
    title.style.height          = '17px';
    title.style.paddingTop      = '6px';
    title.style.paddingBottom   = '7px';
    title.style.position        = 'relative';
    title.style.width           = '80%';

    title.innerHTML = text;

    return title;
};

Note.prototype.makeMini = function () {
    'use strict';
    var mini;

    mini = document.createElement('div');
    mini.id = 'min' + this.identifier;

    mini.style.backgroundColor = 'inherit';
    mini.style.color           = '#EEEEEE';
    mini.style.cursor          = 'pointer';
    mini.style.float           = 'left';
    mini.style.fontFamily      = 'Consolas, monospace';
    mini.style.height          = '17px';
    mini.style.paddingTop      = '6px';
    mini.style.paddingBottom   = '7px';
    mini.style.position        = 'relative';
    mini.style.textAlign       = 'center';
    mini.style.width           = '10%';

    mini.innerHTML = '—';

    return mini;
};

Note.prototype.makeClose = function () {
    'use strict';
    var close;

    close = document.createElement('div');
    close.id = 'close' + this.identifier;

    close.style.backgroundColor = 'inherit';
    close.style.color           = '#EEEEEE';
    close.style.cursor          = 'pointer';
    close.style.float           = 'left';
    close.style.fontFamily      = 'Consolas, monospace';
    close.style.height          = '17px';
    close.style.paddingTop      = '6px';
    close.style.paddingBottom   = '7px';
    close.style.position        = 'relative';
    close.style.textAlign       = 'center';
    close.style.width           = '10%';

    close.innerHTML = 'X';

    return close;
};

Note.prototype.makeBody = function (passage) {
    'use strict';
    var body;

    body = document.createElement('div');
    body.id = 'body' + this.identifier;

    body.style.backgroundColor = '#EEEEEE';
    body.style.color           = '#22282A';
    body.style.fontFamily      = 'Georgia, "Times New Roman", serif';
    body.style.height          = '118px';
    body.style.overflow        = 'auto';
    body.style.padding         = '6px';
    body.style.position        = 'relative';
    body.style.width           = '288px';

    body.innerHTML = passage;

    return body;
};

Note.prototype.makeFoot = function () {
    'use strict';
    var foot, link;

    foot = document.createElement('div');
    foot.id = 'foot' + this.identifier;

    foot.style.backgroundColor = '#EEEEEE';
    foot.style.heigth          = '16px';
    foot.style.padding         = '4px 6px 5px 6px';
    foot.style.position        = 'relative';
    foot.style.textAlign       = 'right';
    foot.style.width           = '288px';

    link = document.createElement('a');
    link.href = '#';

    link.style.color = '#0088CC';
    link.style.textDecoration = 'none';
    link.onmouseover = function () {
        this.style.borderBottom = '1px solid #0088CC';
    };
    link.onmouseout = function () {
        this.style.borderBottom = 'none';
    };
    link.innerHTML = 'Link';

    foot.appendChild(link);

    return foot;
};

Note.prototype.create = function (titleText, bodyText) {
    'use strict';
    var wrap, head, title, mini, close, body, foot;

    wrap  = this.makeWrap();
    head  = this.makeHead();
    title = this.makeTitle(titleText);
    mini  = this.makeMini();
    close = this.makeClose();
    body  = this.makeBody(bodyText);
    foot  = this.makeFoot();

    head.appendChild(title);
    head.appendChild(mini);
    head.appendChild(close);

    wrap.appendChild(head);
    wrap.appendChild(body);
    wrap.appendChild(foot);

    document.body.appendChild(wrap);
    this.identifier = this.identifier + 1;
};

note = new Note();
note.create(
    'Lorem',
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu orci nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis posuere rutrum pellentesque.'
);


481
3
задан 27 августа 2011 в 09:08 Источник Поделиться
Комментарии
3 ответа

Woahhhh, что много повторов. У вас есть много аналогичных функций, все функции в основном одинаковые вещи:


  • Создать элемент

  • Установить идентификатор

  • Применить стили

  • Может быть, сделать что-то еще

Вы должны смотреть на высыхающие код:


  1. Факторинг часто используемые функции на вспомогательные функции

  2. Регулируя структуру кода для того, чтобы обеспечить более выше

  3. Вернитесь к 1 и повторять, пока это не осуществимо

Как быстро начать я рефакторингу и сушится ваш код совсем немного, я ушел из повторного добавления все для укладки, но это должно дать вам довольно хорошее представление о том, как структурировать ваш код.

/*global window, document*/

// Let's use an anonymous wrapper
(function() {
'use strict'; // only one pragma needed

// You are using alot of .style assignments... let's create a helper
function css(elem, styles) {

for(var i in styles) {
if (styles.hasOwnProperty(i)) {
elem.styles[i] = styles[i];
}
}

}

// You are also creating a lot of similiar elements, so will use another wrapper
function element(type, id, styles) {

var elem = document.createElement(type);
elem.id = id;
css(elem, styles);

return elem;

}

function Note() {
this.identifier = 0;
}

// Prototype is just an object, let's get rid of all those assignments
Note.prototype = {

create: function (titleText, bodyText) {

'use strict';
var wrap, head, title, mini, close, body, foot;

wrap = this.element('div', 'wrap', {

border: '1px solid #43484A',
boxShadow: '-1px -1px 5px #292929, 1px 1px 5px #292929',
height: '185px',
opacity: '.95',
position: 'absolute',
width: '300px',

});

// etc....

this.identifier++;

},

element: function(type, name, styles) {
return element(type, name + this.identifier, styles));
}

}

window.Note = Note; // expose the local stuff to the window

});

note = new Note();
note.create(
'Lorem',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu orci nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis posuere rutrum pellentesque.'
);

Также посмотрите на JavaScript шаблоны проектирования книги издательства o'Reilly.

ПС: я бы еще предположить, что вы покинете свой CSS в самом объявлении класса CSS и использовать их на свои элементы.

7
ответ дан 27 августа 2011 в 09:08 Источник Поделиться

Как @IvoWetzel уже сказал : CSS имеет никакого места в коде JavaScript. Вместо этого вы должны иметь настраиваемый названий класса для элементов Примечание виджет. Оставить укладки элементов в CSS в *.CSS-файл.

2
ответ дан 27 августа 2011 в 10:08 Источник Поделиться

Наиболее obviuos способ, чтобы переместить все стили во внешний файл CSS и добавить ссылку на него динамически. Обсуждайте делает такой. Следующая вещь-это перестать делать то же снова и снова.

На самом деле вам нужна только одна функция с определением:

funciton createElement(name, attrs, styles, parent)

Также вы можете добавить более конкретную функцию, чтобы остановить дальнейшее дублирование в вашем случае

function createDiv(id, styles, parent, innerHTML) {
var el = createElement('div', {id: id}, styles, parent);
if(innerHTML) el.innerHTML = innerHTML;
return el;
}

С помощью этой функции вы можете создать весь дом в гораздо более короткий путь:

var wrap = createDiv('wrap', wrapStyles),
header = createDiv('head', headStyles, wrap),
title = createDiv('title', titleStyles, headerm titleText);
..etc..

1
ответ дан 30 августа 2011 в 06:08 Источник Поделиться