Эта статья была опубликована KnewHow в блоге команды ScalaCool.
Привет, я KnewHow, бывший разработчик Java. Почему ты говоришь "до"? Это началось, когда я присоединился к новой компании две недели назад.
В первый день моего трудоустройства тьютор-стажер сказал мне, что будет месячная программа адаптации новичков, на тот момент я был еще очень доволен, я чувствовал, что компания более гуманна и не относится к инженерам как к рабочей силе. .
Но потом я был потрясен. Потому что во время собеседования я узнал, что компания пропагандирует культуру полного стека.После развертывания всех офисных сред стажёр-тьютор сказал мне, что первым навыком для начала обучения оказалось «реконструкция фронтенд-страницы»! ! !
Вот каким было мое сердце в то время.
Вы знаете, я ничего не знаю о интерфейсе, кроме нескольких основных тегов. Впрочем, я быстро скорректировал свой статус, разве это не просто front-end разработка, для моей остроумной меня это не должно составить труда.
————————— Нижеследующее начинается с серьезного лица —————————Что такое рефакторинг страницы
Ну и первый вопрос: что такое так называемый "рефакторинг страницы"?
Репетитор-стажер сделал запрос, и у него должно быть свое глубокое понимание, хорошо. . . . .
Итак, я оторвал взгляд от экрана компьютера и начал искать другой ответ. Вскоре я заметил свой стол, и он был таким.
На мой взгляд, рефакторинг фронтэнд страницы,Разве суть не в том, чтобы разобраться с отношениями пространственной компоновки?
Итак, каким бы остроумным я ни был, я быстро придумал свои идеи и ответы.
На картинке выше показана сцена из повседневной жизни: «Стол с размещенными на нем предметами. Рабочий стол является фоном, книги и клавиатуры расположены рядом, белые книги и фиолетовые книги перекрываются, а фиолетовая книга находится на сверху. мышь».
По сути, это макет, похожий на веб-страницу.
Затем я посмотрел на стол своего коллеги рядом со мной, а также посмотрел на офисную среду всей компании.
Затем я обнаружил, что в макете есть три отношения:Композиция, содержащая и перекрывающаяся.
Итак, я сказал этот вывод стажеру-инструктору. Стажер-тьютор долго думал после прослушивания, но все же выразил свою признательность. После этого он задал второй вопрос:
Итак, что вы имеете в виду под "коробочной моделью"?
На этот раз я сразу же погуглил концепцию. Как бы я ни был остроумен, на основании вышеприведенных выводов я вскоре пришел к следующему толкованию.
коробочная модель
На мой взгляд, "коробочная модель",Суть в том, чтобы разобраться с соотношением между размером, положением и расстоянием элементов в макете.
В приведенном выше сценарии клавиатура и фиолетовая книга имеют размеры, границы, они расположены рядом, а расстояние между ними может быть представлено «полем» в блочной модели.
Мышь содержится в фиолетовой книге (если смотреть в полном 2D), и их расстояние можно выразить с помощью «отступов».
Белая книга и фиолетовая книга перекрываются, как это представить?
Ха-ха, их тоже можно обрабатывать с помощью «маржи» одной стороны, но только если значение отрицательное.
Я нашел репетитора-стажера и сказал ему ответ, который я только что обобщил.Он слегка улыбнулся: «Этот ответ неплох», а затем спросил:
Так как же «коробочная модель» используется в веб-верстке?
В то время мои мысли были такими:
Почему у тебя столько проблем, у тебя еще столько проблем!!!
Разумно, я подавил свои небольшие эмоции, не так ли просто использовать «коробочную модель»?
Макет абсолютного позиционирования
Остроумно, я на мгновение задумался, и вскоре у меня был ответ, это было слишком просто!
Интуитивно нам просто нужно разделить веб-страницу на маленькие кусочки и отрегулировать их положение.
Возьмем в качестве примера домашнюю страницу Douban. Мы можем разделить первую строку на три части, а именно: логотип Douban, окно поиска и следующие популярные темы поиска.
Тогда нам просто нужно использовать «margin», чтобы установить расстояние между ними и левой границей браузера, и все.
Ха-ха, я просто гений.
Я дал свой ответ стажеру-тьютору. В глубине души я сказал: «Я умный».
Стажер-тьютор взглянул на мой ответ, но ожидаемой похвалы и одобрения не последовало.
Он перевел взгляд на меня и сказал: «Ваш план осуществим, но были допущены как минимум две ошибки».
①В абсолютном позиционировании margin не используется для указания смещения позиции, мы должны использовать top и left .(Смотрите также:position)
②Только Xiaobai начального уровня будет использовать «макет с абсолютным позиционированием» в качестве основного метода макета веб-страницы.Это решение очень неэффективно!
Схема абсолютного позиционирования — анализ неэффективности
«Ах, неэффективно? Почему неэффективно?»
"На веб-странице будут сотни элементов.Если вы измерите поля каждого элемента, будет ли эта эффективность очень низкой?"
«Макет iOS имеет более четкое описание: суть абсолютного позиционирования заключается в позиционировании начальной точки представления, высоты и ширины по кадру».
«Это требует, чтобы вы рассчитали положение и размер каждого представления».
"Еще более пугающим является то, что если однажды положение или размер элемента изменится, другие элементы также могут быть изменены, что еще более неэффективно!"
«Проще говоря, это означает дергать один волос и двигать всем телом!»
"Текущие макеты страниц используютплавающий макет, иди, проведи небольшое исследование. "
плавающий макет
Я гуглил плавающие макеты и макеты с абсолютным позиционированием. Гениально я нашел одно из самых существенных их отличий:
Макеты с абсолютным позиционированием используют границы окна браузера в качестве ссылки, а положение элемента задается относительно границ браузера.
Однако в абсолютной макете позиционирования элемент и элемент рассматриваются как несуществующие, что означает, что, когда положение и размер элемента изменяется, он не повлияет на другие элементы..
В плавающем макете его положение обычно обрабатывается с помощью «плавающего», а на положение элемента влияют другие элементы.
Если положение или размер элемента, на который делается ссылка, изменится однажды, положение текущего элемента также изменится соответствующим образом. Это более эффективно.
Я взволнованно рассказал стажеру-тьютору о результатах исследования, и, прочитав его, стажер-тьютор сказал: «Все в порядке».
Затем он спросил: «Если бы вам сейчас дали веб-страницу, вы бы знали, как ее оформить?»
"это..."
Формула рефакторинга страницы
— Глядя на твой нерешительный взгляд, скажу прямо.
"Ставим магнит вверху слева на веб-странице, тогда все элементы будут притягиваться магнитом, тогда противоположное направление магнитной силы будет направлением нашего макета."
«Итак, направление нашего макета — начинать слева направо, затем сверху вниз, от целого к части и разбивать его на ноль!»
"Вы понимаете?"
— Я все еще не совсем понимаю.
— Тогда давай потренируемся.
«Глядя на домашнюю страницу этого Douban, сначала посмотрите на все в целом, и ее можно разделить на несколько частей слева направо».
"Отдельно."
"правильный."
«Потому что вся страница — это только середина».
«Сверху вниз видно, что эту страницу можно разделить на несколько разделов».
«Кажется, это слишком много. Каждую строку можно разделить на части».
"Неплохо, видите, вы освоили правила, посмотрите на следующее можно разделить на несколько частей".
"это..."
«Не волнуйтесь, согласно моей формуле, сначала смотрите на части слева направо, а затем смотрите на части сверху вниз».
«Его можно разделить на три части слева направо».
«Сверху вниз это часть этого, я чувствую, что нет другой вещи».
«Неплохо, давайте сделаем еще один сложный, и посмотрим, как это можно разделить на несколько частей».
«Его можно разделить на три части слева направо».
«Его можно разделить на один раздел сверху вниз».
"Что насчет этого?"
«Одна часть слева направо и одна часть сверху вниз».
"что насчет этого?"
«Одна секция слева направо, три секции сверху вниз».
"что насчет этого?"
«Один раздел слева направо, четыре раздела сверху вниз, а затем разделены на более мелкие модули».
— Вы нашли какую-нибудь закономерность?
«То есть в порядке слева направо, сверху вниз сначала разделите веб-страницу целиком, затем разделите по очереди небольшие модули, а затем разделите более мелкие модули и так далее рекурсивно».
"Хорошо! Вы узнали это!"
"Ах! Это так просто? Тот, кто может задать тебе вопрос? Можем ли мы начать сверху вниз, а затем слева направо?"
Нет, потому что люди привыкли просматривать веб-страницы сначала слева направо, а затем сверху вниз. Такой дизайн будет иметь лучшие визуальные эффекты. "
Суммировать
Что ж, благодаря этой статье мы поняли формулу рефакторинга страницы внешнего интерфейса и повторяем: "Слева направо, сверху вниз, округляя до нуля".
Затем, в последующих статьях, мы дополнительно представим так называемые ментальные методы и ходы.