Статьи

Web Dev Q & A # 1: обратные вызовы, LESS и плавающие

Январь 21, 2019

Сегодня мы отмечаем первую запись в новой серии «Web Dev Q & A». Я часто пишу по электронной почте о различных вопросах, связанных с веб-разработкой. Хотя некоторые из них более конкретны, чем другие, я уверен, что многие из них понравятся всем нашим читателям. Таким образом, каждую неделю или около того мы будем публиковать новую группу вопросов и ответов от сообщества в виде статьи и видео для вашего удобства.

На этой неделе мы обсудим функции обратного вызова JavaScript, LESS-компилятор и эти хитрые CSS-плавающие элементы.


Подпишитесь на нашу страницу YouTube, чтобы посмотреть все видеоуроки!
Предпочитаете смотреть это видео на Screenr ?

1. Функции обратного вызова JavaScript?

«Привет, Nettuts +: есть ли простой способ создания функций обратного вызова с обычным JavaScript, подобный тому, что мы можем сделать с jQuery?»

Конечно. Это легко. Например, давайте создадим универсальную функцию.

1
2
3
4
5
function doSomething(name) {
   alert(‘Hello, ‘ + name);
}
 
doSomething(«John and Kate Plus 8»);

При вызове, как и ожидалось, браузер выдаст предупреждение «Привет, Джон и Кейт Плюс 8». Теперь, если мы хотим передать также функцию обратного вызова, как второй параметр функции doSomething, мы можем просто передать анонимную функцию.

1
2
3
4
5
6
7
function doSomething(name, cb) {
   alert(‘Hello, ‘ + name);
}
 
doSomething(«John and Kate Plus 8», function() {
   alert(‘this callback function will only run after doSomething has’);
});

Обратите внимание, как мы добавили второй аргумент в функцию doSomething () : «cb.» Вы можете пометить это так, как пожелаете, хотя обычно это обозначается как «cb», что означает « c all b ack». Теперь эта анонимная функция будет представлена ​​через эту переменную.

Последний шаг — просто вызвать его в нижней части функции.

1
2
3
4
5
6
7
8
function doSomething(name, cb) {
   alert(‘Hello, ‘ + name);
  cb();
}
 
doSomething(«John and Kate Plus 8», function() {
   alert(‘this callback function will only run after doSomething has’);
});

2. Меньше компилятора для Coda?

Уважаемый Nettuts +: Мне понравилось ваше видео на LESS.js , но я не хочу использовать его для производства. Есть ли приложение для Coda, которое будет автоматически компилировать мой код?

Конечно, вещь. Лучшее решение, которое мне удалось найти, называется LESS.app .

МЕНЬШЕ ПРИЛОЖЕНИЕ

После загрузки (бесплатно) вы просто перетаскиваете папку своего проекта в приложение, которое инструктирует его просматривать все файлы .LESS. На этом этапе вы можете продолжить работу над своим проектом, как обычно. Каждый раз, когда вы сохраняете, запускается компилятор, который генерирует / обновляет автоматически созданный файл style.css . Когда вы закончите разработку своего приложения, вам нужно всего лишь изменить ссылки на таблицы стилей с style.less на style.css , соответственно. Легко! Теперь нет причин не использовать LESS — если только вы не используете другое решение, такое как Sass .

Создает CSS-файл

3. Где мой фон?

«Привет, Nettuts +: у меня есть меню навигации со списком горизонтальных ссылок; но когда я устанавливаю цвет фона для меню, ничего не появляется? Как получилось? Вот мой код:»

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»
    «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
 
<html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»en» lang=»en»>
<head>
    <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″/>
 
    <title>Menu Problem</title>
    <style type=»text/css»>
        #nav {
            background: black;
        }
         
        #nav li {
            float: left;
            padding-right: 10px;
            list-style: none;
        }
    </style>
     
</head>
 
<body>
    <ul id=»nav»>
        <li><a href=»#»>Link</a></li>
        <li><a href=»#»>Link</a></li>
        <li><a href=»#»>Link</a></li>
        <li><a href=»#»>Link</a></li>
    </ul>
</body>
</html>
Где цвет фона

Хорошо, это обычная путаница. Причина, по которой фон «черный» не появляется, заключается в том, что вы переместили все элементы списка слева. Когда вы это сделаете, родительский элемент (#nav) будет свернут. Есть два решения:

1. Установите «переполнение: скрытый»;

«Переполнение: скрытый» — это хитрый маленький трюк, который был обнаружен только в последние несколько лет, примерно в 2005 году. Применение значения «скрытый» или «автоматический» к свойству «переполнение», похоже, напоминает родительскому элементу, что это должно обернуть своих детей! Логика немного странная, я признаю; Однако, тем не менее, это работает.

1
2
3
4
#nav {
    background: black;
    overflow: hidden;
}
Исправлена

2. Clearfix

Установка «переполнения» работает в 80% случаев, хотя могут быть случаи, когда нам нужно перекрывать границы родительского элемента, и в этом случае «переполнение: скрыто»; отрубит изображение / элемент. Второе решение — использовать популярный метод clearfix. Вы будете часто его использовать, поэтому я рекомендую вам продолжить и сохранить код в своем любимом инструменте управления фрагментами, например TextExpander , Texter или Snippets .

Сначала вернитесь к разметке и примените класс «clearfix» к родительскому элементу.

1
<ul id=»nav» class=»clearfix»>

Далее давайте добавим соответствующий стиль для этого класса. Основная функциональность заключается в том, что мы используем класс «after» psuedo в родительском элементе для применения содержимого, а затем впоследствии очищаем этот контент — что по сути имитирует добавление <div style = «clear: both;»> </ div> к нижняя часть вашей разметки. Однако этот метод умнее и не портит нашу красивую семантическую разметку.

01
02
03
04
05
06
07
08
09
10
11
.clearfix {
    *zoom: 1;
}
.clearfix:after {
    content: » «;
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}

«hasLayout важен, потому что он заставляет элемент иметь прямоугольную форму».

Как видите, мы используем «: after», чтобы добавить пробел после всего размещенного контента. Затем мы устанавливаем блокировку дисплея и очищаем его, что заставляет родителя обернуть перемещенные потомки. Наконец, мы установили некоторые общие правила видимости, размера шрифта и высоты, чтобы этот код не влиял на наш макет в некоторых браузерах.

Стоит отметить объявление «* zoom: 1» вверху. Свойство «zoom» позволяет нам запускать собственное свойство IE hasLayout. hasLayout важен, потому что он заставляет элемент иметь прямоугольную форму. Это означает, что содержимое элемента не может обтекать другие блоки, что часто вызывает серьезные проблемы с макетом вашего веб-сайта. Когда собственное свойство Microsoft «hasLayout» равно true, элемент «имеет макет». К счастью, мы можем вызвать это, добавив определенные свойства к нашим селекторам, включая «масштабирование». Другие триггеры hasLayout, чтобы назвать только несколько, являются:

  • плавать: влево / вправо
  • дисплей: встроенный блок
  • положение: абсолют
  • высота: любое значение (не авто)
Исправлена

Вывод

Это будет сделано для этой флагманской записи «Web Dev Q & A». Если у вас есть «не слишком сложный» вопрос веб-разработки для нас, вы можете:

  1. Напишите [email protected] и напишите «Web Dev Q & A» в качестве темы письма.
  2. Чирикать нам @nettuts и хэш «#askNettuts».
  3. Оставьте комментарий под любой публикацией «Web Dev Q & A» с вашим новым вопросом.

Спасибо за чтение и просмотр!

33
Share: