ASP.NET Core Loves JavaScript－互聯網

文章出處

前言

在 ASP.NET 團隊的 Github 的主頁上，有這樣一個開源項目叫：“JavaScriptsServices”，那么
什么是 JavaScriptsServices 呢？它又有什么用呢？

下面就讓我們一起來看一下吧。

什么是 JavascriptServices

GitHub：https://github.com/aspnet/JavaScriptServices

JavascriptServices 是微軟提供給 ASP.NET Core 開發者的一項技術，如果你使用的是 Angular2，React，Knockout等這些Javascript技術之一的話，他提供了一些基礎的程序集供開發者來很方便的調用Javascript，同時，你可以很方便的整合 NodeJS 代碼到你的ASP.NET Core應用程序中。

JavascriptServices 是提供給開發者一套工具，目前已經以NuGet包的形式釋出，主要包括這三個程序集：
Microsoft.AspNetCore.NodeServices，Microsoft.AspNetCore.SpaServices，Microsoft.AspNetCore.AngularServices。

還有一個包叫ReactServices，現在已經不需要它了，你可以使用 SpaServices 替代之。

現在就來分別看一下這三個包吧。

必須的環境：

1、NodeJS 環境，可以在程序目錄下使用node -v，來查看是否具有Node環境。
2、ASP.NET Core 環境，可以在程序目錄下使用 dotnet --version，來查看是否具有 dotnet 環境。

NodeServices

NodeServices 是一個基礎包，它主要是提供了在 .NET 程序 Server 端運行 Javascript 的功能，要做到這一點，他是利用了NodeJS 的環境。來看看怎么樣使用吧。

首先新建一個 ASP.NET Core WebApi 項目，然后在項目根目錄新建一個Node文件夾，然后添加一個 addNumbers.js的文件，
文件內容如下：

module.exports = function (callback, first, second) {
    var result = first + second;
    callback(null /* error */, result);
};

這里有有個JS函數，它將在.NET 程序中被調用，通過傳入一個 Node風格的回調函數和兩個參數來計算結果。
在NodeJS中，一個 JS 文件即代表一個模塊，module.exports的意思是把當前函數作為一個對象提供出去以供調用。

然后在 Controller 文件夾新建一個 NodeController.cs 的文件。整個解決方案看起來是這個樣子的：

為了使用 NodeServices，你需要 using Microsoft.AspNetCore.NodeServices，然后在 Startup.cs 文件中的 ConfigureServices 方法添加如下：

public void ConfigureServices(IServiceCollection services)
{
    // ... 其他代碼 ...
 
    // 啟用 Node Services
    services.AddNodeServices();
}

現在，你就可以在 Action 中使用NodeServices庫為我們提供的功能了，打開NodeController.cs，修改如下：

using Microsoft.AspNetCore.NodeServices;

[Route("api/[controller]")]
public class NodeController : Controller
{
    public async Task<IActionResult> Get([FromServices] INodeServices nodeServices) {
        var result = await nodeServices.InvokeAsync<int>("./Node/addNumbers", 1, 2);
        return Content("1 + 2 = " + result);
    }
}

這里使用的是 [FromServices] 解析的INodeServices接口來供我們使用調用Node Javascript。然后我們再看一下InvokeAsync<T>（``），他是一個異步的方法，通過傳入一個node.js腳本文件（模塊），兩個形參來得到一個結果。

方法簽名： Task InvokeAsync(string moduleName, params object[] args);

然后，我們使用 Postman 來測試一下：

結果符合預期，現在，我們已經在ASP.NET Core 程序中成功的調用了Node提供的Javascript腳本服務，是不是很方便。

SpaServices

SpaServices 這個包是基于 NodeServices 構建的，當你基于單頁面應用（SPA）來構建應用程序的話，它為你提供了很多很有用的助手工具，像路由助手（Routing）、服務端的預渲染（Pre-Rendering）、Webpack中間件、模塊熱替換（HMR）等。下面來依次看一下：

Routing helper

在單頁面應用程序中，也許你想同時配置服務端路由以及配置客戶端路由，大多數時候，這兩個路由系統將互不干擾獨立運行。但是有些時候可能會有問題，就是怎么樣識別404。

這個時候你可能就會用到 Routing helper ，它叫MapSpaFallbackRoute, 它將幫助你更加方便的做這個工作。

app.UseStaticFiles();

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");

    routes.MapSpaFallbackRoute(
        name: "spa-fallback",
        defaults: new { controller = "Home", action = "Index" });
});

Pre-Rendering

你可以創建一個同構的（Isomorphic ）JavaScript 服務器預渲染的應用。對于 isomorphic web app 可能了解的人不是特別多，就是說一套JS代碼可能同時運行于服務端和客戶端，是不是很有趣，利用這種技術有助于提高SEO(搜索引擎優化)和客戶端性能。

Webpack

如果你正在使用 webpack，那么 SpaServices 里面的 webpack 中間件將簡化你的開發過程，使用此中間件將會攔截webpack匹配的文件請求并且在內存中動態構建，然后直接到瀏覽器中。

HMR

使用這種技術，你可以減少大幅減少模塊加載的時間，通過啟用中間件的HMR支持，在你對磁盤上的文件（如 .ts/.html/.sass 等）做出更改的時候，會自動構建，然后會把結果推到瀏覽器上，你就不需要手動的去刷新瀏覽器了。

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
    HotModuleReplacement = true
});

這個包還包含了很多其他的一些功能，有興趣的可以去 github 了解一下。

AngularServices

AngularServices 主要提供了一些擴展的工具，包括一些驗證助手，還有一些"cache priming"的功能。

示例模板

你可以通過 yeoman 工具來生成基于 Angular2、Knockout、React、React+Redux 等的ASP.NET Core SPAs 示例模板。

npm install -g yo generator-aspnetcore-spa

npm install -g webpack

然后創建項目：

yo aspnetcore-spa

可以選擇Angular2、Knockout、React、React+Redux等來生成SPA項目，生成完成后以開發環境方式啟動項目：

Windows:

set ASPNETCORE_ENVIRONMENT=Development
dotnet run

Linux 或 masOS：

export ASPNETCORE_ENVIRONMENT=Development
dotnet run

現在，你就可以感受一下基于 ASP.NET Core + SPA 的應用了。

試著對項目做更多你熟悉的操作吧：比如修改客戶端資源（.ts, .tsx, .html），看看瀏覽器的變化吧。

總結

這是一套對于ASP.NET Core開發者來說非常方便的工具在構建 JavaScripts 應用程序服務時候，目前該庫目前也在快速的迭代中，也許提供出來的這些功能只是一個開始……

如果你覺得本篇博客對您有幫助的話，感謝您的【推薦】，如果你對 .NET Core 感興趣可以關注我，我會定期在博客分享關于 .NET Core 的學習心得。

本文地址：http://www.cnblogs.com/savorboard/p/dotnet-javascript-services.html
作者博客：Savorboard
歡迎轉載，請在明顯位置給出出處及鏈接

文章列表

不含病毒。www.avast.com

AutoPoster

互聯網 - 大數據

AutoPoster 發表在痞客邦留言(0) 人氣()

E-mail轉寄

互聯網 - 大數據

本部落格為互聯網熱門頭條訊息管理中心

BloggerAds