Я знал об ИКЕА давно и зашёл туда однажды, когда был в Гуанчжоу. У меня сложилось впечатление, что он большой, дорогой и шикарный. Место большое, вещи дорогие, дизайн продуманный. Сейчас я живу недалеко от ИКЕА. В этом месяце я нашел время сходить за покупками. Место все еще такое большое, вещи все еще такие дорогие, а дизайн по-прежнему такой умный. Хотя я ничего не купил, кое-что все же приобрел. Благодаря методам проектирования мебели ИКЕА можно говорить о модульности.
Студенты, побывавшие в ИКЕА, должны были заметить, что мебель ИКЕА в основном модульная и съемная. То же самое относится и к характеристикам модульности. Она может быть комбинированной, относительно независимой и легко добавляемой при необходимости. Итак, как мы можем реализовать этот метод? Приведите простой пример:
<div class="mode-a">
<h3>Модульная демонстрация</h3>
<p>Пример модульной структуры. </p>
</div>
Соответствующий CSS можно написать так:
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
Среди них «mode-a» — имя этого модуля, указывающее, что это модуль с именем «a». Теперь этот модуль можно разместить там, где вам нужно. Так как мы делаем модуль, то он будет не один, добавим еще один "mode-b":
<div class="mode-b">
<h3>Модульная демонстрация</h3>
<дел>
<h4>Модульные функции:</h4>
<ул>
<li>Относительно независимы.</li>
<li>Высокая мобильность</li>
</ul>
</div>
</div>
Соответствующий CSS можно написать так:
.mode-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
В практических приложениях часто необходимо добавить несколько имен классов, чтобы уменьшить сложность определений классов. Этот пример относительно прост, но его достаточно, чтобы проиллюстрировать характеристики модульности. Вышеупомянутые два модуля можно использовать на одной или нескольких страницах одновременно.
В магазинах ИКЕА вы, возможно, заметили, что товарные зоны в основном разделены дизайнерами, особенно это касается мелких предметов. Модульный код также можно поручить написание разным людям для повышения эффективности. Конечно, чтобы реализовать этот метод, нам также нужно проделать некоторую работу, например соглашение об именовании модуля, где интерфейсы нужно оставить в модуле и т. д. Как и в приведенном выше примере, можно договориться, что имя начинается с «mode», а в заголовке модуля используется тег h3. Таким образом, независимо от того, кто напишет модуль, он будет совместим со страницами проекта.
Увидев это, вы можете обнаружить, что, поскольку фиксированная структура модуля была согласована выше, не является ли эта часть, написанная в определении стиля каждого модуля, избыточной? Да. Если соответствующие соглашения сформированы, эта часть определения стиля может быть предложена и включена в публичное определение проекта, чтобы уменьшить избыточность кода. Приведенный выше пример может стать:
/* =S глобальный */
ч3{
/* Первый способ записи */
...
}
.mode-a h3,
.mode-b h3{
/* Второй способ записи*/
...
}
/* =E глобальный */
/* =S режим-a */
.mode-a{...}
.mode-a p{...}
/* =E режим-a */
/* =S режим-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
/* ==Режим E-b */
Интересно, замечали ли вы, что эти небольшие предметы в ИКЕА часто можно комбинировать с другими предметами? Это также поднимает еще одну тему модульности: модули внутри модулей. То есть в модуле могут существовать и другие модули, что тоже легко понять. Так же, как когда мы создаем веб-сайт, структура всей страницы похожа на большой модуль, а приведенный выше пример — это модуль внутри. модуль, но давайте сузим это определение на один уровень. Определение h3 в приведенном выше примере можно рассматривать как модуль. Он присутствует в обоих модулях «mode-a» и «mode-b», и его структурные характеристики относительно фиксированы.
Хорошо, это всего лишь определение метки. А что, если меток несколько? Давайте снова изменим пример:
<div class="mode-b">
<div class="mode-a">
<h3>Модульная демонстрация</h3>
<p>Пример модульной структуры. </p>
</div>
<div класс="продолжение">
<h4>Модульные функции:</h4>
<ул>
<li>Относительно независимы.</li>
<li>Высокая мобильность</li>
</ul>
</div>
</div>
<div class="mode-c">
<div class="mode-a">
<h3>Модульная демонстрация</h3>
<p>Это пример «модуля внутри модуля». </p>
</div>
<div класс="продолжение">
<h4>Модули внутри модулей:</h4>
<p>Модуль «mode-a» — это модуль внутри модуля. </p>
</div>
</div>
/* =S режим-a */
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
/* =E режим-a */
/* =S режим-b */
.mode-b{...}
.mode-b h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =E режим-b */
/* =S режим-c */
.mode-c{...}
.mode-c h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =E режим-c */
Как видно из вышеизложенного, «режим-a» является независимым модулем. Когда он является частью «режим-b» и «режим-c», он становится модулем внутри модуля. Отбрасываем кирпичи, надеясь вызвать более релевантные дискуссии.