با استفاده از این روش یک درخت DOM Offscreen بسازید.

قطعه کد زیر را در بسته ها/اسکن/هسته/index.ts در کد منبع-اسکن پیدا کردم.
const fragment = document.createDocumentFragment();
در این مقاله ، شما یاد خواهید گرفت
-
DocumentFragment چیست؟
-
چگونه DocumentFragment در-اسکن React استفاده می شود؟
-
روش CreateOcumentFragment.
اطلاعات زیر از اسناد MDN انتخاب شده است.
تعریف
در
DocumentFragment
رابط یک شیء حداقل سند را نشان می دهد که والدین ندارد.از آن به عنوان یک نسخه سبک وزن استفاده می شود
Document
این بخش از یک ساختار اسناد را که از گره ها درست مانند یک سند استاندارد تشکیل شده است ، ذخیره می کند. تفاوت اصلی در این واقعیت است که قطعه سند بخشی از ساختار فعال درخت اسناد نیست. تغییراتی که در این قطعه ایجاد شده است روی سند تأثیر نمی گذارد.
استفاده
یک استفاده مشترک برای
DocumentFragment
برای ایجاد یک ، جمع کردن یک زیر درخت DOM در آن ، سپس با استفاده از قطعه در DOM اضافه یا وارد کنیدNode
روش های رابط مانندappendChild()
باappend()
، یاinsertBefore()
بشر انجام این کار گره های قطعه را به داخل دام می اندازد و یک خالی را پشت سر می گذاردDocumentFragment
بشراین رابط کار بسیار خوبی با اجزای وب است:
عناصر حاوی یک
DocumentFragment
در آنهاHTMLTemplateElement.content
خاصیتیکپارچه
DocumentFragment
می تواند با استفاده ازdocument.createDocumentFragment()
روش یا سازنده.
اطلاعات بیشتر در مورد DocumentFragment را بخوانید.
من به دنبال DocumentFragment در پایگاه رمزگذاری-اسکن بودم و نتایج نشان داده شده زیر را پیدا کردم.
CreateOcumentFragment در دو پرونده استفاده می شود:
-
React-Is-Is-Soailable.ts
-
بسته ها/اسکن/src/core/index.ts
خالی جدید ایجاد می کند DocumentFragment
برای ساختن یک درخت DOM در صفحه نمایش ، می توان گره های DOM را اضافه کرد. اطلاعات بیشتر در مورد CreateOcumentFragment را بخوانید.
سلام ، نام من رامو ناراسینگا است. من پروژه های بزرگ منبع باز را مطالعه می کنم و در مورد معماری پایگاه کد آنها و بهترین شیوه ها مطالب ایجاد می کنم و آن را از طریق مقاله ، فیلم به اشتراک می گذارم.
من برای کار روی پروژه های جالب باز هستم. برای من ایمیل بفرستید در ramu.narasinga@gmail.com
GitHub من-https://github.com/ramu-narasinga
وب سایت من – https://ramunarasinga.com
کانال یوتیوب من – https://www.youtube.com/@thinkthroo
پلت فرم یادگیری – https://thinkthroo.com
معماری پایگاه کد – https://app.thinkthroo.com/architecture
بهترین روشها-https://app.thinkthroo.com/best-practices
پروژه های درجه تولید-https://app.thinkthroo.com/production-prade-projects
-
https://github.com/search؟q=repo٪3aaidenybai٪2Freact-Scan٪20DocumentFragment&type=code
-
https://github.com/aidenybai/React-Scan/blob/cd12e38f46a40293e6a276cd46dc3c6455246d7/packages/extension/src/inject/react-is-not-available.tss#le42
-
https://github.com/aidenybai/react-scan/blob/cd12e38f46a40293e6a276cd46dc3c6455246d7/packages/src/src/core/index.tss#l49
-
https://developer.mozilla.org/en-us/docs/web/api/documentfragment