يرجى شرح ملف Javascript التالي في مستند نمط تخفيض السعر.

تصدير const العارض = (وظيفة () {
 دع \_renderTo؛
 دع \_contentCallback؛
 دع الدول = []؛
 دع التأثيرات = []؛
 دع التعبيرات = []؛
 دع الخطافات = []؛
 دع idx = 0؛
 دع \_rendering = false؛

 وظيفة createElement(tagName, attributes = {}, ...children) {
 const \_redo = [];
 const \_props = [];
 const \_element = document.createElement(tagName);
 لـ (مفتاح const في السمات) {
 دع attr = attributes[key];
 إذا (نوع attr !== "وظيفة") {
 \_props[key] = attributes[key];
 يكمل؛
 } else \_redo.push(key);
 }
 children.forEach((طفل) => {
 إذا (الطفل === خطأ) العودة؛
 if (typeof Child === "function") Child(\_element);
 else \_element.appendChild(child);
 });
 إذا (\_props["dataset"]) {
 لـ (بيانات const في \_props.dataset) {
 \_element.dataset[data] = \_props.dataset[data];
 }
 حذف \_props.dataset؛
 }
 Object.assis(\_element, \_props);
 إذا (\_props.hasOwnProperty("style")) {
 لـ (نمط const في \_props.style) {
 لو (
 typeof \_props.style[style] === "وظيفة" &&
 states.includes(\_props.style[style])
 ) {
 Let \_idx =states.indexOf(\_props.style[style]);
 Let \_val =states[\_idx]();
 addHook(\_idx, (newVal) => {
 \_element.style[style] = newVal;
 });
 \_element.style[style] = \_val;
 } آخر {
 \_element.style[style] = \_props.style[style];
 }
 }
 }
 \_redo.forEach((مفتاح) => {
 دع attr = attributes[key];
 إذا (states.includes(attr)) {
 Let \_idx =states.indexOf(attr);
 attr =states[\_idx]();
 addHook(\_idx, (newVal) => {
 \_element[key] = newVal;
 });
 }
 \_element[key] = attr;
 });
 إرجاع \_العنصر؛
 }

 وظيفة addStyleSheet(المسار) {
 دع البادئة = INCL\_DIR ؟ INCL\_DIR : "../../incl";
 Let href = `${prefix}/components/${path}`;
 const styleSheet = Renderer.createElement("link", {
 rel: "ورقة الأنماط"،
 اكتب: "نص/CSS"،
 href: href،
 });
 document.querySelector("head").appendChild(styleSheet);
 }

 const addHook = (idx, Hook) => {
 إذا (السنانير[idx]) {
 السنانير[idx].push(hook);
 } آخر {
 السنانير[idx] = [هوك];
 }
 };

 const useState = (defaultValue) => {
 دع رد الاتصال = typeof defaultValue == "وظيفة"؟ القيمة الافتراضية: فارغة؛
 Let \_value = defaultValue;
 const \_idx = idx++;

 const getState = () => {
 نوع الإرجاع من رد الاتصال === "وظيفة"؟ رد الاتصال() : \_value;
 };

 const setState = (newValue) => {
 \_value = newValue;
 إذا (السنانير[\_idx]!== غير محددة) {
 السنانير[\_idx].forEach((هوك) => {
 هوك(\_القيمة);
 });
 }
 checkEffects(\_idx);
 };

 states[\_idx] = getState;

 العودة [getState، setState]؛
 };

 const useEffect = (رد الاتصال، ...الساعات) => {
 دع \_idx = idx++;

 التأثيرات[\_idx] = [];

 Watches.forEach((مشاهدة) => {
 Let \_oldValue = watch();
 $(مستند).جاهز(() => {
 رد الاتصال(\_oldValue, \_oldValue);
 });
 التأثيرات[\_idx].push(() => {
 دع newVal = watch();
 إذا (typeof \_oldValue === "object" && typeof newVal === "object") {
 إذا (JSON.stringify(\_oldValue) !== JSON.stringify(newVal)) {
 رد الاتصال (newVal، \_oldValue)؛
 \_oldValue = newVal;
 }
 } آخر {
 إذا (\_oldValue !== newVal) {
 رد الاتصال (newVal، \_oldValue)؛
 \_oldValue = newVal;
 }
 }
 });
 });
 };

 وظيفة التحقق من التأثيرات (\_idx) {
 إذا عاد (\_rendering)؛
 \_rendering = صحيح؛
 Effects.forEach((التأثير) => {
 تأثير.forEach((مشاهدة) => {
 يشاهد()؛
 });
 });
 Expressions.forEach((تعبير) => {
 Expression.setRes(expression.res());
 });
 \_rendering = خطأ؛
 }

 وظيفة useExpression(expression, result, onFalse) {
 إذا (نوع التعبير!== "وظيفة") {
 console.warn("يجب أن يكون التعبير من النوع function");
 يعود؛
 }

 دع \_idx = idx++;
 دع \_parent = null;

 const [res, setRes] = useState(expression);
 const [prop, setProp] = useState(result);

 التعبيرات[\_idx] = {
 الدقة: الدقة،
 سيتريس: سيتريس،
 };

 استخدام التأثير (() => {
 إذا (! الدقة ()) {
 إذا (نتيجة مثيل HTMLElement) {
 \_parent = result.parentElement;
 result.remove();
 }
 إذا (نوع النتيجة == "سلسلة") {
 setProp(onFalse);
 }
 } آخر {
 إذا (نتيجة مثيل HTMLElement) {
 \_parent = \_parent === null ؟ result.parentElement : \_parent;
 \_parent.appendChild(result);
 }
 إذا (نوع النتيجة == "سلسلة") {
 setProp(result);
 }
 }
 }, الدقة);

 إذا (نتيجة مثيل HTMLElement) {
 نتيجة الإرجاع؛
 }
 إذا (نوع النتيجة == "سلسلة") {
 دعم العودة؛
 } آخر {
 نتيجة الإرجاع؛
 }
 }

 return { createElement, addStyleSheet, useState, useEffect, useExpression };
})();
{"evolved_from": null, "kind": "human", "source": "ewof/sharegpt-instruct-unfiltered-deduped"}