Семь смертных грехов наличие Осуществление

Использование JavaScript стал более легким за последние несколько лет.В то время как еще в тот день мы должны были знать причуды любом браузере, сейчас многие библиотек, таких как jQuery, YUI, Dojo и MooTools позволяют тех, кто doesn’ даже не знаю JavaScript, чтобы украсить скучные HTML документы с впечатляющей и блестящий эффект.По-копилка поддержку на двигатель CSS селектор, мы отошли от сложности и несоответствия DOM и сделал вещи гораздо easier.

Если вы посмотрите на некоторые из кода, который был выпущен, хотя, мы, кажется, сделали шаг назад.В получении более легкого доступа, мы также стали немного небрежен с нашим кодом.Поиск четко структурированной, простой в обслуживании JQuery код достаточно жесткая, поэтому многие плагины делать то же самое.Дать одного себя быстрее, чем пытаться понять, что другие разработчики done.

правила для твердых, обслуживании и безопасный JavaScript haven’ T изменилась, однако.Таким образом, let’ S проходит через семь грехов развития JavaScript, что будет кусать вас в зад, когда вы должны поддерживать код позже или передать его другому party.

We’ нас все было работать с кодом, написанным другими людьми.Мы отчаялись в связи с отсутствием ремонтопригодности и документации, а также странные логики.Забавно, как разработчики, мы начали рассматривать это как нормальное и привыкли к игнорированию других people’ Работа и вместо написания нового кода для той же проблемы снова и снова, как если бы мы подсознательно пытаемся защитить наши рабочие места, оставляя за неосновательныйcode— Код что только мы поняли, в то время жалуются, что нет хороших решений были вне there.

Грехи отцов наших: Браузер-Specific Code

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

Это произошло главным образом потому, что браузеры не поддерживают стандарты (или были отправлены к руководящим органам договорились о стандартах вообще), и потому что мы должны были доставить нашу работу перед соревнованиями и не расширяя чрезмерно оптимистичные сроки, установленные нашими менеджерами проекта.

Это случается, одна из причин, почему Internet Explorer 6 не хочет умирать.Сотни дорогих пакетов программного обеспечения, которые используются в офисах по всему миру были построены, когда этот браузер был современным.This— и монокультуры, которые выступали с использованием одного поставщика программного обеспечения для всего, от операционной системы документов, электронных таблиц для browser— является причиной, почему компании теперь can’ T просто прекратить поддержку.Это также означает, что новые версии IE придется постоянно поддерживать оказание ошибки IE6 в той или иной форме.IE6 является Франкенштейн в Интернете, преследуют его создателей, ужасно неправильно поняты обывателей, которые скорее убить его, сжечь его и танцевать вокруг него, чем никакого смысла it.

Хорошей новостью является то, что вы won’ т найти много сценариев в эти дни, которые начинаются с if(document.all){} и продолжить else if(document.layers){}.Если вы найдете, пожалуйста, отправьте его создатель краткое письмо поощряя их идти дальше или, еще лучше, чтобы перенаправить их сайт, чтобы лучше скрипт, который фактически быть maintained.

Библиотеки в Rescue

Работа библиотек JavaScript, таких как JQuery, YUI, MooTools, Dojo и Glow, чтобы сделать JavaScript развития предсказуемым и, чтобы облегчить разработчикам сущий ад, который мы называем поддержки браузера.Другими словами, они фиксируют случайные ошибки в браузерах и бесплатные нас принять стандарты, не беспокоясь, что некоторые браузеры won’ T признают them.

Например, метод DOM getElementById(id) должна быть проста: найти элемент с ID id и вернуть его.Но так как в некоторых версиях IE и Опера также возвращать элементы, которые имеют name атрибут id, JQuery решает проблему этого way:

var elem;

elem = document.getElementById( match[2] );

if ( elem ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}

// Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
}

Здесь библиотеки очень полезно и поэтому наличие библиотеки здесь остаться.Браузер всегда будет делать вещи неправильно, и старые браузеры не будут обновлены конечных пользователей, либо из-за вышеупомянутых правил компанию или потому, что люди просто don’ T уход идти в ногу с times.

Таким образом, в то время как практика создания программного обеспечения для определенных браузеров идет на убыль (по крайней мере JavaScript— с CSS, у нас есть целый другой головной боли впереди нас), мы все еще должны помнить некоторые sins.

