JS/TS笔记学习1

周末总得学点什么吧~
奥利给!

  • 跑火车 递归 减速
javascript 复制代码
let currentIndex = 0;  
let speed = 500; // 初始速度,单位是毫秒  
let decrement = 20; // 每次迭代速度减少的量  
  
const cells = document.querySelectorAll('.cell');  
  
function highlightCell() {  
  cells.forEach((cell, index) => {  
    cell.classList.remove('highlight');  
    if (index === currentIndex) {  
      cell.classList.add('highlight');  
    }  
  });  
  
  if (speed > 50) { // 当速度降低到一定程度时停止  
    speed -= decrement;  
    setTimeout(highlightCell, speed);  
    currentIndex = (currentIndex + 1) % cells.length; // 移动到下一个格子  
  }  
}  
  
highlightCell(); // 开始跑火车
  • 队列
javascript 复制代码
/**
     * 将弹窗加入弹出窗队列
     * @param {string} panelPath 
     * @param {string} scriptName 
     * @param {*} param 
     */
    public pushToPopupSeq(panelPath: string, scriptName: string, param: any) {
        let popupDialog = {
            panelPath: panelPath,
            scriptName: scriptName,
            param: param,
            isShow: false
        };

        this._arrPopupDialog.push(popupDialog);

        this._checkPopupSeq();
    }
    /**
     * 检查当前是否需要弹窗
     */
    private _checkPopupSeq() {
        if (this._arrPopupDialog.length > 0) {
            let first = this._arrPopupDialog[0];

            if (!first.isShow) {
                this.showDialog(first.panelPath, first.param);
                this._arrPopupDialog[0].isShow = true;
            }
        }
    }
    /**
     * 将弹窗从弹出窗队列中移除
     * @param {string} panelPath 
     */
    public shiftFromPopupSeq(panelPath: string) {
        this.hideDialog(panelPath, () => {
            if (this._arrPopupDialog[0] && this._arrPopupDialog[0].panelPath === panelPath) {
                this._arrPopupDialog.shift();
                this._checkPopupSeq();
            }
        })
    }
  • ts给readonly属性赋值
    除了在声明它的类或构造函数内部被赋值,有些情况下(静态只读)可能需要赋值
javascript 复制代码
class TweenSystem {  
    static readonly instance; // 声明静态只读属性  如何赋值呢??? 请看下面  
    // ... 其他代码保持不变 ...  
    public getNum(){
        console.log(123);
    }
}
//这种情况如何赋值只读属性呢,看下面
javascript 复制代码
// 在类外部初始化 instance  
(TweenSystem.instance as any) = new TweenSystem();  
// 现在可以正确访问了  
const actionMgr = TweenSystem.instance;
actionMgr.getNum();   //123

那么为什么as any后就可以赋值(TweenSystem.instance as any);

TweenSystem.instance as any 的情况下,通过类型断言将 TweenSystem.instance 的类型临时转换为 any,从而能够给它赋值。尽管这样做在技术上是可行的,但它破坏了 TypeScript 的类型安全原则,并可能导致运行时错误或难以追踪的 bug。
通常,不建议使用类型断言来修改 readonly 属性,除非有非常明确的原因,并且完全理解可能带来的后果。如果需要在类的外部初始化 readonly 属性,更好的做法是在类的内部进行初始化

  • 单例模式
    懒汉式 ,是延迟加载 的方式,只有使用的时候才会加载
javascript 复制代码
class Singleton {  
    // 使用一个私有的静态实例变量来存储类的唯一实例  
    private static instance: Singleton | null = null;  
    // 构造函数是私有的,这样外部就无法使用 new Singleton() 来创建新的实例  
    private constructor() {  
        // 初始化代码(如果有的话)  
    }  
    // 提供一个静态方法来获取类的唯一实例  
    // 如果实例不存在,则创建它  
    public static get getInstance(): Singleton {  
        if (Singleton.instance === null) {  
            Singleton.instance = new Singleton();  
        }  
        return Singleton.instance;  
    }  
    // 类的其他方法或属性  
    public someMethod() {  
        console.log("这是 Singleton 类的一个方法");  
    }  
}  
// 使用示例  
const singletonInstance = Singleton.getInstance;  
singletonInstance.someMethod(); // 调用 Singleton 类的方法   //out: 这是 Singleton 类的一个方法

而有些情况下也可以直接这样
饿汉式立即加载的方式

javascript 复制代码
class Singleton1 {  
    static readonly instance = new Singleton1();  
    // 构造函数是私有的,这样外部就无法使用 new Singleton1() 来创建新的实例  
    private constructor() {  
        // 初始化代码(如果有的话)  
        console.log("在编译完就直接创建了,不管你有没有调用")
    }
    // 类的其他方法或属性  
    someMethod() {  
        console.log("这是 Singleton1 类的一个方法");  
    }  
}  
  
// 使用示例  
const Singleton1Instance = Singleton1.instance;  
Singleton1Instance.someMethod(); // 调用 Singleton1 类的方法


饿汉式和懒汉式的使用场景,看业务需求,如果业务上允许有比较充分的启动和初始化时间,就使用饿汉式,否则就使用懒汉式;

相关推荐
程序员Xu3 分钟前
【LeetCode热题100道笔记】二叉树的直径
笔记·算法·leetcode
ShineWinsu13 分钟前
对于单链表相关经典算法题:206. 反转链表及876. 链表的中间结点的解析
java·c语言·数据结构·学习·算法·链表·力扣
ST.J20 分钟前
系统架构思考20241204
java·笔记·系统架构
FPGAI22 分钟前
Qt的入门
笔记·qt·学习
再睡一夏就好25 分钟前
【C++闯关笔记】STL:list 的学习和使用
c语言·数据结构·c++·笔记·算法·学习笔记
要做朋鱼燕27 分钟前
【C++】 list 容器模拟实现解析
开发语言·c++·笔记·职场和发展·list
脑洞代码37 分钟前
20250905的学习笔记
笔记·学习
wan5555cn1 小时前
文字生视频的“精准”代码设定的核心原则本质是最小化文本语义与视频内容的KL散度
人工智能·笔记·深度学习·音视频
easy20201 小时前
从 Excel 趋势线到机器学习:拆解 AI 背后的核心框架
人工智能·笔记·机器学习
浊浪载清辉2 小时前
《Html泛型魔法学院:用霍格沃茨风格网页教授集合框架》
前端·javascript·学习·html