收藏
回答

小白提问,小程序中如何使用js类

/*
    author: leeenx
    @ timer 对象
    @ 提供 7 个API如下:
    @ timer.setTimeout(fun, delay[, id])
    @ timer.clearTimeout(id)
    @ timer.setInterval(fun, delay[, id])
    @ timer.clearInterval(id)
    @ timer.delete(id) 删除对应id的timeout/interval
    @ timer.pause(id) 暂停对应id的timeout/interval
    @ timer.resume(id) 恢复对应id的timeout/interval
    @ timer.clean() 清空所有 timeout & interval
*/
 
class Timer {
    // 构造函数
    constructor() {
        // 暂停状态 - 这是个公共状态,由外部 Ticker 决定。
        this.paused = true;
 
        // 队列
        this.queue = new Map();
 
        // 正在使用 timer 的 RAF
        this.usingRAF = false;
 
        // useRAF 触发器
        Reflect.defineProperty(this, "useRAF", {
            set: function(value) {
                Reflect.set(this, "usingRAF", value);
                value ? Timer.RAF.enable() : Timer.RAF.disable();
            }
        });
    }
 
    // setTimeout 的实现
    setTimeout(fn, delay, id = Symbol("timeoutID")) {
        // 存入队列
        this.queue.set(id, {
            fn: fn,
            type: 0,
            paused: 0,
            elapsed: 0,
            delay: delay
        });
        return id;
    }
 
    // clearTimeout
    clearTimeout(id) {
        return this.delete(id);
    }
 
    // setInterval 的实现
    setInterval(fn, delay, id = Symbol("intervalID")) {
        // 存入队列
        this.queue.set(id, {
            fn: fn,
            type: 1,
            paused: 0,
            elapsed: 0,
            delay: delay
        });
        return id;
    }
 
    // clearInterval
    clearInterval(id) {
        return this.delete(id);
    }
 
    // 修改指定id的 delay/fn
    set(id, config = {}) {
        let item = this.queue.get(id) || {};
        for(let key in config) {
            item[key] = config[key];
        }
    return true;
    }
 
    // 删除 queue 上的成员
    delete(id) {
        return this.queue.delete(id);
    }
 
    // 暂停指定id
    pause(id) {
        id === undefined ? this.pauseAll() : (this.queue.get(id).paused = 1);
    return true;
    }
 
    // 恢复指定id
    resume(id) {
        return this.play(id);
    }
     
    // 播放指定id
    play(id) {
        id === undefined ? this.playAll() : (this.queue.get(id).paused = 0);
    return true;
    }
 
    // 清空timer
    clean() {
        this.queue = new Map();
    return true;
    }
 
    // 暂停全部 id
    pauseAll() {
        this.queue.forEach((item) => item.paused = 1);
    return true;
    }
 
    // 播放全部 id
    playAll() {
        this.queue.forEach((item) => item.paused = 0);
    return true;
    }
 
    // 重置 elapsed 为 0
    reset = function(id) {
        id === undefined ? this.resetAll() : (this.queue.get(id).elapsed = 0);
    }
 
    // 重置所有的 elapsed 为 0
    resetAll = function() {
        this.queue.forEach(function(item) {item.elapsed = 0});
    }
 
    // tick
    tick(delta) {
        this.paused || this.updateQueue(delta);
    }
 
    // 更新 map 队列
    updateQueue(delta) {
        this.queue.forEach((item, id) => {
            if(item.paused === 1) return;
            item.elapsed += delta;
            if(item.elapsed >= item.delay) {
                item.fn();
                item.type === 0 ? this.delete(id) : (item.elapsed = 0);
            }
        });
    }
 
    // 状态更新
    update() {
        // 第一次调用 update 时主动停用原生接口
        this.useRAF = false;
 
        // 下面是真正的 update
        this.update = (delta) => {
            if(this.usingRAF) return;
            this.tick(delta);
        }
    }
 
}
 
class AnimationFrame {
    constructor() {
        this.time = 0;
        this.auto = this.auto.bind(this);
    }
    auto(elapsed) {
        timer.tick(elapsed - this.time);
        this.time = elapsed;
        this.id = requestAnimationFrame(this.auto);
    }
    enable() {
        timer.paused = false;
        this.id = requestAnimationFrame(this.auto);
    }
    disable() {
        cancelAnimationFrame(this.id);
    }
}
 
// 原生RAF
Timer.RAF = new AnimationFrame();
 
// 对外接口
let timer = new Timer();
 
// 默认使用原生 RAF
timer.useRAF = true;
// 导出timer
export default timer;

上面的代码,想放到小程序中使用,应该怎么做?

回答关注问题邀请回答
收藏

8 个回答

  • 卢霄霄
    卢霄霄
    2018-05-11

    其中用了个requestAnimationFrame,这个是windows上的方法,小程序没有bom 所以报错了

    2018-05-11
    有用
    回复
  • 🇨🇳
    🇨🇳
    2018-05-11

    开发工具上测试功能是没问题的。但手机上导致整个小程序都出错,只能暂时放弃了。

    2018-05-11
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-05-11

    额。。这你要去问你这个js作者去。。我觉得它这个办不到你的要求

    2018-05-11
    有用
    回复
  • 🇨🇳
    🇨🇳
    2018-05-11

    刚才一瞬间突然开窍了!

    那个js文件应该暴露timer。

    module.exports = timer;

    timer不是Calss,调用的时候不用

    let timea= new tim()

    直接拿来用就行了。

    wechatide://minicode/CrqP7km96sZ9

    2018-05-11
    有用
    回复
  • 🇨🇳
    🇨🇳
    2018-05-11

    简单的引用,但我要用这个真心没弄明白怎么用!

    setTimeout使用clearTimeout后就无效了,再调用就是从头开始。我希望setTimeout可以随意暂停、继续,就在网上搜了这么一段代码,但不知道怎么在小程序中使用。


    wechatide://minicode/Khp9Zkms6LZE

    2018-05-11
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-05-11

    好,我慢慢跟你讲,目录结构什么样子,根据你自己的项目放哈,我只是举例说明。

    你的这团代码,最后一行改为 module.exports = Timer,然后保存到 timer.js里。将timer.js放到你的当前页面路径下。像我那样用 require的方式引入,然后就可以 new Timer()来调用了。你是要用这个js来做定时管理啊?

    2018-05-11
    有用
    回复
  • 🇨🇳
    🇨🇳
    2018-05-11

    不会啊~~~o(>_<)o ~~

    2018-05-11
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-05-11

    test.js

    class user {
      constructor(name) {
        this.name = name
      }
      showName(){
        console.log(this.name)
      }
    }
    module.exports = user


    页面js(我是放在Page外面的)

    let user = require('./test.js')
    let my = new user("卢霄霄")
    my.showName()


    2018-05-11
    有用
    回复
登录 后发表内容