TypeScript-Learning-Series-09


模块

模块的的概念(官方):

  • 关于术语的一点说明: 请务必注意一点,TypeScript 1.5里术语名已经发生了变化。 “内部模块”现在称做“命名空间”。
  • “外部模块”现在则简称为“模块” 模块在其自身的作用域里执行,而不是在全局作用域里;
  • 这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。
  • 相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用 import形式之一。

模块的概念(自己理解):

  • 我们可以把一些公共的功能单独抽离成一个文件作为一个模块。
  • 模块里面的变量 函数 类等默认是私有的,如果我们要在外部访问模块里面的数据(变量、函数、类),
  • 我们需要通过export暴露模块里面的数据(变量、函数、类…)。
  • 暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据(变量、函数、类…)。

Demo01

import { getData,save } from './modules/db';
getData();
save();
var dbUrl='xxxxxx';

export function getData():any[]{
    console.log('获取数据库的数据111');
    return [
        {
            title:'121312'
        },
        {
            title:'121312'
        }
    ]
}

export function save(){
    console.log('保存数据成功');
}

Demo02

import { dbUrl,getData as get} from './modules/db';
console.log(dbUrl);
get();
var dbUrl='xxxxxx';

function getData():any[]{
    console.log('获取数据库的数据111');
    return [
        {
            title:'121312'
        },
        {
            title:'121312'
        }
    ]
}

function save(){
    console.log('保存数据成功');
}

export {dbUrl,getData,save};

Demo03

  • export default 默认导出
  • 每个模块都可以有一个default导出。 默认导出使用 default关键字标记;并且一个模块只能够有一个default导出。 需要使用一种特殊的导入形式来导入 default导出。
import getData from './modules/db';
getData();
var dbUrl='xxxxxx';

function getData():any[]{
    console.log('获取数据库的数据111');
    return [
        {
            title:'121312'
        },
        {
            title:'121312'
        }
    ]

}

function save(){
    console.log('保存数据成功');
}

// export {getData};
export default getData;

Demo04

  • 功能:定义一个操作数据库的库 支持 Mysql Mssql MongoDb
  • 要求1:Mysql MsSql MongoDb功能一样 都有 add update delete get方法
  • 注意:约束统一的规范、以及代码重用
  • 解决方案:需要约束规范所以要定义接口 ,需要代码重用所以用到泛型

1.接口:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范
2.泛型: 通俗理解:泛型就是解决 类 接口 方法的复用性

操作用户表 定义一个User类和数据表做映射

import {MsSqlDb} from './modules/db'

class User{
    username:string | undefined;
    password:string | undefined;
}

var u=new User();
u.username='张三2222';
u.password='123456';
var oMssql=new MsSqlDb<User>();
oMssql.add(u);
interface DBI<T>{
    add(info:T):boolean;
    update(info:T,id:number):boolean;
    delete(id:number):boolean;
    get(id:number):any[];
}

定义一个操作mysql数据库的类 注意:要实现泛型接口 这个类也应该是一个泛型类

export class MysqlDb<T> implements DBI<T>{
    constructor(){
        console.log('数据库建立连接');
    }

    add(info: T): boolean {
        console.log(info);
        return true;
    }    

    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }

    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }

    get(id: number): any[] {
        var list=[
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            },
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            }
        ]
        return list;
    }
}

定义一个操作mssql数据库的类

export class MsSqlDb<T> implements DBI<T>{
    constructor(){
        console.log('数据库建立连接');
    }

    add(info: T): boolean {
        console.log(info);
        return true;
    }    

    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }

    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }

    get(id: number): any[] {
        var list=[
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            },
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            }
        ]
        return list;
    }
}

Demo05

import {UserClass,UserModel} from './model/user';
import {ArticleClass,ArticleModel} from './model/article';

//增加数据
var u=new UserClass();
u.username='张三';
u.password='12345655654757';
UserModel.add(u);

//获取user表数据
var res=UserModel.get(123);
console.log(res);

//获取文章表的数据
var aRes=ArticleModel.get(1);
console.log(aRes);
  • model 01
import {MsSqlDb} from '../modules/db';

//定义数据库的映射
class ArticleClass{
    title:string | undefined;
    desc:string | undefined;
}

var ArticleModel=new MsSqlDb<ArticleClass>();

export {
    ArticleClass,ArticleModel
}
  • model 02
import {MsSqlDb} from '../modules/db';

//定义数据库的映射
class UserClass{
    username:string | undefined;
    password:string | undefined;
}

var UserModel=new MsSqlDb<UserClass>();

export {
    UserClass,UserModel
}
  • Module
interface DBI{
    add(info:T):boolean;
    update(info:T,id:number):boolean;
    delete(id:number):boolean;
    get(id:number):any[];
}

//定义一个操作mysql数据库的类       注意:要实现泛型接口 这个类也应该是一个泛型类
export class MysqlDb implements DBI{
    constructor(){
        console.log('数据库建立连接');
    }

    add(info: T): boolean {
        console.log(info);
        return true;
    }    

    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }

    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }

    get(id: number): any[] {
        var list=[
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            },
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            }
        ]
        return list;
    }
}

//定义一个操作mssql数据库的类  
export class MsSqlDb implements DBI{
    constructor(){
        console.log('数据库建立连接');
    }

    add(info: T): boolean {
        console.log(info);
        return true;
    }    

    update(info: T, id: number): boolean {
        throw new Error("Method not implemented.");
    }

    delete(id: number): boolean {
        throw new Error("Method not implemented.");
    }

    get(id: number): any[] {
        var list=[
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            },
            {
                title:'xxxx',
                desc:'xxxxxxxxxx'
            }
        ]
        return list;
    }
}

文章作者: Chaoqiang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Chaoqiang !
评论
 上一篇
TypeScript-Learning-Series-10 TypeScript-Learning-Series-10
命名空间命名空间:在代码量较大的情况下,为了避免各种变量命名相冲突,可将相似功能的函数、类、接口等放置到命名空间内同Java的包、.Net的命名空间一样,TypeScript的命名空间可以将代码包裹起来,只对外暴露需要在外部访问的对象。命名
下一篇 
Angular Crash Tutorial Angular Crash Tutorial
1.Angular 快速入门这是一个非常基础的快速入门教程,比较注重概念模型的构建。掌握这门框架的精髓,可以这门理解: 当有人提到 Spring 的时候,你的大脑里面第一个想到的一定是 DI、IoC、AOP 这些核心概念; 当有人提到 H
2020-03-12
  目录