إذا كنت قد عملت مع Blazor وJS Interop من قبل، فمن المحتمل أن ينتهي بك الأمر مع ملف app.js ضخم مليء بالوظائف العشوائية لمكونات مختلفة. إنه يعمل، لكنه يصبح فوضويًا بسرعة. لحسن الحظ، هناك طريقة أكثر نظافة: ملفات JavaScript المجمعة.

#الفكرة

تمامًا مثل عزل CSS، يتيح لك Blazor وضع ملف .razor.js بجوار المكون الخاص بك. يتم تحميل وحدة JavaScript عند الطلب، فقط عندما يحتاجها المكون فعليًا. لا توجد نصوص عالمية، ولا تلوث.

إعداده

لنفترض أن لدينا مكون Clipboard.razor الذي ينسخ النص إلى الحافظة. قم بإنشاء ملف يسمى Clipboard.razor.js بجواره مباشرةً:

export function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        console.log("Copied to clipboard!");
    });
}

لاحظ الكلمة الأساسية export — وهذا أمر مهم. يقوم Blazor بتحميله كوحدة ES قياسية.

تحميل الوحدة في Blazor

في المكون الخاص بك، يمكنك استخدام IJSRuntime لاستيراد الوحدة. يتبع المسار الاصطلاح: ./_content/{ASSEMBLY_NAME}/{COMPONENT_PATH}.razor.js للمكتبات، أو المسار النسبي للمشروع الحالي فقط.

@inject IJSRuntime JS
@implements IAsyncDisposable

<button @onclick="Copy">Copy to clipboard</button>

@code {
    [Parameter]
    public string Text { get; set; }

    private IJSObjectReference? module;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JS.InvokeAsync<IJSObjectReference>(
                "import", "./Components/Clipboard.razor.js");
        }
    }

    private async Task Copy()
    {
        if (module is not null)
        {
            await module.InvokeVoidAsync("copyToClipboard", Text);
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

بعض الأشياء التي يجب ملاحظتها هنا:

• نقوم بتحميل الوحدة في OnAfterRenderAsync لأن JS Interop غير متاح أثناء العرض المسبق من جانب الخادم
• نحتفظ بمرجع للوحدة مع IJSObjectReference
• نقوم بتنفيذ IAsyncDisposable لتنظيف الوحدة عند تدمير المكون

لماذا هذا أفضل

من قبل، كنت أجمع كل شيء في ملف واحد wwwroot/js/app.js. لقد نجح الأمر، ولكن العثور على الوظائف كان أمرًا صعبًا، وكل صفحة تحمل JavaScript لم تكن بحاجة إليها. مع ملفات JS المجمعة:

• يمتلك كل مكون جافا سكريبت الخاص به
• يتم تحميل الوحدات بتكاسل، فقط عند الحاجة إليها
• لا يوجد تعارض في أسماء الوظائف العامة
• سهولة الصيانة والحذف — عندما تحذف المكون، فإنك تحذف ملف JS معه

#مسكتك مع المسار

يعتمد المسار الذي تمر به إلى import على ما إذا كنت تستخدم تطبيق Blazor المستقل أو مكتبة Razor Class Library. بالنسبة لتطبيق Blazor العادي، يكون المسار متعلقًا بـ wwwroot. يتم نسخ الملف .razor.js هناك في وقت الإنشاء، لذا يمكنك الرجوع إليه من موقع المكون في المشروع.

إذا كنت تحصل على 404 عند تحميل الوحدة، فتحقق جيدًا من المسار وتأكد من أن الملف ينتهي بـ .razor.js، وليس فقط .js.

آمل أن تكونوا قد أحببت هذا المنصب! لا تتردد في الاتصال بي على أي وسائل التواصل الاجتماعي على **@emimontesdeoca **.

الموارد

• ASP.NET Core Blazor JavaScript مع JS المجمع