[TypeScript] 建立与使用AMD Library
[TypeScript] 建立与使用AMD Library
前言
使用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 id="content"></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的相关开发步骤。
显示回传讯息
范例下载
范例程序代码:下载地址
[TypeScript] 建立与使用AMD Library的更多相关文章
- [Tool] 使用Visual Studio Code开发TypeScript
[Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在「Windows」.「OS X」操作系统上,使用Visual Studio Code ...
- Visual Studio Code开发TypeScript
[Tool] 使用Visual Studio Code开发TypeScript [Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在 ...
- 转载 《我用 TypeScript 语言的七个月》
快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...
- (7) 引用Objective-C class library
原文 引用Objective-C class library 这个范例是如何在Xamarin.ios中去使用一个我们自行在Xcode中开发的Objective-c Class Library. 主要会 ...
- [Xamarin.iOS] 如何引用Objective-c寫的Class Library (转帖)
這個範例是如何在Xamarin.ios中去使用一個我們自行在Xcode中開發的Objective-c Class Library. 主要會執行的步驟如下 1. 在Xcode 裡面去建立一個Class ...
- SuiteScript > RecordType internalID采集步骤与结果
当你碰到一个有很多sub Fields的id需要map到js文件的时候,是不是想到一个个复制到js文件中?建立成Object,library起来,方便不同的module中共享. 一个复制,很烦,很浪费 ...
- [CLK Framework] CLK.Threading.PortableTimer - 跨平台的Timer类别
[CLK Framework] CLK.Threading.PortableTimer - 跨平台的Timer类别 问题情景 开发应用程式的时候,免不了需要加入一些定时执行的设计,例如说:定时更新画面 ...
- C++ DLL中导出函数的声明的方法
定义: TESTDLLEXPORT_API int fnTestDllExport(void); TESTDLLEXPORT_API int fnTestCall(void); TESTDLLEXPO ...
- WPF中嵌入Flash(ActiveX)
1. 建立 WPF Application. 首先,建立一个名为 FlashinWPF 的 WPF Application 2. 设置 Window 属性. 在 XAML 中修改 Window 的属性 ...
随机推荐
- Android开发学习之路-PopupWindow和仿QQ左滑删除
这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...
- Atitti onvif 设备发现与原理
Atitti onvif 设备发现与原理 1.1. ,有以下几个步骤:1 1.2. 设备搜索原理及编程技巧:2 1.3. Ws disconvert 的组播地址和端口就是37022 1)发现ipca ...
- struts2+spring+hibernate 实现分页
在这里要感谢下这位博友发表的博文 http://www.blogjava.net/rongxh7/archive/2008/11/29/243456.html 通过对他代码的阅读,从而自己实现了网页分 ...
- 《Qt Quick 4小时入门》学习笔记2
http://edu.csdn.net/course/detail/1042/14805?auto_start=1 Qt Quick 4小时入门 第五章:Qt Quick基本界面元素介绍 1. ...
- Distribution2:Distribution Writer
Distribution Writer 调用Statement Delivery 存储过程,将Publication的改变同步到Subscriber中.查看Publication Properties ...
- SSIS Data Flow 的 Execution Tree 和 Data Pipeline
一,Execution Tree 执行树是数据流组件(转换和适配器)基于同步关系所建立的逻辑分组,每一个分组都是一个执行树的开始和结束,也可以将执行树理解为一个缓冲区的开始和结束,即缓冲区的整个生命周 ...
- Package Configurations的使用示例
SSIS提供Package Configurations功能,能够动态修改配置数据,使package执行不同的变量,从不同的connection中获取数据,而这些变化,不需要修改Package,不需要 ...
- Bower : ENOGIT git is not installed or not in the PATH
解决方法一: 添加git到window的环境变量中.设置path路径为C:\Program Files\Git\bin 解决方法二: $ set PATH=%PATH%;C:\Program File ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- JavaScript跨域调用、JSONP、CORS与ASP.NET Web API[共8篇]
[第1篇] 同源策略与JSONP 浏览器是访问Internet的工具,也是客户端应用的宿主,它为客户端应用提供一个寄宿和运行的环境.而这里所说的应用,基本是指在浏览器中执行的客户端JavaScript ...