Question

我正在使用HTML / CSS / JavaScript重写一个简单的应用程序，使用间隔创建带有图像的动画，并且有一组控制这些动画的按钮。

它的缩放和变得非常混乱，逻辑与jQuery混合使用jQuery通过一个javascript脚本文件进行操作。

所以我决定使用模块设计模式。

根据我对应用程序的描述，这个模块的回调实现有问题吗？

或者使用模块实现？

在这个例子中，声明私有变量并通过公共api访问它们的最佳方法是什么？吸毒者和二传手？他们真的有必要吗？我想编写可读的代码，但我不想过度设计。

(function($) {

  $.Module = function(options){
    var module = {
      options: $.extend({
        callbacks: {
          start: false
        }
      }, options),
      start: function(callback){
        //console.log('private start method');
        if(typeof callback === "function") {
            callback();
        }
      }
    }

    // public api
    return {
      start: function(){
        //console.log('public start method');
        module.start(module.options.callbacks.start);
      }
    }
  }

}($));

var myModule = $.Module({
  callbacks: {
    start: function(){
      console.log('start callback!');
    }
  }
})

myModule.start();

Here是一个样本。

仅仅因为它似乎对我有用，而且我已经看到其他实现有一些看起来像这样的代码：

callback: function(method) {
    if(typeof method === "function") {
        var args = [];

        for(var x = 1; x <= arguments.length; x++) {
            if(arguments[x]) {
                args.push(arguments[x]);
            }
        }

        method.apply(this, args);
    }
},

我不确定最后一段代码应该做什么。是否打算将数据返回到我在实例化模块时注册的回调函数？如果是这样，它是如何工作的？

Answer 1

模块的这个回调实现有问题吗？

如果这就是你想要的。

或者使用模块实现？

options属性的实例化应该使用deep extend，当前的属性会覆盖整个callbacks对象。

我不确定我发现的其他代码是应该做的。是否打算将数据返回到回调函数

是。它使用arguments object

支持多个参数

...我在实例化模块时注册了吗？

不，它与注册无关。它会将method作为参数传递给此callback函数。

使用此代码将使您无需每次都进行typeof检查。你只需要写

helper.callback(this.options.callbacks.start, /* optional arguments */)
// instead of
if (typeof this.options.callbacks.start == "function")
    this.options.callbacks.start(/* arguments */)

但是，在你认为需要这个助手之前，你不需要这个助手。

模块模式回调实现

1 个答案: