SharpKit——C# to JavaScript Converter简介

August 24, 2011
author: feeldesignstudio.com

现在，随着web应用对用户体验的要求不断提高，大量的富互联网应用出现，研发人员开始编写越来越多的JavaScript与C#服务器端代码。

所有的web开发团队都已经发现，提高JavaScript的生产力成为非常重要的事情。因为JavaScript是一种解释型语言，所以不能依靠非常强大的IDE来提高生产力，很多Visual Studio等IDE提供的功能，如高级语法验证、代码重构等，无法用在JavaScript中（虽然很多IDE正在努力），所以每个团队中的JavaScript代码变得越来越难以维护。 此外，由于跨web浏览器的Javascript API的不同，开发过程中的代码的正确性也难以评估。

SharpKit的想法就是使web开发团队能够利用C#来提高JavaScript开发的效率。 JavaScript的语法基本上是C#的一个子集，所以有可能从C#来创建JavaScript。 SharpKit的设计目标是：

  • 不改变JS的原生语法
  • 不改变JS文件的结构
  • 不需要额外的JS文件
  • 任何时候允许恢复到原生的JS文件

国内了解SharpKit的人不多，我简单介绍一下SharpKit的用法：

基本知识

首先我们要下载SharpKit，地址是：http://sharpkit.net/Download.aspx

安装之后，我们打开一个现有的项目（也可以新建一个SharpKit项目，此处略）。如下图，是一个空的web项目：

image

项目中添加引用：SharpKit.JavaScript.dll (必须引用)、SharpKit.Html4.dll

image

用文本编辑器打开.csproj文件，将如下代码正确的加入所有的Import节后面（SharpKit支持所有的web项目、控制台项目和类库项目）：

 <!--This line is in any .csproj file: -->
 <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
 <!--Add this line after all Import sections: -->
 <Import Project="$(MSBuildBinPath)\SharpKit\4\SharpKit.Build.targets" />

我们先新建一个htm文件，命名为Demo.htm，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
   <script src="Demo.js"></script>
 </head>
 <body>
   <button onclick="btnClickMe_click(event);">快来点我</button>
 </body>
 </html>

这里的Demo.js，我们不去写，而用SharpKit来生成，如何生成呢？首先我们建一个类，叫做Demo.cs，代码如下：

namespace SharpKitDemo
 {
   public class Demo
   {
   }
 }

我们先添加必要的引用，想把一个类转换成Javascript，你需要做的就是用JsType 属性来装饰类，用JsMode来设置转换模式，代码如下：

using SharpKit.Html4;
using SharpKit.JavaScript;
namespace SharpKitDemo
{
   [JsType(JsMode.Global, Filename = "Demo.js")]
   public class Demo : HtmlContext
   {
   }
}

接着我们来写按钮的click事件，也就是btnClickMe_click(event)，代码如下：

using SharpKit.Html4;
using SharpKit.JavaScript;
namespace SharpKitDemo
{
    [JsType(JsMode.Global, Filename = "Demo.js")]
    public class Demo : HtmlContext
    {
        public static void btnClickMe_click(HtmlDomEventArgs e)
        {
            document.body.appendChild(document.createTextNode("Hello SharpKit!"));
        }
    }
}

然后我们重新生成解决方案，就会发现在多出了一个Demo.js，这个就是Demo.cs通过SharpKit生成的（每次Demo.cs的代码改动后，重新编译就会重新生成Demo.js文件），可以看一下文件中的内容：

//@AutoGenerated
 //…… some code
 function btnClickMe_click(e) {
     document.body.appendChild(document.createTextNode("Hello SharpKit!"));
 }

点击按钮生效：

image

转换规则

刚才说到了JsMode，JsMode.Global将按照如下规则转换：

  • 静态方法转换为全局函数 （命名函数）
  • 静态字段转换为全局变量
  • 静态构造函数将被转换为全局代码

如：

