眾所周知，隨著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.JavaScript.dll (必須引用)、SharpKit.Html4.dll
用文本編輯器打開.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!"));
}
點擊按鈕生效：
轉換規則
剛才說到了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@fc6vip.cn
文章轉載自：網絡轉載
金喜正規買球 
109次
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線