1. 背景
目前为止,咱们的代码都是写在入口文件index.ts
中,但是所有的代码都写在这里边并不方便维护。如果能像Java那样,一个类一个文件,就会更容易维护和拓展。
创建一个文件夹,modules文件夹,将类代码迁移到modules
文件夹,主函数单独暴露在外。和Java比较不同的是,类的模块需要用export default 类名
,将类作为默认模块暴露出去。其他的代码若要引入模块,使用import
语句即可。
2. 实施
代码迁移后文件夹结构:
2.1 Food.ts代码
// 定义食物类Food
class Food {
// 定义一个属性表示食物所对应的元素
private element: HTMLElement;
constructor() {
// 获取页面中的food元素并将其赋值给element成员变量
// 感叹号! : 肯定获取的元素不可能为空,就不用进行空值判断了
this.element = document.getElementById("food")!;
}
// 定义一个获取食物X轴坐标的方法
get X() {
return this.element.offsetLeft;
}
// 定义一个获取食物Y轴坐标的方法
get Y() {
return this.element.offsetTop;
}
// 修改食物的位置
public change() {
// 生成一个随机的位置
// 食物的位置最小是0,最大是290px
let left = Math.floor(Math.random() * 30) * 10;
let top = Math.floor(Math.random() * 30) * 10;
this.element.style.left = top + "px";
this.element.style.top = left + "px";
}
}
export default Food;
2.2 ScorePanel.ts代码
// 定义表示记分牌的类
class ScorePanel {
// score和level用来记录分数和等级
private score: number = 0;
private level: number = 1;
// 分数和等级所在的元素,在构造函数中进行初始化
private scoreEle: HTMLElement;
private levelEle: HTMLElement;
// 设置一个变量限制等级
private maxLevel: number;
// 设置一个变量表示每多少分难度升级一次
private upScore: number;
// 默认的最高等级为10
constructor(maxLevel: number = 10, upScore: number = 10) {
this.scoreEle = document.getElementById("score")!;
this.levelEle = document.getElementById("level")!;
this.maxLevel = maxLevel;
this.upScore = upScore;
}
// 设置一个分数自增1的方法
public addScore(): void {
this.scoreEle.innerHTML = ++this.score + '';
// 判断分数的阈值,达到阈值提升等级
if (this.score % 10 === 0) {
this.levelUp();
}
}
// 提升等级方法
private levelUp(): void {
// level有最高等级
if (this.level < this.maxLevel) {
this.levelEle.innerHTML = ++this.level + '';
}
}
}
export default ScorePanel;
2.3 index.ts代码
index.ts代码如下,简化的同时,测试代码和期望符合,同时代码的可读性大幅提升。
// 引入样式
import "./style/index.less";
// 引入类
import Food from './modules/Food'
import ScorePanel from './modules/ScorePanel';
// 测试,加30分后,score为30,level为4
const scorePanel: ScorePanel = new ScorePanel();
for (let i = 0; i < 30; i++) {
scorePanel.addScore();
}