[JsType(JsMode.Global, Filename="Global.js")]
  class Global
  {
    static JsNumber MyNumber = 0;
    static Global()
    {
        HelloWorld();
    }
    public static void HelloWorld()
    {
        document.body.appendChild(document.createTextNode("Hello SharpKit!"));
    }
}

将会转换成如下js代码：

var MyNumber = 0;
HelloWorld();
function HelloWorld()
{
  document.body.appendChild(document.createTextNode("Hello SharpKit!"));
}

虽然 C# 和转换后的 JavaScript 代码类似，但要注意它的类型。在 visual studio 项目，记得使用鼠标在document或 createTextNode等标记悬停，查看提示。用代码补全提示中不存在的方法将导致编译错误。

JsMode.Prototype将按照如下规则转换：

  • 构造函数被转换成一个 JavaScript 构造函数
  • 实例方法都将转换为原型函数
  • 静态方法都将转换为构造函数的函数

如：

[JsType(JsMode.Prototype, Filename="Contact.js")]
class Contact
{
  public void Call()
  {
  }
  public static Contact Load()
  {
    return null;
  }
}

将会转换成如下js代码：

Contact = function()
{
}
Contact.prototype.Call = function()
{
}
Contact.Load = function()
{
  return null;
}

JsMode.Json将不导出js，它会给你使用 JSON 符号类型类的能力：

如：

[JsType(JsMode.Json)]
class MyOptions
{
  public JsString Name { get; set; }
  public bool IsCool { get; set; }
}

[JsType(JsMode.Global, Filename="MyPage.js")]
class MyPage
{
  public static void Main()
  {
    var options = new MyOptions { Name="MyName", IsCool=true };
  }
}

将会转换成如下js代码：

function Main()
{
  var options = {Name:"MyName, IsCool:true};
}

这个功能在类的构造函数选项中十分的有用，例如：jQuery.ajax(options)。它提供了在客户端和服务器端共享web服务数据协定的能力，只需用JsType(JsMode.Json)来标记数据协定类，就可以在C#中使用并生成Javascript内容。

SharpKit进阶

SharpKit 支持任何基于 JavaScript 库，为了让JS库与 SharpKit一起使用，需要C#头文件（C# ‘header’ file）。C# 头文件包含库中所提供的所有的类和方法，创建C#头文件比较复杂，SharpKit 的 SDK包含了开放源码的 C# 头文件，支持所有流行的 web 库，如 jQuery、ASP.NET Ajax、 ExtJS、 jQTouch等。

下面是一个使用jQuery的例子，htm文件代码：

<html>
 <head>
 <title>Hello World</title>
  <script src="res/jquery-1.4.4.min.js" type="text/javascript"></script>
  <script src="res/HelloWorld.js" type="text/javascript"></script>
  <script> $(HelloWorldClient_Load); </script>
 </head>
 <body>
  <button>Click me</button>
 </body>
</html>

cs文件代码：

using SharpKit.JavaScript;
using SharpKit.Html4;
using SharpKit.jQuery;

namespace SharpKitWebApp
{
  [JsType(JsMode.Global, Filename = "~/res/HelloWorld.js")]
  public class HelloWorldClient : jQueryContext
  {
    static void HelloWorldClient_Load()
    {
      //J() is instead of $() which is not allowed in C#
      J("button").click(t => alert("Hello world"));
    }
  }
}

生成的js文件：

function HelloWorld_Load()
{
  $("button").click(function(t){ return alert("Hello world")});
}

每一个 JavaScript 基元类型具有等效的 C# 类型。为了避免歧义与本机 C# 的类型，”Js”前缀添加到每个 JavaScript 基元类型。例如字符串对象被命名为 JsString，在 C# 中的，数等被命名为 JsNumber。

更多信息请访问官方网站：sharpkit.net

Tips: 评论也可以匿名哦，不一定注册的，只需要勾选匿名评论(I'd rather post as a guest)即可