머리말
현대 프론트 엔드 분야에서 스키닝 기능은 점차 거의 모든 응용 분야의 표준이되었으며 특히 다크 나이트 모드가 촉진 된 후 피부 기능은 공식적으로 대중의 시야에 들어 왔습니다. 유사하게 웹 분야, 특히 백그라운드 관리 시스템에서 스킨은 결과적으로 기능이 거의 표준이 되었고, 최근에 하고 있는 일들도 이런 메커니즘을 포함하게 됩니다~
그래서 오늘은 실제로 웹상의 다중 스킨 기능 구현 솔루션의 장단점에 대해 이야기 해 보려고 합니다.이 기사의 솔루션은 거의 대기업 블로그 게시물에서 가져온 것입니다.다음 내용은 개인적인 관점에서만 분석됩니다. 각 솔루션 자체는 장단점이 없고 사용 환경에 따라 다양한 장점과 단점이 나올 뿐입니다 .
원칙
먼저 스킨 필링 원리에 대해 말씀드리자면, 이해하고 나면 두 종류 밖에 없습니다.
- 스타일 재정의는 간단히 말해서 CSS 가중치의 우선 순위를 사용하는 것이며 가중치가 높은 스타일은 가중치가 낮은 스타일을 재정의하여 위치, 색상 등을 변경합니다.
- SCSS, LESS 또는 CSS의 가변 메커니즘을 최대한 활용하고 변수 값의 차이를 사용하여 대체하여 스킨의 기능을 변경하는 변수 치환;
사실, 나는 개인적으로 둘 사이에 본질적인 차이가 없다고 생각합니다.
스키닝 프로그램
첫 번째: CSS 스타일 재정의
이 솔루션에서는 CSS 자체의 기능을 사용하여 달성할 수 있으며 SCSS, LESS 등은 사용하지 않습니다(물론 SCSS 및 LESS는 확실히 수행할 수 있으며 CSS 전처리기의 기능은 실제로 CSS를 기반으로 합니다. 많이 발전했습니다. CSS를 사용하여 이 방법을 사용할 수 있습니다.)
예시
대략적인 샘플 코드는 Vue를 예로 들면 다음과 같습니다.
<!-- 这是一个登陆界面的代码 -->
<template>
<div class="page-account" :class="theme">
<Login @on-submit="handleSubmit" class="login-conatiner">
<UserName name="username" value="admin" class="login-username" />
<Password name="password" class="login-password" value="admin" enter-to-submit />
<div class="page-account-auto-login login-conatiner-light">
<Checkbox v-model="autoLogin" size="large">{
{
$t("page.login.remember")
}}</Checkbox>
<a href="">{
{
$t("page.login.forgot") }}</a>
</div>
<Submit>{
{
$t("page.login.submit") }}</Submit>
</Login>
</div>
</template>
코드에서 보는 바와 같이 클래스는 코드에 바인딩되어 있으며 , 클래스의 값은 vuex에서 가져온 스타일 이름 또는 스킨의 기본 스타일 이름인 현재 인터페이스의 계산된 값으로, 클래스 이름에 해당하는 CSS 코드가 작성됩니다. , 대략 다음과 같습니다.
<style scoped>
/** 白天模式 */
.light .login-conatiner {
background: #ffffff;
color: #333333;
font-size: 1rem;
}
.light .login-username {
background: #ffffff;
color: #333333;
font-size: 1rem;
}
.light .login-password {
background: #ffffff;
color: #333333;
font-size: 1rem;
}
/** 夜晚模式 */
.dark .login-conatiner {
background: #333333;
color: #ffffff;
font-size: 1rem;
}
.dark .login-username {
background: #333333;
color: #ffffff;
font-size: 1rem;
}
.dark .login-password {
background: #333333;
color: #ffffff;
font-size: 1rem;
}
</style>
Vuex의 스킨 이름이 변경되면 스킨 이름 아래 해당 클래스 이름의 값이 그에 따라 변경되고 해당 스타일이 원래 스타일을 덮어쓰므로 스키닝 효과를 얻습니다.
이점
이 스킨 방식의 장점은 수정이 편리하고 구조가 매우 명확하다는 것이 나에게 매우 명백합니다. 수정하고 싶은 곳 어디에서나 직접 수정할 수 있습니다. 결국 우수한 코드는 다음과 같은 다양한 요소를 고려해야 할 뿐만 아니라 코드의 양, 원리, 유지보수성 등으로 볼 수 있지만 시작의 어려움을 고려하면 간단한 구현, 프로젝트를 인수하는 새로운 사람도 약간 익숙해지면 바로 추가 및 수정을 시작할 수 있습니다.
결점
스킨의 여러 세트는 스타일 시트의 세트가 여러 개이고 코드의 양이 많고 개발 효율성이 상대적으로 낮으며 여러 사람이 공동으로 개발하는 경우 초기에 합의할 수 있습니다. 이 계획은 실제로 중소 규모의 프로젝트입니다., 하나 또는 두 개의 프런트 엔드 개발 통신 비용이 낮습니다.
최적화
색상을 변수로 균일하게 정의하는 등 실제 프로젝트에서 확실히 최적화할 수 있습니다.실제로 LESS, SASS 뿐만 아니라 CSS3의 변수 기능도 다음과 같습니다.
:root {
--theme-light-bg: #ffffff; // 背景色
--theme-light-color: #333333; // 字体色
--theme-light-border: #e1e1e1; // 边框色
}
이러한 방식으로 색상을 통일적으로 관리할 수 있습니다.나중에 스킨 세트를 추가하려면 스킨 에 해당하는 색상 세트만 추가하면 되므로 더 편리합니다.또한 LESS 또는 LESS로 관리 하는 것이 더 편리합니다. SASS . 이 전처리기들은 변수 기능을 제공할 뿐만 아니라 믹싱, 네스팅, 심지어 기능까지 제공합니다... 이것들을 사용하게 되면 실제로 실제 프로젝트에서 이 솔루션이 매우 실현 가능한 기능이라고 개인적으로 생각합니다.
두 번째: 변수 대체
사실 이 방법은 첫 번째 방법과 어느 정도 비슷한 느낌이 들지만 가장 큰 차이점은 첫 번째 방법은 가중치를 사용하여 덮고 두 번째 방법은 직접 설정 한다는 점입니다 .실제로 핵심 기능은 하나뿐입니다.
// 设置CSS变量值
document.body.style.setProperty(变量名，变量值);
이 기능은 루트 노드에 해당 CSS 변수의 값을 설정할 수 있습니다.이 값을 변경하는 한 이 값을 참조하는 모든 위치가 변경되어 스키닝 효과를 얻을 수 있습니다.
예시
예를 들어 CSS 변수 세트를 설정합니다.
// 默认值
:root {
--theme-bg: #fff;
--theme-color: rgb(51, 50, 50);
--theme-size: 1rem;
}
후속 프로젝트에서 우리는 모두 이 변수 세트를 사용합니다.
<style scoped>
.login-conatiner {
background: var(--theme-bg);
color: var(--theme-bg);
font-size: var(--theme-size);
}
.login-username {
background: var(--theme-bg);
color: var(--theme-bg);
font-size: var(--theme-size);
}
.login-password {
background: var(--theme-bg);
color: var(--theme-bg);
font-size: var(--theme-size);
}
</style>
거의 이렇습니다.. 실제로 스타일을 작성할 때 변수는 일률적으로 사용됩니다. 그 다음에는 스타일 처리를 위한 js 파일이 있습니다.
const light = 'rgb(51, 50, 50)'
const dark = '#d6d6d6'
/**
* 获取一组皮肤变量
* @param {Boolean} state 样式判断条件
*/
function getTheme(state) {
return {
"theme-bg": state ? light : dark,
"theme-color": state ? light : dark,
"theme-size": state ? light : dark,
};
}
/**
* 设置变量值
* @param {Boolean} state 样式判断条件
*/
function setTheme(state = true) {
const theme = getTheme(state);
Object.keys(theme).forEach((key) => {
document.body.style.setProperty(`--${
key}`, themeMap[key]);
});
}
이 js 파일에서 get 및 set 함수를 정의할 수 있습니다. get 함수는 주로 매개 변수에 따라 스킨 값을 가져오고 set 함수는 주로 루트 노드의 변수 값 설정을 담당합니다
. 스위칭 기능이 트리거되면 setTheme 기능을 통해 직접 전달할 수 있습니다. 루트 노드의 변수 값을 설정하여 스키닝 효과를 얻습니다.
이점
명확한 조정, 많은 스타일을 작성할 필요가 없으며 몇 가지 색상만 작성하면 나머지는 색상 값에 따라 자동으로 채워집니다.
결점
CSS3 이후의 새로운 속성이기 때문에 호환성은 여전히 상대적으로 열악하며 IE에서는 다음과 같이 직접 지원하지 않습니다.
최적화
이 방식의 최적화는 크게 두 가지 방향으로 진행되는데 첫 번째는 LESS 또는 SASS에 액세스하고 이러한 전처리기의 특성을 사용하여 CSS 코드의 재사용성, 가독성, 유지보수성 등을 더 잘 구현하는 것이고,
다른 하나는 호환성을 해결하는 것입니다. 문제 여기 도구가 있습니다: css-vars-ponyfill , npm 주소: https://www.npmjs.com/package/css-vars-ponyfill , 특정 사용법을 검색할 수 있습니다. 하나는 많은 자습서입니다.
인용하다
Ruan Yifeng 교사: " CSS 변수 자습서 ",
MDN: " CSS 사용자 정의 속성(변수) 사용 ";
요약
일반적으로 스키닝의 방향은 기본적으로 이 두 가지 방식을 기본으로 하고 있지만 일부 구현 방식은 CSS 전처리기를 사용하여 캡슐화 및 실용성을 더욱 향상시키고 확장성이 뛰어납니다. ElementUI의 스킨 구현은 매우 강력하며 배울 가치가 있습니다.