class中的方法模块化的语法规则?

class中的方法模块化的语法规则?

class Slider的私有方法,模块化后在“keyboard.js”中定义了const keyboard = {...},这里“keyboard”是什么?是对象吗?那么里面的“bindEvent(slider) {...}”是对象的方法吗?class Slider的定义中,“Keyboard.bindEvent(this)"是引用了这个对象的方法吗?是这样理解吗?

整体上,我没太明白class 方法模块化的语法规则,请老师详细解释一下。此外,直接定义一个函数,然后在class定义中引用不行吗?

//keyboard.js


import { LEFT_KEYCODE, RIGHT_KEYCODE } from './constants.js';

const keyboard = {

  bindEvent(slider) {

    document.addEventListener(

      'keyup',

      ev => {

        if (ev.keyCode === LEFT_KEYCODE) {

          slider.prev();

        } else if (ev.keyCode === RIGHT_KEYCODE) {

          slider.next();

        }

      },

      false

    );

  }

};

export default keyboard;


​//slider.js

import Keyboard from './keyboard.js';

class Slider extends BaseSlider {

  constructor(el, options) {

    super(el, options);

    this._bindEvent();

  }

  _bindEvent() {

    Keyboard.bindEvent(this);


  }

}

export default Slider;


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,课程里给的方式不是固定的写法,可以修改为同学说的‘在单独的文件中只定义一个函数,然后其他文件中引入函数’。例如:

1.js中

http://img1.sycdn.imooc.com//climg/5fbc66a609d153b104340092.jpg

html中

http://img1.sycdn.imooc.com//climg/5fbc66b5092ee42b04430123.jpg

测试结果

http://img1.sycdn.imooc.com//climg/5fbc66c30902df4b01700045.jpg

祝学习愉快!

好帮手慕星星 2020-11-23 10:44:35

同学你好,问题解答如下:

1、keyboard是对象,里面的bindEvent是方法。slider文件中引入keyboard文件后,可以通过对象调用bindEvent方法。理解的没有问题。

2、模块化的语法规则简单来说就是导入导出。一个方法或者一个功能放在一个单独文件中导出,使用的时候导入即可。也可以理解为把一个js文件拆分为多个js文件,页面中需要哪部分功能,引入哪个js文件即可。

直接定义一个函数,然后在class定义中引用是可以的,但是为了模块化,为了能够重复使用,所以单独的放在一个文件中了。

祝学习愉快!

  • 提问者 慕妹8003063 #1
    我疑惑的是,class的方法模块化,必须在那个单独的文件中,定义对象,然后把需要的方法定义为对象的方法,而定义class的文件引入这个文件,并且调用这个对象的方法吗?在那个单独的文件中只定义一个函数,然后,在class定义中引用那个函数不可以吗?我想知道课程里给的方式是唯一固定的模块化class方法的方式吗?
    2020-11-23 21:56:07
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师