08 Разумно ли использовать Fluid Layout?

Размер браузера Google Labs


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

Но теперь «картинка» изменилась, существует большое расхождение между самым низким и самым высоким разрешением, используемым большинством пользователей. в настоящее время , и они, кажется, здесь, чтобы остаться.

У меня нетбук, который поддерживает только 800 пикселей или 1024 пикселей в ширину; У меня также есть 22 "монитор, который поддерживает 1650 пикселей и 24" мониторы, которые поддерживают 1920 пикселей и более, становятся довольно распространенными.

Я в значительной степени "проигнорировал" пользователи с разрешением 800 пикселей в течение некоторого времени, и я занимаюсь разработкой с фиксированной шириной 950/960 пикселей, я также заметил, что популярные сайты ( SO для одного) либо используют этот подход, либо гибкий подход.

Для текстовых (почти) только веб-сайтов (таких как Wikipedia ) я не вижу проблемы с использованием флюидной системы, но как насчет всех других веб-сайтов, которые используют изображения / видео для создания интересного контента ? Социальные сети, объявления и т. Д. Каков (будет) их подход к решению этой проблемы?

Резьба по шву кажется хорошим вариантом на ближайшее будущее, но она еще недостаточно созрела (ни браузеры и jQuery изначально не поддерживают его на данный момент), я также чувствую, что пользователи не поймут его, не запутаются и, как следствие, покинут сайт. значит? Я использовал JSLint в моем файле JavaScript. Она вызвала ошибку: for (ind в evtListeners) {Проблема в строке 41, символ 9: Тело for in должно быть включено в оператор if для фильтрации ...

Я использовал JSLint в мой файл JavaScript. Это выдало ошибку:

for( ind in evtListeners ) {

Проблема в строке 41, символ 9: Тело для in должно быть завернутый в оператор if для фильтрации нежелательных свойства прототипа.

Что это значит?

235
задан Alex Angas 10 November 2010 в 14:00
поделиться

5 ответов

Прежде всего, никогда никогда не используйте цикл for in для перечисления по массиву. Никогда. Используйте старый добрый для (var i = 0; i .

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

Array.prototype.filter_0 = function() {
    var res = [];
    for (var i = 0; i < this.length; i++) {
        if (this[i] != 0) {
            res.push(this[i]);
        }
    }
    return res;
};

console.log([0, 5, 0, 3, 0, 1, 0].filter_0());
//prints [5,3,1]

Это стандартный способ расширения объектов и добавления новых методов. Многие библиотеки это делают. Однако давайте посмотрим, как теперь работает for в :

var listeners = ["a", "b", "c"];
for (o in listeners) {
    console.log(o);
}
//prints:
//  0
//  1
//  2
//  filter_0

Вы понимаете? Он внезапно думает, что filter_0 - это еще один индекс массива. Конечно, на самом деле это не числовой индекс, но for in перечисляет через поля объекта, а не только числовые индексы. Итак, теперь мы перебираем каждый числовой индекс и filter_0 . Но filter_0 не является полем какого-либо конкретного объекта массива, теперь это свойство есть у каждого объекта массива.

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

for (o in listeners) {
    if (listeners.hasOwnProperty(o)) {
       console.log(o);
    }
}
 //prints:
 //  0
 //  1
 //  2

Обратите внимание, что хотя этот код работает как ожидалось для массивов, вы никогда не должны никогда , использовать для в и для каждого в для массивов. Помните, что for in перечисляет поля объекта, а не индексы или значения массива.

var listeners = ["a", "b", "c"];
listeners.happy = "Happy debugging";

for (o in listeners) {
    if (listeners.hasOwnProperty(o)) {
       console.log(o);
    }
}

 //prints:
 //  0
 //  1
 //  2
 //  happy
417
ответ дан 23 November 2019 в 03:27
поделиться

Это означает, что свойства evtListeners следует фильтровать методом hasOwnProperty.

.
0
ответ дан 23 November 2019 в 03:27
поделиться

Дуглас Крокфорд, автор jslint, много раз писал (и говорил) по этому вопросу. На этой странице его сайта есть раздел, посвященный этому вопросу:

для утверждения

A для класса утверждений должен иметь следующая форма:

for (инициализация; условие; обновление) {
 заявления
}

для (переменная в объекте) {
 если (фильтр) {
 заявления
 } 
}

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

Вторая форма должна быть использована с объекты. Имейте в виду, что члены, которые добавлены к прототипу объект будет включен в перепись. Разумно запрограммировать оборонительно с помощью hasOwnProperty метод различения истинные члены объекта:

for (переменная в объекте) {
 если (object.hasOwnProperty(переменная)) {
 заявления
 } 
}

У Крокфорда также есть видео-сериал о театре ЮИ, где он рассказывает об этом. Серия видео/бесед Крокфорда о JavaScript - это то, что вы должны увидеть, если вы даже слегка серьезно относитесь к JavaScript.

86
ответ дан 23 November 2019 в 03:27
поделиться

Ответ Вавы находится на метке. Если использовать jQuery, то функция $.each() позаботится об этом, поэтому использовать ее безопаснее.

$.each(evtListeners, function(index, elem) {
    // your code
});
9
ответ дан 23 November 2019 в 03:27
поделиться

Конечно, было бы немного преувеличением сказать

... никогда не используйте цикл for in для перечисления по массиву. Никогда. Используйте старый добрый для (var i = 0; i

?

Стоит выделить раздел в выдержке Дугласа Крокфорда

. ..Вторую форму следует использовать с объектами ...

Если вам требуется ассоциативный массив (также известный как хэш-таблица / словарь), в котором ключи именуются, а не индексируются численно, вам придется реализовать это как объект, например var myAssocArray = {ключ1: "значение1", ключ2: "значение2" ...}; .

В этом случае myAssocArray.length будет иметь значение null (потому что этот объект не имеет свойства length), а ваш i не будет получить очень далеко. В дополнение к большему удобству я ожидал бы, что ассоциативные массивы будут предлагать преимущества в производительности во многих ситуациях, поскольку ключи массива могут быть полезными свойствами (то есть свойством или именем идентификатора члена массива), что означает, что вам не нужно повторять длинный array, многократно оценивающий операторы if, чтобы найти нужную запись в массиве.

В любом случае, спасибо также за объяснение сообщений об ошибках JSLint, теперь я буду использовать проверку isOwnProperty при взаимодействии с моими мириадами ассоциативных массивов!

2
ответ дан 23 November 2019 в 03:27
поделиться
Другие вопросы по тегам:

Похожие вопросы: