Как вы организуете Javascript Verboseness? - PullRequest
Новая
       15

Как вы организуете Javascript Verboseness?

1 голос
/ 03 апреля 2009

Я кодирую сценарий GM, и одна вещь, которую я понял, что я делаю неоднократно, это повторение одного и того же кода снова и снова. В частности, свойство стиля. 

function createButton() {
    var a = document.createElement('a');
    a.href = '#';
    a.innerHTML = 'Print Topic';
    a.style.position = 'absolute';
    a.style.right = '3em';
    a.style.top = '6em';
    a.style.fontFamily = 'Arial,Helvetica,sans-serif';
    a.style.fontWeight = 'bold';
    a.style.fontSize = '125%';
    a.style.background = '#777777 none repeat scroll 0 0';
    a.style.color = 'white';
    a.style.padding = '6px 12px';
    document.body.insertBefore(a, document.body.lastChild);
}

Как вы можете видеть в моем примере кода, я неоднократно писал стиль. У вас есть методы, которые вы используете, чтобы избежать этого беспорядка? Просто ради изящества.

СПАСИБО -

Ребята, вот сокращенный код: 

function createButton() {
    var a = document.createElement('a');
    var css = document.createElement('style');
    css.type = 'text/css';
    css.innerHTML = '#prt { position:absolute; right:3em; top: 6em; font-family: Arial,Helvetica,sans-serif; font-weight:bold; font-size:125%; background: #777777 none repeat scroll 0 0; color: white; padding: 6px 12px;}'
    a.href = '#';
    a.innerHTML = 'Print Topic';
    a.id = 'prt';
    document.body.insertBefore(a, document.body.lastChild);
    document.body.appendChild(css);
}

LOL, это, конечно, выглядит лучше

Ответы [ 6 ]

12 голосов
/ 03 апреля 2009

Поместите атрибуты стиля в классы CSS, затем просто динамически поменяйте местами классы вместо того, чтобы явно выполнять каждый атрибут стиля.

1 голос
/ 03 апреля 2009

В Javascript есть оператор с ... 

with a.style {
  position = 'absolute';
  right = '3em';
}

И вы можете разделить свою повторяющуюся функциональность как функцию и передать свой элемент в качестве параметра ... 

function setStyle(elem) {
  with elem.style {
    position = 'absolute';
    right = '3em';
  }

  return elem
}

//Invoke like this: elem = setStyle(elem)
1 голос
/ 03 апреля 2009

jQuery делает вещи короче с помощью магической функции $ (), которая возвращает оболочку вашего элемента dom.

Оболочка дает вам доступ ко всему свойству css и почти ко всем его методам. (т. е. установщики возвращают «это»), включая установщики CSS.

Будет понятнее с примером ... 

$("<a href='toto/'></a>")
    .css("position", "absolute");
    .css("right", "3em")
    .appendTo($(containerid));
1 голос
/ 03 апреля 2009

Попробуйте

Если бы вы использовали jQuery, вы могли бы написать: 

$("a").css({position: "absolute", right: "3em", top: "6em"}) // etc.
1 голос
/ 03 апреля 2009

Не очень хороший, но, возможно, лучше, чем оригинальный ответ: 

s = a.style;

s.position = "absolute";
...etc...
s.color = "white";
0 голосов
/ 03 апреля 2009

Разработка наиболее высоко оцененного ответа выше. Просто поместите всю свою информацию CSS в класс CSS. Затем просто присваивается атрибут класса. 

<style type='text/css'>
 a .prt { 
 position:absolute; 
 right:3em; 
 top: 6em; 
 font-family: Arial,Helvetica,sans-serif; 
 font-weight:bold; 
 font-size:125%;
 background: #777777 none repeat scroll 0 0;
 color: white; padding: 6px 12px;
}
</style>
<script>
function createButton() {    
 var a = document.createElement('a');
 a.class= 'prt';   
 document.body.insertBefore(a, document.body.lastChild);
}
</script>
...