17 июл в 15:42 INTERMEDIA : CSS в JS -> напиши свой собственный движок!
Почему ?
В настоящее время расширенные платформы, такие как React, Vue, Angular и т. д., используют CSS в синтаксисе JS. Вы должны написать свой собственный CSS в минимальном движке JS, чтобы понять, что происходит «внутри под капотом».

Javascript:
function o2s(o, className) {
var elm = new Option();
Object.keys(o).forEach(function() {
(elm.style)[a] = o[a];
});
return `.${className}{\n${elm.getAttribute("style")}\n}`;
}
/**
* Class responsible for small css functionalities rendered in HTML like menu
*
* export
* class CSSMiniEngine
*/
export class CSSMiniEngine {
classes = [];
/**
* add css class with css params
*
* memberof CSSMiniEngine
* param {Partial<CSSStyleDeclaration>} o
* param {string} className
*/
addClass = (o, className) => {
this.classes.push(o2s(o, className));
};
/**
* compile to style tag in head
*
* memberof CSSMiniEngine
*/
compile = () => {
const head = document.head || document.getElementsByTagName("head")[0];
const style = document.createElement("style");
head.appendChild(style);
style.type = "text/css";
style.appendChild(document.createTextNode(this.classes.join("\n")));
};
}

Typescript:
function o2s(o: Partial<CSSStyleDeclaration>, className: string) {
var elm = new Option();
Object.keys(o).forEach(function(a: string) {
(elm.style as any)[a as any] = o[a as any];
});
return `.${className}{\n${elm.getAttribute("style")}\n}`;
}
/**
* Class responsible for small css functionalities rendered in HTML like menu
*
* export
* class CSSMiniEngine
*/
export class CSSMiniEngine {
classes: string[] = [];
/**
* add css class with css params
*
* memberof CSSMiniEngine
* param {Partial<CSSStyleDeclaration>} o
* param {string} className
*/
addClass = (o: Partial<CSSStyleDeclaration>, className: string) => {
this.classes.push(o2s(o, className));
};
/**
* compile to style tag in head
*
* memberof CSSMiniEngine
*/
compile = () => {
const head = document.head || document.getElementsByTagName("head")[0];
const style = document.createElement("style");
head.appendChild(style);
style.type = "text/css";
style.appendChild(document.createTextNode(this.classes.join("\n")));
};
}

Пример использования:
const cssEngine = new CssMiniEngine()

Создать Class:
const className = "MyClass"
cssMiniEngine.addClass(
{
visibility: "visible",
position: "fixed",
background: "transparent",
border: "0",
textAlign: "center",
},
className
);

Использовать это:
В чистом JS:
const div = document.createElement("div")
div.classList.add(className)

В React:
export const MyDiv = () => (
<div className={className}>Hello</div>
)

Вызов в конце:
cssEngine.compile()

Таким образом, это вставит все ваши классы в DOM как тег стиля.
Спасибо за чтение!
Сообщество: INTERMEDIA
40 0 1 0
← Пред. След. →

Комментарии (4)

Ну блин ,на спейсе давно ведь есть bb тег code . Не читабельно же
а я и не программист, я только эту новость перевел с английского языка, надо было ее куда то деть, т.к. она не прошла уникальность на Бирже Статей.
Ааа ,тогда ок
Как программист говорю, что переведено не совсем правильно)
Показать комментарий
Скрыть комментарий
Для добавления комментариев необходимо авторизоваться
Марс
После ошеломляющей новости о находке воды на Марсе...
Версия: Mobile | Lite | Touch | Доступно в Google Play