• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

[TypeScript] 建立与使用AMD Library

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

使用Visual Studio开发TypeScript项目时,开发人员可以将可重用的程序代码,封装为AMD Library来提供其他开发人员使用。本篇文章介绍如何将可重用的程序代码封装为AMD Library,主要为自己留个纪录,也希望能帮助到有需要的开发人员。(本篇文章使用TypeScript 1.8开始提供的功能,请先升级再进行后续开发步骤。)

建立

首先开启Visual Studio来建立一个新项目:「myLibrary」,专案类型选择为:具有TypeScript的HTML应用程序,并且清除项目预先建立的内容档案。这个项目用来封装可重用的程序代码,提供其他开发人员使用。

  • 建立项目

  • 项目结构

接着在项目里,加入一个与项目同名的文件夹:「myLibrary」。并且在该文件夹内,加入提供其他开发人员使用的程序代码类别:「MyClass」。 (如果有更多共享类别,也是建置在myLibrary文件夹内。)

  • myLibrary\MyClass.ts

    export class MyClass {
    
        // methods
        public getMessage(): string {
    
            return "Clark";
        }
    }
    
  • 项目结构

再来还需要在项目根目录下,建立一个与项目同名的ts檔:「myLibrary.ts」,用来汇出项目里的类别。(如果有更多共享类别,也是加入到myLibrary.ts里汇出。)

  • myLibrary.ts

    // export
    export * from "./myLibrary/myClass";        
    
  • 项目结构

完成类别建立之后,接着调整项目的TypeScript建置设定。将项目设定为,在建置时:编译为AMD模块、输出单一档案、并且产生宣告档案。

  • TypeScript建置设定

完成设定步骤后,存盘并且编译项目,就可以在项目的bin目录下取得编译完成的AMD Library内容档:myLibrary.d.ts、myLibrary.js、myLibrary.js.map。

  • 产出AMD Library

使用

接着开启Visual Studio来建立一个新项目:「myApp」,这个项目用来说明,如何使用封装为AMD Library的程序代码。

  • 建立项目

  • 项目结构

建立项目之后,接着调整项目的TypeScript建置设定。将项目设定为,在建置时:编译为AMD模块。

  • TypeScript建置设定

完成项目设定之后,加入一个「lib」文件夹。并且把myLibrary项目所产出的AMD Library的三个档案,加入到这个lib文件夹中。

  • 加入AMD Library

加入AMD Library之后,接着在项目预设的index.html里面,加入下列程序代码,使用RequireJS挂载AMD Library,并且执行预设的app.ts内容。

  • 挂载AMD Library

    <!-- require -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>    
    <script>
        require.config({
            paths: {
                "myLibrary": "lib/myLibrary"
            }
        });
    </script>
    
  • 执行app.ts

    <!-- start -->
    <script>
        require(["app"]);
    </script>
    
  • 完整的index.html

    <!DOCTYPE html>
    
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TypeScript HTML App</title>
        <link rel="stylesheet" href="app.css" type="text/css" />
    
        <!-- require -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>    
        <script>
            require.config({
                paths: {
                    "myLibrary": "lib/myLibrary"
                }
            });
        </script>
    
        <!-- start -->
        <script>
            require(["app"]);
        </script>
    
    </head>
    <body>
        <h1>TypeScript HTML App</h1>
    
        <div ></div>
    </body>
    </html>
    

接着在app.ts里面,加入下列程序来使用Library里面所封装的程序代码。(编写程序代码的时候,可以发现myLibrary支持IntelliSense提示。)

  • 参考AMD Library

    // reference
    /// <reference path="./lib/myLibrary.d.ts" />
    
    // import
    import * as myLibrary from "myLibrary";
    
  • 使用AMD Library中的程序代码

    // test
    var x = new myLibrary.MyClass();
    var message = x.getMessage();
    
    // alert
    alert(message);
    
  • 完整的app.ts

    // reference
    /// <reference path="./lib/myLibrary.d.ts" />
    
    // import
    import * as myLibrary from "myLibrary";
    
    
    // test
    var x = new myLibrary.MyClass();
    var message = x.getMessage();
    
    // alert
    alert(message);
    
  • IntelliSense提示

最后,执行myApp。可以在执行画面上,看到一个Alert窗口显示从Library取得的讯息内容,这也就完成了使用Library的相关开发步骤。

  • 显示回传讯息

范例下载

范例程序代码:下载地址


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap