ما یک تصویرسازی صفحه برای ساخت یک پروژه منبع باز ایجاد کردیم

ek3nk4r 2024-06-02

0 1 خواندن این مطلب 4 دقیقه زمان میبرد

ما یک تصویرسازی صفحه برای ساخت یک پروژه منبع باز ایجاد کردیم

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

درب از اولین نسخه آن در سال 2020 منبع باز بوده است. تا کنون، چهار سال گذشته است. بر اساس پیگیری نهایی فناوری و تجربه کاربر، ما هر ساله تعداد زیادی به روز رسانی و تکرار انجام داده ایم و انتظار داریم که بهترین تجربه ساختمانی را برای کاربران به دست آوریم و سناریوهای استفاده بیشتری را پوشش دهیم. همچنین، از شرکایی که با من در Dooring همکاری می‌کنند، بسیار سپاسگزارم، که به سری محصولات ساختمانی Dooring امکان می‌دهد به طور مداوم در روند فناوری تسریع و تکامل یابد.

h5-dooring

برخی از دستاوردهای به دست آمده تا پایان سال 2023:

ستاره GitHub: 8.6k+
تعداد کاربران ثبت نام شده آنلاین: 10000+
تعداد کل صفحات آنلاین: 10000+
تعداد کل قالب ها: 1000+
تعداد کل قطعات: 50+ (به طور مستمر در حال تولید)
PV تجمعی (نمایش صفحه): 500w+
UV تجمعی (بازدید کاربر منحصر به فرد): 10w+

من یک نقاشی کشیدم تا همه بهتر متوجه راه حل فنی Dooring شوند.

H5-Dooring

github: h5-dooring
سایت اینترنتی: https://dooring.net

اگر می خواهید با فناوری و ایده های پیاده سازی آن آشنا شوید، می توانید به آدرس گیت هاب بالا مراجعه کنید.

فهرست مطالب

طراحی طرحواره و توسعه اجزا

طرح درب

طرحواره به دو بخش تقسیم می شود:

آرایه ویژگی های قابل ویرایش جزء editData.
داده هایی که در واقع توسط پیکربندی کامپوننت مصرف می شود.

توضیح مفصل editData

editData آرایه ای از ویژگی های قابل ویرایش کامپوننت است و هر مورد شامل فیلدهای زیر است:

کلید: نام ویژگی
name: نمایش چینی نام ویژگی
type: نوع قابل ویرایش صفت
isCrop (اختیاری)
cropRate (اختیاری)
محدوده (آرایه از گزینه ها وقتی نوع “رادیو” یا “انتخاب” است)
ممکن است در آینده گسترش یابد (ساختار دقیق را می توان به نسخه منبع باز Dooring اشاره کرد)

هر دو کلید و نام را می توان با توجه به معنایی ویژگی های مؤلفه تعیین کرد. در اینجا، شایان ذکر است نوع. انواع مقادیر ویژگی های مختلف متفاوت است، بنابراین نوع آیتم ویرایش ما نیز متفاوت است. همه انواع به شرح زیر است:

آپلود: کامپوننت را بارگذاری کنید
متن: جعبه متن
RichText: متن غنی
TextArea: متن چند خطی
شماره: جعبه ورودی عددی
DataList: ویرایشگر فهرست
FileList: ویرایشگر لیست فایل
InteractionData: تنظیمات تعامل
رنگ: پنل رنگی
MutiText: چند متنی
انتخاب کنید: کادر کشویی را انتخاب کنید
رادیو: دکمه رادیو
سوئیچ: سوئیچ سوئیچ
CardPicker: پانل کارت
جدول: ویرایشگر جدول
پست: ویرایشگر مختصات
FormItems: طراح فرم

برای اطلاعات بیشتر کد می توانید به دایرکتوری مراجعه کنید editor/src/core/FormComponents در نسخه استقرار خصوصی

توضیح مفصل پیکربندی

در اصل، پیکربندی یک شی است، یعنی مجموعه‌ای از ویژگی‌هایی که کامپوننت می‌تواند در معرض نمایش بگذارد، که با کلید موجود در هر آیتم از آرایه editData مطابق زیر است:

{
    cpName: 'Header',
    logoText: '',
    fontSize: 20,
    color: 'rgba(47,84,235,1)',
    height: 60,
    fixTop: false,
    menuList: [
      {
        id: '1',
        title: 'Home',
        link: '/'
      },
      {
        id: '2',
        title: 'Product',
        link: '/'
      },
    ]
  }

editData و config ساختار طرحواره یک جزء Dooring را تشکیل می دهند. بنابراین، می‌توان دریافت که هر جزء Dooring ساختار زیر را دارد:

index.tsx، فایل اصلی مؤلفه (می تواند هر کتابخانه منبع باز شخص ثالث را ادغام کند).
index.less، فایل سبک کامپوننت.
schema.ts، طرح کامپوننت (پروتکل توصیف مؤلفه)؛
ویرایش داده ها
پیکربندی

البته طرح واره مولفه را نیز می توان با توجه به نیاز خود گسترش داد. اگر سوالی در زمینه طراحی قطعات وجود دارد، می توانید در هر زمان با من در ارتباط باشید.

قابلیت تولید کد

ماژول تولید کد عمدتاً شامل:

ایجاد کد صفحه نسخه کامپایل شده.
تولید مینی برنامه
در حال تولید فایل طرحواره JSON صفحه.

طراحی خطوط مرجع

درب

این عمدتاً از نرم افزار طراحی کهنه کار PhotoShop استفاده می کند. با دوبار کلیک کردن روی خط کش در Dooring می توانیم خطوط مرجع (شامل محور x و محور y) را به راحتی ایجاد کنیم. می‌توانیم خطوط مرجع را به هر موقعیتی روی بوم بکشیم تا مرجع موقعیت‌یابی عناصر را بفهمیم.

ارتباط اجزا

من همچنین چندین طرح ارتباطی متداول مولفه را قبلاً به اشتراک گذاشته ام، به شرح زیر:

props/$emit
انتقال مقادیر از مؤلفه های فرزند به مؤلفه های والد
eventBus ($emit/$on)
vuex / redux
$attrs/$شنوندگان
ارائه/تزریق

روش‌های پیاده‌سازی خاص به تفصیل در بررسی طرح ارتباطی بین اجزای پلت فرم کم‌کد معرفی شده‌اند. در اینجا، می خواهم یک طرح ارتباطی بین مؤلفه هایی که اخیراً طراحی کرده ام – ارتباط رویداد سفارشی را با شما به اشتراک بگذارم.

بله، ما از CustomEvent استفاده می کنیم.

رویدادها اساساً یک راه ارتباطی، یک مکانیسم پیام هستند. هنگامی که با سناریوهای چند شی و چند ماژول مواجه می شویم، استفاده از رویدادها برای ارتباط راه بسیار موثری است. در توسعه چند ماژولار، رویدادهای سفارشی را می توان برای ارتباطات بین ماژول استفاده کرد.

درب

مثل این:

const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

const eventAwesome = new CustomEvent("awesome", {
  bubbles: true,
  detail: { text: () => textarea.value },
});

form.addEventListener("awesome", (e) => console.log(e.detail.text()));

textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));