Грех № 1: не играет хорошо с других Scripts

Here’ с первой, которую мы все еще видим много в Интернете.К сожалению, это очень распространенная в демо-код для API-интерфейсов и веб-служб: глобальные переменные, функции и DOM-1 handlers.

Что я подразумеваю под этим?Рассмотрим следующий пример:

Каждый скрипт в HTML документ имеет те же права, что и другие, и может, в случае необходимости, переписать то, что другие сценарии сделали before.
Если вы определите переменную или имя функции, и некоторые другие относятся использует то же имя, начальный можно будет overwritten.
То же относится к обработчиков событий, если вы приложите их старой школы onEvent way.

Скажем, у вас есть сценарий script_one.js:

x = 5;
function init(){
  alert('script one init');
  document.getElementsByTagName('h1')[0].onclick = function(){
    this.style.background = 'blue';
  }
}
alert('x is '+x);
window.onload = init;

И сразу же после этого, вы включаете другой сценарий, script_two.js:

  x = 10;
  function init(){
    alert('script two init');
    document.getElementsByTagName('h1')[0].onclick = function(){
      this.style.color = 'white';
    }
  }
  alert('x is '+x);
  window.onload = init;

Если вы открыть этот документ в browser, вы увидите, что X получается от 5 до 10 и что первые init() никогда не вызывается.script two init alert() не придумали, и не h1 получить синий фон, когда вы щелкните по нему.Только текст белым цветом, что делает его invisible.

Решение не использовать onEvent обработчики, а должном уровне DOM 2 обработчиков событий (они don’ T работы в IE, но let’ S Не беспокойтесь о том, что в moment— помню, это то, что библиотекиза).Кроме того, обернитеваши функции в другую с более уникальное имя, чтобы предотвратить их переопределение каждый other.

var scriptOne = function(){
  var x = 5;
  function init(){
    alert('script one init');
    document.getElementsByTagName('h1')[0].addEventListener(
      'click',
      function(e){
        var t = e.target;
        t.style.background = 'blue';
      },
      false
    );
  }
  alert('x inside is '+x);
  return {init:init};
}();
window.addEventListener('load',scriptOne.init,false);
alert('x outside is '+x);

var scriptTwo = function(){
  var x = 10;
  function init(){
    alert('script two init');
    document.getElementsByTagName('h1')[0].addEventListener(
      'click',
      function(e){
        var t = e.target;
        t.style.color = 'white';
      },
      false
    );
  }
  alert('x inside is '+x);
  return {init:init};
}();
window.addEventListener('load',scriptTwo.init,false);
alert('x outside is '+x);

Если вы запустить в браузере (не Internet Explorer 6) , все будет придумать, как вы ожидаете: X является первым 5, затем 10 на внутренней, и заголовок становится синим и белым, когда вы щелкните по нему.Обе init() функции вызываются, too.

Вы также получите сообщение об ошибке.Потому x не определен вне функции, alert('x outside is '+x); никогда не works.

Причина в том, что, двигаясь x в scriptOne и scriptTwo функций и добавления var ключевое слово перед ними, мы сделали их частью этих функций, но скрыл их от внешнего мира.Это называется закрытием и подробно here.Это, вероятно, самая мощная особенность JavaScript.

Использование замыканий и var ключевые слова, вы won’ т есть проблема переменные с одинаковыми именами переопределения друг друга.Это также относится к JQuery. Вы должны имен ваших functions

Это может быть трудно понять, так let’ посмотрим на простой пример:

var x = 4;
var f = 3;
var me = 'Chris';
function init(){}
function load(){}

Все эти глобальные переменные и функции сейчас.Любой другой сценарий с тем же переменным заменит these.

Вы можете вкладывать их в объект, чтобы избежать этого:

var longerAndMoreDistinct = {
  x : 4,
  f : 3,
  me : 'Chris',
  init : function(){},
  load : function(){}
}

Таким образом, только longerAndMoreDistinct носит глобальный характер.Если вы хотите запустить эту функцию, теперь у вас есть, чтобы позвонить longerAndMoreDistinct.init() вместо init().Вы можете добраться до me longerAndMoreDistinct.me и так on.

I don’ т, как это, потому что я должен переключаться с одного на другое обозначение.Таким образом, можно сделать следующее:

