基于 TypeScript 的网站开发框架

Javascript 专栏收录该内容
12 篇文章 0 订阅

TypeScript 是 Javascrip t超集,支持静态类型检测,可以在编译期提前暴露问题,节省 debug 时间,下面介绍一个基于 TypeScript 开发的网站的框架。

一 网站基础结构

首先,把网站的基本结构搭建起来。新键一个 www 目录,作为网站的根目录。然后新建一个 index.html ,作为网站入口,内容如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于 TypeScript 的网站开发框架</title>
    <script src="./js/index.js"></script>
</head>

<body>

</body>

</html>

在网页中,使用 <script src="./js/index.js"></script> 引用了一个 js 文件。在 www 目录中新键一个 js 目录,在其中新键 index.js, 内容如下:

window.onload = function () {
    console.log("onload");
}

这时候使用浏览器打开 index.html 文件,可以在控制台看到输出 onload ,说明运行成功。

二 TypeScript 模块

一个网站可能功能很复杂,需要将各个不同的功能,封装到不同的模块中。在 www 同级目录,新建 app 和 framework 目录,app 作为 TypeScript 主要逻辑模块,framework 作为基础功能库模块,可以多个项目共用。添加完成后,目录结构如下:

dir

为了方便测试,在两个项目分别添加一些内容。

1 framework 项目

在 framework 添加一个日志管理器,提供给其他模块使用,日志管理中有一个开关,控制是否打印日志。
在 framework 目录中添加 src 目录,在 src 目录中添加 LogMgr.ts 文件,代码内容如下:

namespace framework {
    export class LogMgr {
        // 日志开关
        private static isDebug: boolean = true;

        public static info(msg: string) {
            if (this.isDebug) {
                console.log(msg);
            }
        }

        public static warn(msg: string) {
            if (this.isDebug) {
                console.warn(msg);
            }
        }

        public static error(msg: string) {
            if (this.isDebug) {
                console.error(msg);
            }
        }
    }
}

2 app 项目

app 是网站的主要逻辑模块,也是 TypeScript 脚本的入口。测试代码中,引用日志管理器打印日志。
在 app 目录中添加 src 目录,在 src 目录中添加 App.ts 文件,代码内容如下:

namespace app {
    import LogMgr = framework.LogMgr;
    export class App {

        public static main() {
            LogMgr.info("app start");
            LogMgr.warn("warn msg");
            LogMgr.error("error msg");
            LogMgr.info("app end");
        }
    }
    App.main();
}

3 TypeScript 编译配置

TypeScript 需要编译成 JavaScript 之后才能在网页中使用。TypeScript 的编译配置文件 tsconfig.json,支持集成,可以将多个项目公用的配置,放在基类 tsconfig-base.json 中。

跟 www 目录的同级添加基类配置文件 tsconfig-base.json,内容如下:

{
  "compilerOptions": {
    "target": "es6",
    "module": "system",
    "strict": true,
    "sourceMap": true,
    "removeComments": true,
    "declaration": true,
    "declarationDir": "./libs/"
  }
}

然后分别在 framework 和 app 目录分别添加项目的配置文件,内容如下:

{
    "extends": "../tsconfig-base.json",
    "compilerOptions": {
        "outDir": "../www/js/framework"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules"
    ]
}
{
    "extends": "../tsconfig-base.json",
    "compilerOptions": {
        "outDir": "../www/js/app"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules"
    ],
    "files": [
        "../libs/LogMgr.d.ts"
    ]
}

配置内容中,有几项需要另外说明,首先是基类配置文件中的

    "declaration": true,
    "declarationDir": "./libs/"

declaration 为 true 时,编译时会生成声明文件 .d.ts,方便给其他模块使用,否则其他模块引用不到其他模块的内容。declarationDir 配置的是 .d.ts 的存放目录。

在 app 的配置文件中:

    "files": [
        "../libs/LogMgr.d.ts"
    ]

就是引用 framework 导出的声明文件。

dirts

4 编译 TypeScript 模块

在 framework 目录和 app 目录执行 tsc 目录,会在 libs 目录下导出声明文件 .d.ts,在 www/js 目录中生成相应的 .js 文件。如下:

dircom

三 引用 TypeScript

在编译之后,js 文件已经生成到 js 目录中了,需要在网站的中引用生成的js文件,修改 index.js 的代码如下:

function loadLib(url) {
    var script = document.createElement("script");
    script.async = false;
    script.src = url;
    document.body.appendChild(script);
    return script;
}

window.onload = function () {
    // 加载 TypeScript 编译生成的 js 文件
    loadLib("./js/framework/LogMgr.js");
    loadLib("./js/app/app.js");
}

在 index.js 中添加了一个 loadLib 函数,用于加载 TypeScript 编译生成的 js 文件,在 onload 方法中,分别加载两个模块的js。

运行可以看到在 app 项目中,调用日志管理器打印的log。

res
后续网站开发只需要在对应的 TypeScript 模块中进行。

  • 1
    点赞
  • 1
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值