使用C#编写JavaScript，Saltarelle库的使用

╰+攻爆jí腚メ 2022-08-13 13:59 130阅读 0赞

Saltarelle是开源的，官网：[http://www.saltarelle-compiler.com/][http_www.saltarelle-compiler.com]

实际项目中的一些应用：

[http://www.codeproject.com/Articles/516529/TodoMVC-in-Csharp-with-Saltarelle-and-Knockout][http_www.codeproject.com_Articles_516529_TodoMVC-in-Csharp-with-Saltarelle-and-Knockout]

[http://www.codeproject.com/Articles/504105/A-fixed-point-data-type-class-in-Csharp-Saltarelle][http_www.codeproject.com_Articles_504105_A-fixed-point-data-type-class-in-Csharp-Saltarelle]

[http://www.codeproject.com/Articles/517236/SaltarelleplusvsplusJSILplus-plusRaytracerplusDemo][http_www.codeproject.com_Articles_517236_SaltarelleplusvsplusJSILplus-plusRaytracerplusDemo](JSIL：[http://jsil.org/][http_jsil.org] )

## Saltarelle C\# to JavaScript Compiler ##

This compiler can compile C\# into JavaScript. By doing this you can leverage all the advantages of C\#, such as static type checking, IntelliSense (the kind that works) and lambda expressions when writing code for the browser. Never, ever, experience an 'object does not support this property or method' again!!.

Saltarelle is not an entire framework for web application development (such as GWT), rather it consists of a compiler and a small runtime library that only contains the things necessary for the language features to work. It is, however, designed with interoperability in mind so you can use any existing JavaScript framework with it. It comes with support for jQuery, and other libraries can be used either by authoring an import library (which is just a class / set of classes with special attributes on their members) or by using they 'dynamic' feature of C\# 4.

The compiler comes as a command line utility, with options similar to those of csc.exe, and as an MSBuild task (and a corresponding .targets file).

To get started compiling, see the [Getting Started guide][].

The compiler supports most of C\# 5.0. For details, see [Language Fetaures][].

There are samples available at [https://github.com/erik-kallen/SaltarelleCompilerSamples][https_github.com_erik-kallen_SaltarelleCompilerSamples].

There is a forum for users: [http://saltarellecompiler.freeforums.org/][http_saltarellecompiler.freeforums.org]

CI server is provided by [codebetter.com][]

# Getting Started:[http://www.saltarelle-compiler.com/getting-started][Getting Started guide] #

下面是转载的文章（中文） [http://www.cnblogs.com/Leo\_wl/archive/2013/05/05/3061490.html][http_www.cnblogs.com_Leo_wl_archive_2013_05_05_3061490.html]

前端开发中JavaScript代码的维护总是让人头疼，特别是在富客户端应用中，必须要编写非常庞大的JavaScript代码，虽然JavaScript声称是面向对象的语言，但对于现代语言中常见的继承、强类型等的支持十分有限。如果我们能够将C\#语言中的特性运用于JavaScript上，那么肯定将极大地提高JavaScript代码的维护性，提升开发效率。[Saltarelle][http_www.saltarelle-compiler.com]编译器就是这样的一个工具，他能将C\#代码编译为JavaScript代码。

本文将展示如何使用Saltarelle编写JavaScript代码，我们将结合Saltarelle.jQuery和Saltarelle.Knockout库说明如何使用Saltarelle。本文使用Visual Studio 2012作为开发工具，通过NuGet获取相关扩展包。

1、首先新建一个空ASP.NET应用项目，此项目作为前端演示网站，项目名称为Web

2、添加一个类库项目，作为JavaScript脚本项目，该项目使用Saltarelle编译器自动生成脚本代码，项目名称为Scripts

3、选择Scripts项目，单击右键，选择“管理NuGet程序包”，在程序包管理界面，在上方搜索窗口中输入Saltarelle，搜索有关Saltarelle的包：

> [![image][]][image 1]
> 
> 依次安装Saltarelle C\# to JavaScript Compiler、Runtime library for the Saltarelle C\# to JavaScript… 、Metadata required to use jQuery with Saltarelle …、Metadata required to use Knockout with Saltarelle …

4、Saltarelle包会更新Scripts项目，添加必要程序集引用，并修改项目使用Saltarelle编译器，由于Visual Studio 本身Bug，我们需要手动卸载并重新载入Scripts项目。此操作通过项目右键菜单完成。

5、修改Scripts项目类型：单击Scripts项目，右键选择属性，在输出类型中选择“控制台应用程序”，做此项修改的原因是让Saltarelle编译器自动调用Scripts的入口方法（即，Program的Main方法）

6、打开Properties文件夹下的AssemblyInfo.cs代码文件，注释掉一下ComVisible和Guid特性：

![复制代码][copycode.gif]

[![复制代码][copycode.gif]][copycode.gif 1]

// 将 ComVisible 设置为 false 使此程序集中的类型
    // 对 COM 组件不可见。如果需要从 COM 访问此程序集中的类型，
    // 则将该类型上的 ComVisible 特性设置为 true。
    //[assembly: ComVisible(false)]
    
    // 如果此项目向 COM 公开，则下列 GUID 用于类型库的 ID
    //[assembly: Guid("ecc66b86-53da-44b6-b83a-87b52da11e91")]

[![复制代码][copycode.gif]][copycode.gif 1]

![复制代码][copycode.gif]

7、将Scripts项目中自动添加的Class1.cs代码文件修改为Program，并添加Main方法：

![复制代码][copycode.gif]

[![复制代码][copycode.gif]][copycode.gif 1]

namespace Scripts
    {
        class Program
        {
            static void Main()
            {
    
            }
        }
    }

[![复制代码][copycode.gif]][copycode.gif 1]

![复制代码][copycode.gif]

8、生成Scripts项目，完成后，我们可以在生成输出目录看到所生成的Scripts.js文件

接下来，我们演示如何使用jQuery：

jQuery中可以使用ready注册在页面载入完成后所要执行的程序，在Saltarelle.jQuery中，我们可通过OnDocumentReady方法来完成相同的功能，下面示例实现在页面载入完成后弹出提示框的功能:

1、在Program.cs中添加System.Html和jQueryApi命名空间

2、修改Main方法，代码如下：

![复制代码][copycode.gif]

[![复制代码][copycode.gif]][copycode.gif 1]

using System.Html;
    using jQueryApi;
    
    namespace Scripts
    {
        class Program
        {
            static void Main()
            {
                jQuery.OnDocumentReady(() =>
                {
                    Window.Alert("Page is loaded");
                });
            }
        }
    }

[![复制代码][copycode.gif]][copycode.gif 1]

![复制代码][copycode.gif]

> copy $(TargetDir)$(TargetName).js $(SolutionDir)Web\\Scripts\\$(TargetName).js

5、为了保证在生成Web项目时能自动更新Scripts.js脚本，可在Web项目中添加对Scripts项目的引用

6、下面在Web项目中添加一个名称为Index.html的HTML页面。在head标签内添加必要js文件的引用：

![复制代码][copycode.gif]

[![复制代码][copycode.gif]][copycode.gif 1]

![复制代码][copycode.gif]

[![复制代码][copycode.gif]][copycode.gif 1]

using System;
    using KnockoutApi;
    
    namespace Scripts
    {
        public class IndexViewModel
        {
            // 页面标题， 使用Observable表示该字段支持更改通知，当值改变时，它所关联的UI将自动更新
            public Observable<string> PageTitle = Knockout.Observable<string>();
    
            // 表示支持更改通知的数组
            public ObservableArray<LogItem> Logs = Knockout.ObservableArray<LogItem>();
        }
    
        public class LogItem
        {
            public string Level = String.Empty;
    
            public DateTime Time;
    
            public String Message = String.Empty;
        }
    }

[![复制代码][copycode.gif]][copycode.gif 1]

![复制代码][copycode.gif]

注意：有关如何使用Knockout实现MVVM模式，请参考Knockout官方网站

2、在Main方法中绑定ViewModel：

![复制代码][copycode.gif]

[![复制代码][copycode.gif]][copycode.gif 1]

using System.Html;
    using jQueryApi;
    using KnockoutApi;
    
    namespace Scripts
    {
        class Program
        {
            static void Main()
            {
                jQuery.OnDocumentReady(() =>
                {
                    Window.Alert("Page is loaded");
    
                    IndexViewModel vm = new IndexViewModel();
                    vm.PageTitle.Value = "未命名";
    
                    Knockout.ApplyBindings(vm);
                });
            }
        }
    }

[![复制代码][copycode.gif]][copycode.gif 1]

![复制代码][copycode.gif]

3、将包中Knockout库文件拷贝到Web项目的Scripts目录中

4、在Index.html文件中添加对Knockout库js文件的引用

5、在Index.html使用ViewModel，实现数据绑定

![复制代码][copycode.gif]

[![复制代码][copycode.gif]][copycode.gif 1]

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script type="text/javascript" src="Scripts/mscorlib.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="Scripts/knockout-2.2.0.min.js"></script>
        <script type="text/javascript" src="Scripts/Scripts.js"></script>
    </head>
    <body>
        <h1 data-bind="text:pageTitle"></h1>
        <button id="btnEdit">修改标题</button>
        <p>
            <strong>日志：</strong>
        </p>
        <ul data-bind="foreach:logs">
            <li>[<span data-bind="text:time"></span>]<span data-bind="text:level"></span><br /><span data-bind="text:message"></span></li>
        </ul>
    </body>
    </html>

[![复制代码][copycode.gif]][copycode.gif 1]

![复制代码][copycode.gif]

需要注意的是，Salarelle编译器在生成js文件时，会自动对C\#中的名称转换为js规范，故我们看到在html中，数据绑定时所使用的字段名称都是以小写字母开始。

6、在Html中有个“修改标题”的按钮，我们需要为此按钮增加事件处理函数，这里我们采用jQuery的click事件绑定方式，只需在Main方法、OnDocumentReady中增加以下代码：

![复制代码][copycode.gif]

[![复制代码][copycode.gif]][copycode.gif 1]

jQuery.Select("#btnEdit").Click((s) =>
                    {
                        vm.PageTitle.Value = "标题" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
                        vm.Logs.Value = vm.Logs.Value.Concat(new LogItem()
                        {
                            Level = "信息",
                            Time= DateTime.Now,
                            Message = "修改了标题"
                        });
                    });

[![复制代码][copycode.gif]][copycode.gif 1]

![复制代码][copycode.gif]

代码很简单，直接修改PageTitle，并向日志列表中添加一项日志。

7、启动调试，单击页面中按钮，执行效果

[![image][image 2]][image_image 2]

[源代码下载][Link 1]** **

[http_www.saltarelle-compiler.com]: http://www.saltarelle-compiler.com/
[http_www.codeproject.com_Articles_516529_TodoMVC-in-Csharp-with-Saltarelle-and-Knockout]: http://www.codeproject.com/Articles/516529/TodoMVC-in-Csharp-with-Saltarelle-and-Knockout
[http_www.codeproject.com_Articles_504105_A-fixed-point-data-type-class-in-Csharp-Saltarelle]: http://www.codeproject.com/Articles/504105/A-fixed-point-data-type-class-in-Csharp-Saltarelle
[http_www.codeproject.com_Articles_517236_SaltarelleplusvsplusJSILplus-plusRaytracerplusDemo]: http://www.codeproject.com/Articles/517236/SaltarelleplusvsplusJSILplus-plusRaytracerplusDemo
[http_jsil.org]: http://jsil.org/
[Getting Started guide]: http://www.saltarelle-compiler.com/getting-started
[Language Fetaures]: http://www.saltarelle-compiler.com/documentation/supported-c-language-features
[https_github.com_erik-kallen_SaltarelleCompilerSamples]: https://github.com/erik-kallen/SaltarelleCompilerSamples
[http_saltarellecompiler.freeforums.org]: http://saltarellecompiler.freeforums.org/
[codebetter.com]: http://codebetter.com/
[http_www.cnblogs.com_Leo_wl_archive_2013_05_05_3061490.html]: http://www.cnblogs.com/Leo_wl/archive/2013/05/05/3061490.html
[image]: /images/20220810/da83905708a14af3af0d3548e54c6a69.png
[image 1]: http://images.cnitblog.com/blog/116931/201305/05192900-96084d00cab148ebabb0afa0715a8e5e.png
[copycode.gif]: /images/20220810/6377f825b46449be9724109f7aa7863c.png
[copycode.gif 1]: /images/20220810/a6264f64e6a946cabe37f1e05c4e307e.png
[image 2]: http://images.cnitblog.com/blog/116931/201305/05192909-8711b752fd76436aa8468d823ea119f1.png
[image_image 2]: /images/20220810/bb716cfcc54b4f90a234955fa12a0184.png
[Link 1]: http://files.cnblogs.com/xfrog/CSharpToJavaScript.zip