var longerAndMoreDistinct = function(){
  var x = 4;
  var f = 3;
  var me = 'Chris';
  function init(){}
  function load(){} 
}();

Вы определяете longerAndMoreDistinct, как результат функции без имени, который получает немедленно казнены (это () на последней строке).Это означает, что теперь все переменные и функции внутри существует только в этом мире и не могут быть доступны извне на всех.Если вы хотите, чтобы сделать их доступными извне, необходимо вернуть их к внешнему миру:

var longerAndMoreDistinct = function(){
  var x = 4;
  var f = 3;
  var me = 'Chris';
  function load(){}
  return {
    init:function(){}
  } 
}();

Сейчас на init() доступен как longerAndMoreDistinct.init() раз.Эта конструкция упаковки вещей в анонимной функции и возвращение некоторых из них называется Модуль pattern, и он держит свои переменные безопасности.Лично я до сих пор ненавижу изменения в синтаксисе, так что я придумал показательным модуль pattern.Вместо возвращения реальные функции, я все это возвращает указатель на него:

var longerAndMoreDistinct = function(){
  var x = 4;
  var f = 3;
  var me = 'Chris';
  function load(){}
  function init(){}
  return {
    init:init
  } 
}();

Таким образом, я могу делать вещи либо доступны или недоступны, просто добавив к объекту, который является returned.

Если вы don’ т необходимо давать ничего в мире, и просто хочу, чтобы запустить код и хранить все ваши переменные иИмена функций безопасности, вы можете отказаться от названия функции:

(function(){
  var x = 4;
  var f = 3;
  var me = 'Chris';
  function load(){}
  function init(){}
})();

Использование var и упаковки кода в этой конструкции делает его недоступным для внешнего мира, но все еще делает его execute.

Вы можете обнаружить, что это будет сложный материал, но есть хороший способ проверить ваш код. JSLint есть валидатор для JavaScript, так же, как HTML или CSS валидаторы, и он расскажет вам все, что может быть не так с вашей code.

Грех № 2: Вера Вместо того, чтобы Testing

Следующий большой грех, связанные с реализацией JavaScript ожидает все, чтобы пойти направо: каждый параметр, находясь в нужном формате, каждый HTML элемент, который вы пытаетесь повышения быть по-настоящему доступны, и каждый конечный пользователь вводить информацию в нужном формате.Это никогда не будет так, и что последнее предположение особенно плохо, потому что она позволяет злоумышленникам внедрить опасный code.

Когда вы пишете JavaScript и передать его мир, или интегрировать его в продукт, который будет поддерживаться третьей стороны, немного паранойи является хорошим thing.

typeof является вашим другом.Регулярные выражения вашего друга.indexOf() split и length ваши друзья.Иными словами, сделать все возможное, чтобы убедиться, что входные данные права format.

Вы получите много ошибок с родным JavaScript; если вы делаете что-то не так, you’ будете знать, что произошло.Раздражающая вещь в большинстве библиотек JavaScript, что, когда они не в состоянии выполнять некоторые функции, они делают это молча.Сопровождающий остается гадать и должна проходить через весь код и начать отладку с остановкой пункта (or— содроганием — alerts()) для реверс-инжиниринг, где вы вошли нестабильным кодом.Чтобы избежать этого, просто обернуть все, что вы можете в тест, а не пытаться получить доступ к it.

Грех № 3: Использование неправильной технологии для Job

Самая большая проблема с JavaScript происходит, когда вы используете не тот инструмент для работы.Это делает обслуживание кошмар и ухудшает code’ с качеством.Используйте инструменты для работы они предназначены.Это означает:

Абсолютно необходимое содержание и наценка должна быть в HTML, независимо от среды она будет отображаться in.
Любое “ вид и feel” элементы должны быть в сопровождении через CSS.Вам не придется рыскать по JavaScript, чтобы изменить color.
Любое взаимодействие с пользователем, который выходит за рамки эффектов при наведении (которые, по определению, invitation взаимодействовать, а не взаимодействие itself— потому что они являются недоступными для пользователей клавиатуры) должно быть сделано с JavaScript.

Главная причина, почему это все еще в силе, прагматичный и разумный подход к развитию является то, что веб-технологий получите запутанным (например, вы можете создавать материалы с CSS и JavaScript, анимацию и преобразовывать в CSS and— если вы действительно want—рисовать с HTML), people’ с навыками и интересами в этих различных технологий могут отличатьсяbit.

