彩票走势图

SharpKit--一款C# to JavaScript 转换工具

转帖|其它|编辑：郝浩|2012-03-31 00:33:29.000|阅读 3608 次

概述：SharpKit是这样一款C# to JavaScript的转换工具。国内了解SharpKit的人不多，我简单介绍一下SharpKit的用法。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

　　众所周知，随着web应用对用户体验的要求不断提高，大量的富互联网应用出现，研发人员开始编写越来越多的JavaScript与C#服务器端代码，由于JavaScript是一种解释型语言，不能依靠强大的IDE来提高生产力，而且JavaScript代码也很难维护，因此你可以利用C#来提高JavaScript开发的效率，将C#转换成JavaScript，而SharpKit正是这样一款C# to JavaScript的转换工具。国内了解SharpKit的人不多，我简单介绍一下SharpKit的用法。

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

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

基本知识

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

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

　　SharpKit,C#转换器,JavaScript转换器

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

　　SharpKit,C#转换器,JavaScript转换器

　　用文本编辑器打开.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" "//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
……
function btnClickMe_click(e) {
document.body.appendChild(document.createTextNode("Hello SharpKit!"));
}

　　点击按钮生效：

　　SharpKit,C#转换器,JavaScript转换器

转换规则

　　刚才说到了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。

出处：//www.feeldesignstudio.com/2011/08/24/sharpkit.html


标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自：网络转载

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP