怎样写出简洁的TypeScript项目
Posted SEvent的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样写出简洁的TypeScript项目相关的知识，希望对你有一定的参考价值。
TypeScript是javascript语言的超集，使用它编写完成后可编译成为JS在浏览器上运行。选择使用TS来替代JS的原因是前者在后者基础上提供了类型检测以及更加全面的面向对象编程手段，使得我们编写的代码更加易读且质量更高。那么如何写出更加简洁易读且高质量的TS代码呢？下面是根据本人多年经验总结的一些点，如有需要补充及纠正的可以在评论区写出。
变量声明
变量命名需遵循“易懂”的原则，起名时多打几个字可以为你再次浏览代码省去大量的理解时间。
let num;//坏
let numberOfStudents;//好
另外，变量命名需遵循以小写字母开头的驼峰式命名方式。
使用常量const来定义一些配置项，注意，const类型的变量需要使用全大写字母加下划线来命名，这样使你一眼就知道该变量是const类型。使用const可以避免在编写代码时误修改变量的值
for(let i=0; i<365; i++)
{
//坏例子，不知道该循环是想干嘛，且出现多次该循环的情况下，一旦修改循环终结条件，即365这个值，需要找到每个循环出现的地方并一个个修改365这个值，一是工作量打大，二是容易发生遗漏
}
const DAY_OF_A_YEAR = 365;//好例子，使用常量明确了365这个值的意义，且修改常量的值可以一次性地改掉项目中所有循环的终结条件
DAY_OF_A_YEAR += 1;//使用const还能避免项目中对其的误修改。此代码会报错说不能修改常量
for(let i=0; i<DAY_OF_A_YEAR; i++)
{
//一眼就看出来该循环是在遍历一年中的每一天
}
使用枚举Enum来定义选项，定义后可以受益于VS CODE这个IDE下相当直观的代码提示。值得注意的是，Enum也是一种常量，它的值也没法被修改。
var ALIGN_LEFT=0, ALIGN_RIGHT=1;//JS中常用方式，使用统一前缀来将一组变量关联起来
var ALIGN = {LEFT:0, RIGHT:1};//JS中另一种常用方式，较上一种更加直观
enum ALIGN{LEFT, RIGHT};//TS中可以使用枚举来定义，与上面那种用法差不多，但是好处是代码提示更加直观
类Class中的共有(public)变量需以小写字母开头，受保护(protected)变量需以dollar符号($)开头，私有(prvate)变量需以下划线(_)开头
class C{
public publicVar;
protected $protectedVar;
private _privateVar;
protected $protectedFuc(){}
private _privateFuc(){}
}
这么做的好处，一方面可以让程序员一眼就知道成员变量/方法的可访问状态，另一方面在VS CODE等IDE的代码“大纲”视图下可以将所有成员变量/方法排放得非常整齐便于查找。
代码位置
分散在项目中各处的代码就像零乱散落在地面的零件，将它们分类整合后放置可以很方便地找到它们。
类Class中，public类型方法/变量需放在最上方，因为它被浏览得最频繁，其次是protected的以及private的。如果有某些protected的方法，如init之类的频繁需要浏览和修改的也可放在偏前的位置，总之，放置在前还是后全根据该变量/方法被浏览/修改的频繁程度而定。
常量const按关联性进行放置。
enum PLAYER_STATE{SIT=1, READY, PLAYING, WATCH};//玩家状态
class PlayerVO{
static PLAYER_STATE = PLAYER_STATE;//因为其仅与PlayerVO这个类有关系，因此放在PlayerVO中
}
若有一些常量是全局都会用到的，则需要单独新建一个地方将它们收集起来
//Definition.ts
namespace core.Definition{
/** 卡牌花色 */
export enum CARD_SUIT{HEART='heart', SPADE='spade', DIAMOND='diamond', CLUB='club', E='e', F='f'};
/** 卡牌花色对应颜色 */
export let CARD_SUIT_COLOR = {heart:'0', spade:'1', diamond:'0', club:'1', e:'1', f:'0'};
/** 座位 */
export enum SEAT {
BOTTOM, RIGHT, TOP, LEFT
};
不同属性的文件放到不同的文件夹中，属性可分为“核心类(core)”“视图类(view)”“数据类(vo)”等等
view|-game|-PlayerView.ts
| |-ChatView.ts
|
|-lobby|-RoomView.ts
| |-MallView.ts
|
|-scene|-GameScene.ts
|-LobbyScene.ts
core|-Defination.ts
|-EventManager.ts
|-NetworkManager.ts
按代码功能分类排放。
//GameUtils.ts
namespace core.GameUtils{
//== 时间操作 ==//
export function getDateFromString(str:string){){}
export function getRelativeDay(targetDate:Date){}
//每个功能区之间需以两个以上的空行隔开，看起来更加清晰
//== 对象操作 ==//
export const OBJ_NUM = 10;//常量不一定要放在最上方位置，按其功能放置到相应区域即可
export function cloneObject(obj){}
export function getKeyByValue(obj, value){}
}
//LobbyScene.ts
export class LobbyScene implements core.IGuidePlayer{
constructor(){}
protected init(){}
destroy(){}
private _updateView(){}
//下面是实现的core.IGuidePlayer接口中定义的两个方法，需要放在一起，此时不必遵循public方法必须出现在最前位置的限制
playGuide(){}
stopGuide(){}
}
代码封装
使用getter/setter封装
class UserVO{
head:string;
}
function onGetData(data)
{
let u = new UserVO();
u.head = data ? data : '1.jpg';
}
function onGetData2(data)
{
let u = new UserVO();
u.head = data.head ? data.head : '1.jpg';
}
按照上面的代码写法，需要在外部每次设置UserVO实例的head属性时对设置的值进行判断处理，这样会多次出现重复代码且难以管理，此时使用setter进行改写
class UserVO{
private _head:string;
set head(v:string){
this._head = v ? v : '1.jpg';
}
get head():string{
return this._head;
}
}
function onGetData(data)
{
let u = new UserVO();
u.head = data;
}
function onGetData2(data)
{
let u = new UserVO();
u.head = data.head;
}
一般来说，getter的使用大多数情况下只是return一个private的变量值，因为在取变量值前做一些处理的需求不太常见，如果真要做一些处理，大可以用一个以"get"开头的方法来实现。不过我认为某些某些时候使用getter比使用'get'开头的方法更加直观一些
class CardList{
private _data:string[];
setData(v:string){
this._data = v.split(',');
}
getLength():number{
return this._data.length;
}
get length():number{
return this._data.length;
}
//个人觉得，使用cardList.length比cardList.getLength()更加直观一些
}
使用getter有时候还可以确保返回的数据是最新的，防止程序员漏更新某个变量的情况出现
class CardList{
data:string[];
dataLength:number;
}
let cl = new CardList();
cl.data = ['1','2','3','4'];
cl.dataLength = c1.data.length;
cl.data.pop();
console.log(c1.dataLength);//输出为4，但实际上是3
//使用getter替代的方案
class CardList{
data:string[];
private _dataLength:number;
get dataLength():number{
return data.length;
}
//这样每次使用cl.length拿到的都是准确的数据，但是会产生一些执行getter方法内代码的额外开销
}
class封装
我们通常使用class来封装一个种类的代码块，以此来节省代码量，如下：
let rec1 = {x:10, y:10, width:10, height:10};
let rec2 = {x:10, y:10, width:20, height:20};
let rec1Right = rec1.x + rec1.width;
let rec1Bottom = rec1.y + rec1.height;
let rec2Right = rec2.x + rec2.width;
let rec2Bottom = rec2.y + rec2.height;
//封装为Rectangle类
class Rectangle{
x:number;
y:number;
width:number;
height:number;
get right():number{
return this.x + this.width;
}
get bottom():number{
return this.y + this.height;
}
}
let rec1 = new Rectangle();
rec1.x = 10; rec1.y = 10; rec1.width = 10; rec1.height = 10;
let rec1Right = rec1.right;
let rec1Bottom = rec1.bottom;
将代码块封装为class可以让一些业务在class内部进行处理，外部无需关注实现细节，只需要将精力花在业务方面即可，且便于修改和拓展功能。比如说刚才的代码中要把Rectangle类的x属性更名为left，只需要使用VS CODE等IDE的重命名功能直接将x更名为left，IDE便会将项目中所有使用了rect.x的代码改为rect.left，非常快速以及彻底（这个替换过程一般是先找到修改名字的属性位于哪个类里面，然后再去找这个类的所有实例位置，最后将这些实例使用到该属性的代码做相应更名编辑）。
在封装类的时候需要遵循的原则是类要尽可能地精简，尽可能地拆分为不能拆分了为止，下面这个类就还有拆分的空间
class GameScene{
player1Name:Label;
player1Money:Label;
player2Name:Label;
player2Money:Label;
setPlayerInfo(playerIndex, playerInfo)
{
this['player' + playerIndex + 'Name'].text = playerInfo.name;
this['player' + playerIndex + 'Money'].text = playerInfo.money;
}
}
//执行拆分
class GameScene{
player1:PlayerControl;
player2:PlayerControl;
setPlayerInfo(playerIndex, playerInfo)
{
this['player' + playerIndex].data = playerInfo;
}
}
class PlayerControl{
nameLabel:Label;
moneyLabel:Label;
private _data;
set data(v){
this._data = v;
if(v)
{
this.nameLabel.text = v.name;
this.moneyLabel.text = v.money;
}
}
get data(){
return this._data;
}
}
通俗一点讲这个原则叫做“分权制”，能分权的地方就分权，分权后我不再过问，你管好你自己我管好我自己即可，此时，父（如上例中的GameScene）与子（如上例中的PlayerControl）之间应保持相互独立，由父来调控各个子的活动（如上例中GameScene::setPlayerInfo方法中所做的事情），子最好不要对父有任何直接操纵的行为
class PlayerControl{
init(){
this.button.on('click', this, this._onClick);
}
private _onClick(){
this.parent.doSomething();//直接操纵父是不推荐的，强耦合的行为
}
}
子直接操纵父是强耦合的行为，因为子并不确定父有哪些方法，而且就算你现在知道，但是一旦父的方法名变更了也就会出现错误。子与祖辈交互的推荐方式是以下三种：
派发事件
执行回调函数
通过中间人来协调
class PlayerControl extends EventDispatcher{
onBtnClick:Function;
private _onClick(){
this.emit('btnClick');//方法一，派发事件
this.onBtnClick && this.onBtnClick();//方法二，执行回调
core.EventManager.instance().dispatchEvent('btnClick');//方法三，通过中间人协调。此处的中间人是一个可以自派发/侦听的单例
}
}
class GameScene{
player:PlayerControl;
init(){
this.player = new PlayerControl();
this.player.on('btnClick', this, this.doSomething);//方法一，侦听事件
this.player.onBtnClick = this.doSomething.bind(this);//方法二，设置回调
core.EventManager.instance().addEventListener('btnClick', this, this.doSomething);//方法三，通过中间人协调
}
}
相对的，父也不应该管得太多太细，否则就会显得代码冗余且耦合度不够低
class GameScene{
player1:PlayerControl;
player2:PlayerControl;
setPlayerInfo(playerIndex, playerInfo)
{
let player = this['player' + playerIndex];
//管太细了，应该由PlayerControl自己来处理内部各视图的更新操作并提供一个视图更新方法供父调用
player.nameLB.text = playerInfo.name;
player.moneyLB.text = playerInfo.money;
}
}
数据与视图进行分离 如果数据与视图未进行分离，那么每次数据更新的时候你都必须手动更新所有的视图，该过程会极其痛苦
class PlayerControl{
nameLB:Label;
moneyLB:Label;
private _data;
set data(v){
this._data = v;
if(v)
{
this.nameLabel.text = v.name;
this.moneyLabel.text = v.money;
}
}
get data(){
return this._data;
}
}
let playerInfo = {name:'n', age:18};
let player1:PlayerControl = new PlayerControl();
let player2:PlayerControl = new PlayerControl();
player1.data = player2.data = playerInfo;
//发生数据变化
playerInfo.name = 'a';
//必须手动更新所有相关UI
player1.nameLabel.text = playerInfo.name;
player2.nameLabel.text = playerInfo.name;
在手动更新所有相关视图的过程中你很容易会发生更新不全的情况，因为此数据有可能用在了分布在项目中各个地方的多个实例中。
而且还有一个缺点是，在数据的使用处，如上例中的PlayerControl类的data属性里面，你无法得知这个data对象里有哪些字段/属性，这样就有可能出现拼写错误
class PlayerControl{
set data(v){
this._data = v;
if(v)
{
this.nameLabel.text = v.nam;//name拼写错误成了nam
this.moneyLabel.text = v.mony;//money拼写错误成了mony
}
}
}
因为这个data属性类型是any，故IDE无法得知里面有哪些字段/属性，也就无法为你在编写时提供代码提示也不会在你写错后提示错误。这种时候，将data抽象成一个数据类(Value Object Class)就迫在眉睫了。
type PropertyChangeHandler = (newValue:any, oldValue?:any) => void;
type PropertyChangeHandlerData = {handler:PropertyChangeHandler, context:any, justOnce:boolean};
/** 可绑定的VO类。使用其中提供的propertyChange方法可以抛送属性变更事件；使用watchProperty方法可以侦听属性变更 */
export class BindableVO{
/**
* 属性值发生变更时需要调用此方法来触发侦听器
* @param pName 发生变化的属性名称
* @param oldValue 发生变化的属性旧值
* @param newValue 发生变化的属性新值
*/
propertyChange(pName:string, oldValue, newValue){
//实现细节略
}
/**
* 添加属性值变更侦听器
* @param pName 需要侦听的属性名称
* @param handler 侦听器
* @param context 侦听器里面的this指向
* @param justOnce 该侦听器是否只会执行一次
*/
watchProperty(pName:string, handler:PropertyChangeHandler, context?:any, justOnce:boolean=false){
//实现细节略
}
/**
* 移除属性值变更侦听器
* @param pName 需要侦听的属性名称
* @param handler 侦听器，为空则移除全部侦听器
* @param context 侦听器里面的this指向
*/
unwatchProperty(pName:string, handler:PropertyChangeHandler, context?){
//实现细节略
}
}
class PlayerVO extends BindableVO{
private _name:string;
set name(v:string){
if(v != this._name)
{
let old = this._name;
this._name = v;
//属性发生变化时会调用一些属性变化侦听函数
this.propertyChange('name', old, v);
}
}
get name():string{
return this._name;
}
}
class PlayerControl{
private _data:PlayerVO;//规定data的类型，这样就会有代码提示及错误检查
set data(v:PlayerVO){
if(this._data != v)
{
//去掉旧的数据变化侦听器
if(this._data)
{
this._data.unwatchProperty('name', this, this._updateView);
}
this._data = v;
//加上新的数据变化侦听器
if(v)
{
this._data.watchProperty('name', this, this._updateView);
}
//立即更新界面一次
this._updateView();
}
}
private _updateView(){
this.nameLabel.text = this._data ? this._data.name : '';
}
}
上面的代码中，通过继承BindableVO，PlayerVO具备了数据绑定的能力，之后，在将一个PlayerVO实例设置到PlayerControl的data属性后，PlayerControl对其进行了数据和视图的绑定工作，一旦数据发生了变化，视图会自动进行更新，也就是说，一旦一个PlayerVO实例的name属性发生了变化，所有使用了它的PlayerControl都会自动更新视图，这样一来，我们就可以把精力集中在核心业务的处理上而不需要操心其他杂碎的视图更新工作了。
class GameScene{
player1:PlayerControl;
player2:PlayerControl;
commonPlayer:PlayerVO;
init(){
this.commonPlayer = new PlayerVO();
this.player1.data = this.player2.data = this.commonPlayer;
this.commonPlayer.name = 'n';//此时this.player1和this.player2中的视图均会自动更新
}
}
通过继承来减少重复代码 如果几个类之间大部分相同，只有少许功能不同则可以考虑使用继承来有效节约代码量，如上面提到过的BindableVO和PlayerVO之间就用了继承的概念，使PlayerVO节约了数据绑定那一部分功能的代码。接下来再给出一个将一个复杂的类使用继承概念分拆成多个类的例子
enum GAME_TYPE{NORMAL, MATCH}
class GameScene{
type:GAME_TYPE;
isGameStart:boolean;
private _normalBtn:Button;
private _matchBtn:Button;
init(){
if(this.type == GAME_TYPE.NORMAL)
{
this._normalBtn = new Button();
this.addChild(this._normalBtn);
this._normalBtn.on('click', this, this.startGame);
}
else if(this.type == GAME_TYPE.MATCH)
{
this._matchBtn = new Button();
this.addChild(this._matchBtn);
this._matchBtn.on('click', this, this.startGame);
}
}
startGame(){
this.isGameStart = true;
if(this.type == GAME_TYPE.NORMAL)
{
console.log('NORMAL GAME');
}
else if(this.type == GAME_TYPE.MATCH)
{
console.log('MATCH GAME');
}
}
}
//==========拆分==========//
//将各种游戏类别都具有的共同代码放在此类中
class GameScene{
isGameStart:boolean;
init(){}
startGame(){
this.isGameStart = true;
}
}
class GameSceneNormal extends GameScene{
init(){
this._normalBtn = new Button();
this.addChild(this._normalBtn);
this._normalBtn.on('click', this, this.startGame);
}
startGame(){
super.startGame();//执行该方法在父类中的代码
//接下来实现差异化代码
console.log('NORMAL GAME');
}
}
class GameSceneMatch extends GameScene{
init(){
this._matchBtn = new Button();
this.addChild(this._matchBtn);
this._matchBtn.on('click', this, this.startGame);
}
startGame(){
super.startGame();//执行该方法在父类中的代码
//接下来实现差异化代码
console.log('MATCH GAME');
}
}
//根据游戏类别来实例化不同的GameScene类型
let type = GAME_TYPE.NORMAL;
let gameScene:GameScene = type === GAME_TYPE.NORMAL ? new GameSceneNormal() : new GameSceneMatch();
可以观察到，分拆后的代码看起来更加清晰，精简也容易维护
注释
注释不是越多越好，毕竟你不是在写一个API文档。尽可能地让变量/方法名一看就知道其含义
function parseData(){}//难懂
function transformObjectToDate(){}//易懂
let flag;//难懂
let hasFoundResult;//易懂
只有在变量/方法名无法清楚地描述功能时再考虑使用注释来说明清楚，比如一些方法的参数描述很重要
/**
* 遍历一个数组
* @param ary 遍历对象
* @param loopFuc 遍历回调函数。接受两个参数表示当前遍历对象及对象所在索引号，此回调函数若是返回一个非falsy的值则会中断遍历并使aryForEach方法返回此值
* @param reverse 是否逆序遍历
*/
function aryForEach(ary:any[], loopFuc:(elem:any, index:number) => any, reverse=false):any{}
在变量/方法的声明语句前面使用JSDoc的注释语法(/* 注释内容 */)来做注释可以使我们在鼠标移到变量/方法的名字上时能弹出注释文字，效果优于传统注释（//注释内容），使用它可以使我们不需要去到变量/方法的声明位置就能查看该变量/方法的含义及使用方法，节约了时间。
使用注释来做一些代码功能块之间的分割线效果也不错
//================================================运行设备检查================================================//
/** 是否运行在微信浏览器内 */
export function isWeiXin():boolean{}
//========================================= 数组操作 =========================================//
/** 检查一个元素是否在数组中，若在则将其从数组中移除，否则添加进数组 */
export function toggleArrayElem(elem, ary:any[]){}
或者你还可以利用注释来在代码中做一些标记/锚点，方便搜索
//file1.ts
function doSth(){
console.log('调试内容');//DEL 版本发布后需要删除
}
//file2.ts
function doSth2(){
console.log('调试内容');//DEL 版本发布后需要删除
}
这样，在版本发布后，只需要全局搜索“DEL”这个关键字即可找到所有需要删除的地方。需要注意的是，在Eclipse等IDE中，使用特殊的"//TODO"标记的注释可以被IDE理解成为“待办任务”并集中列出在“任务视图”窗口中，连搜索这步都直接省略了。
不写让人费解的代码
现在很多人为了所谓的“执行速度快”和“装逼”爱写一些让人难以理解的代码
//=============难以理解的代码=============//
//判断是否等于-1
let ary = ['1','2'];
//~为取反位运算符，~-1 == 0
if(~ary.indexOf('3'))console.log('have 3');
//取整
let num = 1.2345;
let intNum = num >> 0;//右移0位可去掉小数部分
//类型转换为Boolean
let str = 'false';
let boolResult = !!str;
//=============容易理解的代码=============//
if(ary.indexOf('3') != -1)console.log('have 3');
intNum = Math.floor(num);
boolResult = Boolean(str);
在写复杂算法时，不要吝啬声明变量和方法，为了让代码看起来更易读，可以多命名一些变量和方法来代替注释，使代码整齐易懂
//难懂的写法
function isMatch(obj):boolean{
for(let i of nameAry)
{
if(i.name == obj.name)return true;
}
for(let i of ageAry)
{
if(i.age == obj.age)return true;
}
for(let i of moneyAry)
{
if(i.money == obj.money)return true;
}
return false;
}
//易懂的写法
function isMatch(obj):boolean{
function isNameMatch(){
for(let i of nameAry)
{
if(i.name == obj.name)return true;
}
return false;
}
function isAgeMatch(){
for(let i of ageAry)
{
if(i.age == obj.age)return true;
}
return false;
}
function isMoneyMatch(){
for(let i of moneyAry)
{
if(i.money == obj.money)return true;
}
return false;
}
return isNameMatch() || isAgeMatch() || isMoneyMatch();
}
大多数的情况下，程序员都不愿意看带有循环（while, for...in）的代码，因为嵌套较多也比较难理解
let v = {value:1, key:'age'};
let target;
for(let i of ary1)
{
for(let j of i.list)
{
for(let k of j.list)
{
//一旦循环体内代码复杂就会造成理解成本成倍上升
if(v.value == k.value && v.key == k.key)target = k;
}
}
}
因此，建议将循环封装成函数，理解成本就低，而且还可以使用“return”语句提前结束代码执行
let target = searchTarget(v);
function searchTarget(keywords:{value:number, key:string}){
for(let i of ary1)
{
for(let j of i.list)
{
for(let k of j.list)
{
//使用return提前结束代码运行，可以有效节约垃圾时间
if(v.value == k.value && v.key == k.key)return k;
}
}
}
}
利用Array的find（寻找第一个匹配元素），map（将数组中各元素进行某种转换），filter（过滤掉一些元素）等方法来替代元素遍历，使我们在节约代码的同时让人更加易于理解
判断条件时的代码节约
使用大量的if语句来进行判断不仅代码量大，让人看着也不舒服，当判断条件大于3个时使用switch语句更加清晰，有些时候还可以使用字典查询或数组搜索方式来进行判断
let availableOptionsAry = [1,2,3,4,5,6,7,8,9];
let availableOptionsDic = {1:true, 2:true, 3:true, 4:true, 5:true, 6:true, 7:true, 8:true, 9:true};
function isOptionAvailable(o){
return o == 1 || o == 2 ||... //不推荐的写法，效果等同于多个if判断
return availableOptionsAry.indexOf(o) != -1;//数组搜索法
return availableOptionsDic[o] != undefined;//字典查询法
}
//一般来说，字典查询法不会用在简单地搜索true or false上面，而是会将大部分条件成立后的代码放在字典的value中
let sceneList = {'lobby':view.scene.LobbyScene, 'game':view.scene.GameScene};
function gotoScene(sceneName:string){
let scene;
//不推荐的写法
if(sceneName == 'lobby')scene = new view.scene.LobbyScene();
else if(sceneName == 'game')scene = new view.scene.GameScene();
//字典查询法
let theConstructor = sceneList[sceneName];
if(theConstructor)scene = new theConstructor();
//如果将sceneList中的value改成一些函数的引用，就可以在查找到sceneName对应的key时执行不同的函数
}
重复代码整合
如果你的代码中出现了大量的重复代码，试着将其做一些整理，能缩写的缩写，能剥离成函数的剥离成函数
//整理前
let lvAry = [{lv:1, name:'白银会员'}, {lv:2, name:'黄金会员'}];
let playerList = [{id:1, lv:1}, {id:2, lv:2}];
function updateLv(id:string){
let player;
let lvName;
for(let i of playerList)
{
if(i.id === id){
player = i;
break;
}
}
if(player)
{
for(let i of lvAry)
{
if(i.lv === player.lv){
lvName = i.name;
break;
}
}
}
if(lvName){
view.popup.Alert.show('您的等级是：' + lvName, view.popup.Alert.Alert_OK);
}
else{
view.popup.Alert.show('找不到等级', view.popup.Alert.Alert_OK);
}
}
//整理后
function updateLv(id:string){
let Alert = view.popup.Alert;
let player = getPlayerByID(id);
if(player)
{
let lvName = getLvNameByLv(player.lv);
let alertMsg = lvName ? '您的等级是：' + lvName : '找不到等级';
Alert.show(alertMsg, Alert.Alert_OK);
}
}
function getPlayerByID(id:string){
for(let i of playerList)
{
if(i.id === id){
return i;
}
}
}
function getLvNameByLv(lv:string){
for(let i of lvAry)
{
if(i.lv === lv){
return i;
}
}
}
总结
一切优化的最终目的都是为了提高编码的效率，编码的效率表现在以下几个方面：
看代码时的理解成本
为了实现功能，在修改/增加代码时花的时间
代码稳定性，BUG出现频率 因此，一切能提高上诉几个点的代码优化方法都是有效的方法
以上是关于怎样写出简洁的TypeScript项目的主要内容，如果未能解决你的问题，请参考以下文章