Core love JavaScript
Core love 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
Core love JavaScript的更多相关文章
- ASP.NET Core Loves JavaScript
前言 在 ASP.NET 团队的 Github 的主页上,有这样一个开源项目叫:"JavaScriptsServices",那么 什么是 JavaScriptsServices 呢 ...
- FineUIPro/Mvc/Core/JS v4.2.0 发布了(老牌ASP.NET控件库,WebForms,ASP.NET MVC,Core,JavaScript)!
还记得 10 年前那个稍微青涩的 ExtAspNet 吗,如今她已脱胎换骨,变成了如下 4 款产品: FineUIPro:基于jQuery的经典款ASP.NET WebForms控件,之前的FineU ...
- 在 .NET Core 中运行 JavaScript
一.前言 在 .NET Framework 时,我们可以通过V8.NET等组件来运行 JavaScript,不过目前我看了好几个开源组件包括V8.NET都还不支持 .NET Core ,我们如何在 . ...
- 使用 JavaScriptService 在.NET Core 里实现DES加密算法
文章<ASP.NET Core love JavaScript>和<跨平台的 NodeJS 组件解决 .NetCore 不支持 System.Drawing图形功能的若干问题> ...
- JavaScript中的this陷阱的最全收集
JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值.事实并非如此,在JavaScript中,最 ...
- JavaScript中的this陷阱的最全收集 没有之一
当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概 念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解 ...
- 转:JavaScript中的this陷阱的最全收集
在其他地方看到的,觉得解释的狠详细,特此分享 当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概念,可能真解释不清 ...
- JavaScript周报#184
This week’s JavaScript news Read this issue on the Web | Issue Archive JavaScript Weekly Issue 184Ju ...
- JavaScript中的this陷阱
当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解释 ...
随机推荐
- maya 2015配置openCollada插件
1.下载对应的openCollada插件内容 https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools 该页面目前提供Mac ...
- sendkeys用法详解
将一个或多个按键消息发送到活动窗口,就如同在键盘上进行输入一样. 语法 SendKeys string[, wait] SendKeys 语句的语法具有以下几个命名参数: 部分 描述 string ...
- IntelliJ IDEA 13.x 下使用Hibernate + Spring MVC + JBoss 7.1.1
从2004年开始做.NET到现在.直到最近要做一些JAVA的项目,如果说100个人写一篇关于.NET的文章,估计这10个人写的内容都是一样.但是如果说10个人写Java的文章,那真的是10个人10种写 ...
- Servlet之创建与配置
上篇已将介绍完了,下面来实践操作走一个: 首先在名为"com.caiduping"的包中创一个MyFilter的对象: 1 package com.caiduping; 2 3 i ...
- 断开SVN连接操作方法
SVN是日常项目管理中经常使用到的工具,然而拷贝备份需要与SVN服务器断开连接,具体操作步骤: 1.在桌面建立一个文本文件,取名为kill-svn-folders.reg(扩展名由txt改为reg), ...
- Linux下Tomcat启动正常,但浏览器无法访问
1.服务器可ping通 2.服务器抓本地的http请求包,可以抓到 3.本地抓服务器返回的http响应包,抓不到 经过查找,是由于开启了Linux防火墙 查看防火墙配置(需要root权限) [root ...
- Android 源码编译及常见错误及解决方法
最近要往arm开发板上移植android系统,大大小小的问题遇到了太多太多,都是泪啊.本人初接触嵌入式开发,对问题的根源不是太了解,不过好在每解决一个问题,便记录一下.话不多说,正式罗列问题: hos ...
- 查找-find -grep
find#.#-name#"*pc"#|#xargs#grep#"Flag" “*.pc”设置要找的文件名grep后面是要找的字符串 #是空格
- windows同时安装两个jdk
两个项目需求不同,需要不同的jdk(1.7,1.8),所以每次切换项目的时候就会重新卸载原有的,在安装新的,比较麻烦. 就查资料看可以同时安装多个jdk,但是每次只能配置一个环境变量.安装的时候还是遇 ...
- [java学习笔记]java语言基础概述之函数的定义和使用&函数传值问题
1.函数 1.什么是函数? 定义在类中的具有特定功能的一段独立小程序. 函数也叫做方法 2.函数的格式 修饰符 返回值类型 函数名(参数类型 形式参数1, 参数类型 形式参数2-) { ...