轉(zhuǎn)帖|其它|編輯:郝浩|2012-03-31 00:33:29.000|閱讀 3657 次
概述:SharpKit是這樣一款C# to JavaScript的轉(zhuǎn)換工具。國(guó)內(nèi)了解SharpKit的人不多,我簡(jiǎn)單介紹一下SharpKit的用法。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
眾所周知,隨著web應(yīng)用對(duì)用戶體驗(yàn)的要求不斷提高,大量的富互聯(lián)網(wǎng)應(yīng)用出現(xiàn),研發(fā)人員開始編寫越來(lái)越多的JavaScript與C#服務(wù)器端代碼,由于JavaScript是一種解釋型語(yǔ)言,不能依靠強(qiáng)大的IDE來(lái)提高生產(chǎn)力,而且JavaScript代碼也很難維護(hù),因此你可以利用C#來(lái)提高JavaScript開發(fā)的效率,將C#轉(zhuǎn)換成JavaScript,而SharpKit正是這樣一款C# to JavaScript的轉(zhuǎn)換工具。國(guó)內(nèi)了解SharpKit的人不多,我簡(jiǎn)單介紹一下SharpKit的用法。
SharpKit的想法就是使web開發(fā)團(tuán)隊(duì)能夠利用C#來(lái)提高JavaScript開發(fā)的效率。 JavaScript的語(yǔ)法基本上是C#的一個(gè)子集,所以有可能從C#來(lái)創(chuàng)建JavaScript。 SharpKit的設(shè)計(jì)目標(biāo)是:
首先我們要下載SharpKit,地址是://sharpkit.net/Download.aspx
安裝之后,我們打開一個(gè)現(xiàn)有的項(xiàng)目(也可以新建一個(gè)SharpKit項(xiàng)目,此處略)。如下圖,是一個(gè)空的web項(xiàng)目:
項(xiàng)目中添加引用:SharpKit.JavaScript.dll (必須引用)、SharpKit.Html4.dll
用文本編輯器打開.csproj文件,將如下代碼正確的加入所有的Import節(jié)后面(SharpKit支持所有的web項(xiàng)目、控制臺(tái)項(xiàng)目和類庫(kù)項(xiàng)目):
<!--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" />
我們先新建一個(gè)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);">快來(lái)點(diǎn)我</button>
</body>
</html>
這里的Demo.js,我們不去寫,而用SharpKit來(lái)生成,如何生成呢?首先我們建一個(gè)類,叫做Demo.cs,代碼如下:
namespace SharpKitDemo
{
public class Demo
{
}
}
我們先添加必要的引用,想把一個(gè)類轉(zhuǎn)換成Javascript,你需要做的就是用JsType 屬性來(lái)裝飾類,用JsMode來(lái)設(shè)置轉(zhuǎn)換模式,代碼如下:
using SharpKit.Html4;
using SharpKit.JavaScript;
namespace SharpKitDemo
{
[JsType(JsMode.Global, Filename = "Demo.js")]
public class Demo : HtmlContext
{
}
}
接著我們來(lái)寫按鈕的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!"));
}
}
}
然后我們重新生成解決方案,就會(huì)發(fā)現(xiàn)在多出了一個(gè)Demo.js,這個(gè)就是Demo.cs通過(guò)SharpKit生成的(每次Demo.cs的代碼改動(dòng)后,重新編譯就會(huì)重新生成Demo.js文件),可以看一下文件中的內(nèi)容:
//@AutoGenerated
……
function btnClickMe_click(e) {
document.body.appendChild(document.createTextNode("Hello SharpKit!"));
}
點(diǎn)擊按鈕生效:
剛才說(shuō)到了JsMode,JsMode.Global將按照如下規(guī)則轉(zhuǎn)換:
如:
[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!"));
}
}
將會(huì)轉(zhuǎn)換成如下js代碼:
var MyNumber = 0;
HelloWorld();
function HelloWorld()
{
document.body.appendChild(document.createTextNode("Hello SharpKit!"));
}
雖然 C# 和轉(zhuǎn)換后的 JavaScript 代碼類似,但要注意它的類型。在 visual studio 項(xiàng)目,記得使用鼠標(biāo)在document或 createTextNode等標(biāo)記懸停,查看提示。用代碼補(bǔ)全提示中不存在的方法將導(dǎo)致編譯錯(cuò)誤。
JsMode.Prototype將按照如下規(guī)則轉(zhuǎn)換:
如:
[JsType(JsMode.Prototype, Filename="Contact.js")]
class Contact
{
public void Call()
{
}
public static Contact Load()
{
return null;
}
}
將會(huì)轉(zhuǎn)換成如下js代碼:
Contact = function()
{
}
Contact.prototype.Call = function()
{
}
Contact.Load = function()
{
return null;
}
JsMode.Json將不導(dǎo)出js,它會(huì)給你使用 JSON 符號(hào)類型類的能力:
如:
[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 };
}
}
將會(huì)轉(zhuǎn)換成如下js代碼:
function Main()
{
var options = {Name:"MyName, IsCool:true};
}
這個(gè)功能在類的構(gòu)造函數(shù)選項(xiàng)中十分的有用,例如:jQuery.ajax(options)。它提供了在客戶端和服務(wù)器端共享web服務(wù)數(shù)據(jù)協(xié)定的能力,只需用JsType(JsMode.Json)來(lái)標(biāo)記數(shù)據(jù)協(xié)定類,就可以在C#中使用并生成Javascript內(nèi)容。
SharpKit 支持任何基于 JavaScript 庫(kù),為了讓JS庫(kù)與 SharpKit一起使用,需要C#頭文件(C# ‘header’ file)。C# 頭文件包含庫(kù)中所提供的所有的類和方法,創(chuàng)建C#頭文件比較復(fù)雜,SharpKit 的 SDK包含了開放源碼的 C# 頭文件,支持所有流行的 web 庫(kù),如 jQuery、ASP.NET Ajax、 ExtJS、 jQTouch等。
下面是一個(gè)使用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")});
}
每一個(gè) JavaScript 基元類型具有等效的 C# 類型。為了避免歧義與本機(jī) C# 的類型,”Js”前綴添加到每個(gè) JavaScript 基元類型。例如字符串對(duì)象被命名為 JsString,在 C# 中的,數(shù)等被命名為 JsNumber。
出處://www.feeldesignstudio.com/2011/08/24/sharpkit.html
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:網(wǎng)絡(luò)轉(zhuǎn)載