（廢棄）blazor組件使用並置加載js文件

前言

因為正常加載的js文件是組件互通的，導致每一個組件都能通用里面的js方法。通過並置加載js文件，不僅方便簡潔，還可以進行js隔離。

實現

需要先將js名稱設置為對應組件的名稱，這樣會自動將文件並置到對應組件下面。

接下來，就是加載js文件了。我們需要將IJSRuntime模塊以IJSObjectReference導入，並賦值到變量module中，通過變量module來調用js函數。（需要在組件中注入 @inject IJSRuntime _js ，寫在組件頂部就行）InvokeAsync第二參數路徑是對應的wwwroot中的文件，下面會說明。

//Index.razor.cs
public partial class Index
    {
        private IJSObjectReference module;

        #region 生命周期方法
            
        /// <summary>
        /// 生命周期事件-渲染后
        /// </summary>
        /// <param name="firstRender"></param>
        /// <returns></returns>
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                module = await _js.InvokeAsync<IJSObjectReference>("import",
        "./js/Index.razor.js");

                await module.InvokeVoidAsync("Initialize");
            }
        }
      
        #endregion
    }

當然，到這里還沒完事，如果你去運行，會發現找不到對應的js模塊或方法。這是因為我們一般只開放了靜態資源文件夾的訪問權限（這里我不建議去開放其他路徑的訪問權限，這樣是不安全的），我們需要通過在libman.json內添加上面的配置，將對應的js文件在wwwroot（靜態資源）文件夾中自動生成。微軟文檔LibMan使用

//libman.json
{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "filesystem",
      "library": "Pages/",
      "destination": "wwwroot/js/",
      "files": [
        "Index.razor.js"
      ]
    }
  ]
}

當你運行后，你會發現在wwwroot文件夾中libman配置的路徑下自動生成了對應的js文件。但是，你修改了原js文件后，映射的js文件並不會自動同步，需要手動鼠標右鍵libman.json=》“清理客戶端庫”，進行重新生成。

最后，js文件方法記得添加export 關鍵字。

//Index.razor.js
export function Initialize() {
	console.log("不想上班！！！")
}

之前遇到這個問題，便發了個博問，研究解決了一下。想着還是寫給文章吧！博問的方式不好找。

blazor組件並置的js文件問題_已解決_博問_博客園 (cnblogs.com)