Семантический наценки бафы не сильно заинтересованы в применении замыкания в JavaScript.Наличие разработчики не сильно заинтересованы в порядок элементов в CSS.И CSS поклонников aren’ T стремится узнать, как сделать анимацию выполнения JavaScript мерцания free.

В результате те же самые проблемы решаются снова и снова, только с разным технологиям.Это в масштабах всего рынка проблема: многие состоянии-искусство холст трюки были сделаны в годы вспышки назад, их влияние обсуждались и проблемы их fixed.

Мой любимый пример это когда люди пишут петли, чтобы скрыть много элементов на странице, чтобы сделать их доступными позже on.

Скажите это ваш HTML:

<h2>Section 1</h2>
<div class="section">
  <p>Section 1 content</p>
</div>

<h2>Section 2</h2>
<div class="section">
  <p>Section 2 content</p>
</div>

<h2>Section 3</h2>
<div class="section">
  <p>Section 3 content</p>
</div>

<h2>Section 4</h2>
<div class="section">
  <p>Section 4 content</p>
</div>

нормальное решение JQuery для this будет:

$(document).ready(function(){
  $('.section').hide();
  $('h2').click(function(e){
    $(this).next().toggle();
  })
});

И тогда вы поймете, что сделать стиль текущем разделе deviate от других разделов будет great.

$(document).ready(function(){
  $('.section').hide();
  $('h2').click(function(e){
    $(this).next().toggle();
    $(this).next().css('background','#ccc');
    $(this).next().css('border','1px solid #999');
    $(this).next().css('padding','5px');
  })
});

Несколько вещей неправильно с этим.Для начала, you’ внесли его трудно поддерживать это, контролируя выглядеть и чувствовать себя в JavaScript, а не CSS (подробнее об этом позже).Во-вторых, производительность: в то время как JQuery удивительно быстрый, много кода по-прежнему скрыты под капотом в $('.section').hide().Наконец, и очень болезненные, проблемы производительности является скопировали и вставили линий, установить CSS.Don’ T спросить JQuery, чтобы найти следующий элемент в четыре раза и сделать что-то к нему.Вы можете хранить next() в переменной, но даже это не требуется, если вы цепочке.Если вам действительно нужно установить много CSS в JQuery, использовать карту:

$(document).ready(function(){
  $('.section').hide();
  $('h2').click(function(e){
    $(this).next().toggle().css({
      'background':'#ffc',
      'border':'1px solid #999',
      'padding':'5px'
    });
  })
});

Что делать, если вы потом хотите позволить только одну из них, чтобы быть open в любое время?Неопытные разработчики могли бы сделать что-то вроде этого:

$(document).ready(function(){
  $('.section').hide();
  $('h2').click(function(e){
    $('.section').hide();
    $(this).next().toggle().css({
      'background':'#ffc',
      'border':'1px solid #999',
      'padding':'5px'
    });
  })
});

Это делает работу, но you’ повторного цикла вокруг документов и доступа к DOM лот, который медленно.Вы можете облегчить этот счет поддержания текущих открытых раздел в переменной:

$(document).ready(function(){
  var current = false;
  $('.section').hide();
  $('h2').click(function(e){
    if(current){
      current.hide();
    }
    current = $(this).next();
    current.toggle().css({
      'background':'#ffc',
      'border':'1px solid #999',
      'padding':'5px'
    });
  })
});

Предопределить текущего раздела, как false, и установить его при нажатии на первый заголовок.Вы бы тогда скрыть current, только если это правда, тем самым устраняя необходимость для другого цикла по всем элементам, которые имеют класс section.

Но вот что интересно: если все, что вы хотите, чтобы показать или скрыть разделы, вы don’ т необходимо любой цикл на всех!CSS уже идет по документу, когда он делает и применяется классов.Вам просто нужно дать что-то CSS двигатель, чтобы повесить на to, таких как класс body:

$(document).ready(function(){
  $('body').addClass('js');
  var current = null;
  $('h2').click(function(e){
    if(current){
      current.removeClass('current');
    }
    current = $(this).next().addClass('current');
  })
});

При добавлении класса js в текст документа и переключение класса current для текущего раздела, вы сохранить � …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 22.02.2010 by Newsbot