setAttribute, onClick и перекрестная совместимость браузера

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

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

Например:

var items = [1,2,3,4];

$.each(items, function() {
  alert('this is ' + this);
});

var newItems = $.map(items, function(i) {
  return i + 1;
});
// newItems is [2,3,4,5]

Вы также можете использовать функцию карты для удаления элемента из массива. Например:

var items = [0,1,2,3,4,5,6,7,8,9];

var itemsLessThanEqualFive = $.map(items, function(i) {
  // removes all items > 5
  if (i > 5) 
    return null;
  return i;
});
// itemsLessThanEqualFive = [0,1,2,3,4,5]

Вы также заметите, что this не отображается в функции map . Вам нужно будет указать первый параметр в обратном вызове (например, мы использовали i выше). Как ни странно, Во многих случаях IE ошибается, а свойства DOM-HTML короче, быстрее и проще для чтения:

onew.type= 'button';

onew.onclick = function () {fnDisplay_Computers ("'" + alines [i] + "'") ; }; // т.е.

Что такое «алины»? Почему вы конвертируете его в строку и заключаете в одинарные кавычки? Похоже, вы пытаетесь сделать что-то отвратительное, включая оценку кода в строке (это то, что вы делаете ниже в версии 'onew.setAttribute'). Оценка кода JavaScript в строках почти всегда является неправильной вещью; избегайте этого, как чумы. В приведенном выше случае IE должен делать то же самое, что и Firefox: он не должен работать.

Если 'alines [i]' является строкой, я думаю, вы пытаетесь сделать так, чтобы она запомнила эту строку, создав строка кода, которая в JavaScript будет преобразована в исходную строку. Но:

"'" + alines[i] + "'"

недостаточно. Что произойдет, если в 'alines [i]' есть апостроф или обратная косая черта?

'O'Reilly'

у вас есть синтаксическая ошибка и возможная дыра в безопасности. Теперь вы можете сделать что-то кропотливое и раздражающее, например:

"'" + alines[i].split('\\').join('\\\\').split("'").join("\\'") + "'"

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

uneval(alines[i])

Но не все объекты можно даже преобразовать в оцениваемые исходные строки JavaScript; в основном весь подход обречен на провал.

Обычная вещь, которую нужно сделать, если вы просто хотите, чтобы обратный вызов onclick вызывал функцию с параметром, - это написать код простым способом:

onew.onclick= function() {
    fnDisplay_Computers(alines[i]);
};

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

А именно, если 'i' в этом случае является переменной окружающего цикла 'for', ссылка на 'alines [i]' не будет делать то, что вы думаете, что она делает. Функция 'i' будет доступна для функции обратного вызова, когда произойдет щелчок - то есть после цикла завершенного. На этом этапе переменная 'i' останется с любым значением, которое у нее было в конце цикла, поэтому 'alines [i]' всегда будет последним элементом 'alines', независимо от того, на какой элемент 'onew' был нажат.

(См., Например, Как исправить проблему с замыканием в ActionScript 3 (AS3) для некоторого обсуждения этого. Это одна из главных причин путаницы с замыканиями в JavaScript и Python, и она действительно должна быть однажды исправлено на уровне языка.)

Вы можете обойти проблему цикла, заключив замыкание в его собственную функцию, например так:

function callbackWithArgs(f, args) {
    return function() { f.apply(window, args); }
}

// ...

onew.onclick= callbackWithArgs(fnDisplay_Computers, [alines[i]]);

И в более поздней версии JavaScript вы можете просто сказать:

onew.onclick= fnDisplay_Computers.bind(window, alines[i]);

Если вы хотите использовать функцию Function.bind () в браузерах сегодня, вы можете получить реализацию из Прототип Framework, или просто используйте:

if (!('bind' in Function.prototype)) {
    Function.prototype.bind= function(owner) {
        var that= this;
        var args= Array.prototype.slice.call(arguments, 1);
        return function() {
            return that.apply(owner,
                args.length===0? arguments : arguments.length===0? args :
                args.concat(Array.prototype.slice.call(arguments, 0))
            );
        };
    };
}

Используйте функцию addEventListener () с « click » для аргумент типа для браузеров на базе Mozilla и функция attachEvent () с « onclick » в качестве аргумента sEvent для IE; Я считаю, что лучше всего использовать оператор try / catch, например:

try {
  onew.attachEvent("onclick", //For IE
                   function(){fnDisplay_Computers("'" + alines[i] + "'"); });
}
catch(e) {
  onew.addEventListener("click", //For Mozilla-based browsers
                   function(){fnDisplay_Computers("'" + alines[i] + "'"); },
                   false);
}

Думаю, №3 слишком сильно протестует. Во многих ситуациях я создаю таблицу динамически, и мне нужно передать параметры функции обратного вызова. Это не типичная проблема, поскольку моя переменная parm является целочисленным индексом для рассматриваемой строки таблицы. Вот код с переменным и фиксированным параметром, который кажется кроссбраузерным:

for (i = 0; i < arrTableData.length; i++) {
    eleTR = objTable.insertRow(i + 1);
    cell = eleTR.insertCell(0);
    cell.width = "21";
    var myElement = document.createElement('img');
    myElement.setAttribute('src', 'images/button_down.gif');
    myElement.setAttribute('alt', 'Move item down');
    myElement.onclick = new Function('moveItem(' + i + ',0)');
    cell.appendChild(myElement);
}