Javascript 我如何制作一个js函数，它可以与requirejs一起使用，也可以不与requirejs一起使用

我创建了一个js库（MessageBus.js），并使其与requirejs兼容。现在，我想在不使用requirejs的情况下使用相同的库，即通过创建对象（newmessagebus（））

我把我的lib附在这篇文章上

define([], function () {

var MessageBus = function () {
    this.channelCallBackMap = {};
    this.alreadyRegistred = false;
}

MessageBus.prototype = {
    publish: function (channel, message) {
        //Put original message and channel in the envelope and send it
        var envelope = {
            channel: channel,
            message: message
        };
        var domain = location.protocol + '//' + location.host;
        //Send message to all sibling iframes in the parent document
        $("iframe", parent.document.body).each(function (i, frame) {
            frame.contentWindow.postMessage(JSON.stringify(envelope), domain);
        });


    },

    subscribe: function (channels, callbacks) {
        var self = this;
        if ($.isArray(channels) && $.isArray(callbacks)) {
            $.each(channels, function (i, channel) {
                self.channelCallBackMap[channel] = callbacks[i];
            });
        }
        else if ($.isArray(channels)) {
            $.each(channels, function (i, channel) {
                self.channelCallBackMap[channel] = callbacks;
            });
        } else if (!$.isArray(callbacks)) {
            this.channelCallBackMap[channels] = callbacks;
        }

        if (!this.alreadyRegistred) {
            $(window).on('message', function (event) {
                //Get the envelope, and from it get the original message as well as the channel
                var domain = location.protocol + '//' + location.host;
                if (event.originalEvent.origin !== domain) {
                    return;
                }
                var envelope = $.parseJSON(event.originalEvent.data);
                if ($.inArray(envelope.channel, self.channels()) > -1) {
                    //Now it calls call-back function
                    self.channelCallBackMap[envelope.channel](envelope.channel, envelope.message);
                }
            });
        }
        this.alreadyRegistred = true;
    },

    channels: function () {
        var keys = $.map(this.channelCallBackMap, function (value, key) {
            return key;
        });
        return keys;
    }
}

return MessageBus;

});

---

不知道为什么你写这个AMD模块时，你不想作为一个使用

这根本不是一个好主意，但您可以让自己在

MessageBus.js

之前添加自己的方法，该方法将在全局上下文中设置

MessageBus

：

function define(dep, func)(
  window.MessageBus = func()
)

更好的方法是有两个不同的版本。您可以使用普通的JS版本，并使用该任务构建另一个带有grunt任务的JS版本

amdContainer.js

define([], function () {
  %MessageBus%
  return MessageBus;
});

var MessageBus = function () {
    this.channelCallBackMap = {};
    this.alreadyRegistred = false;
}

MessageBus.prototype = {
    publish: function (channel, message) {
        //Put original message and channel in the envelope and send it
        var envelope = {
            channel: channel,
            message: message
        };
        var domain = location.protocol + '//' + location.host;
        //Send message to all sibling iframes in the parent document
        $("iframe", parent.document.body).each(function (i, frame) {
            frame.contentWindow.postMessage(JSON.stringify(envelope), domain);
        });


    },

    subscribe: function (channels, callbacks) {
        var self = this;
        if ($.isArray(channels) && $.isArray(callbacks)) {
            $.each(channels, function (i, channel) {
                self.channelCallBackMap[channel] = callbacks[i];
            });
        }
        else if ($.isArray(channels)) {
            $.each(channels, function (i, channel) {
                self.channelCallBackMap[channel] = callbacks;
            });
        } else if (!$.isArray(callbacks)) {
            this.channelCallBackMap[channels] = callbacks;
        }

        if (!this.alreadyRegistred) {
            $(window).on('message', function (event) {
                //Get the envelope, and from it get the original message as well as the channel
                var domain = location.protocol + '//' + location.host;
                if (event.originalEvent.origin !== domain) {
                    return;
                }
                var envelope = $.parseJSON(event.originalEvent.data);
                if ($.inArray(envelope.channel, self.channels()) > -1) {
                    //Now it calls call-back function
                    self.channelCallBackMap[envelope.channel](envelope.channel, envelope.message);
                }
            });
        }
        this.alreadyRegistred = true;
    },

    channels: function () {
        var keys = $.map(this.channelCallBackMap, function (value, key) {
            return key;
        });
        return keys;
    }
}

MessageBus.js

define([], function () {
  %MessageBus%
  return MessageBus;
});

var MessageBus = function () {
    this.channelCallBackMap = {};
    this.alreadyRegistred = false;
}

MessageBus.prototype = {
    publish: function (channel, message) {
        //Put original message and channel in the envelope and send it
        var envelope = {
            channel: channel,
            message: message
        };
        var domain = location.protocol + '//' + location.host;
        //Send message to all sibling iframes in the parent document
        $("iframe", parent.document.body).each(function (i, frame) {
            frame.contentWindow.postMessage(JSON.stringify(envelope), domain);
        });


    },

    subscribe: function (channels, callbacks) {
        var self = this;
        if ($.isArray(channels) && $.isArray(callbacks)) {
            $.each(channels, function (i, channel) {
                self.channelCallBackMap[channel] = callbacks[i];
            });
        }
        else if ($.isArray(channels)) {
            $.each(channels, function (i, channel) {
                self.channelCallBackMap[channel] = callbacks;
            });
        } else if (!$.isArray(callbacks)) {
            this.channelCallBackMap[channels] = callbacks;
        }

        if (!this.alreadyRegistred) {
            $(window).on('message', function (event) {
                //Get the envelope, and from it get the original message as well as the channel
                var domain = location.protocol + '//' + location.host;
                if (event.originalEvent.origin !== domain) {
                    return;
                }
                var envelope = $.parseJSON(event.originalEvent.data);
                if ($.inArray(envelope.channel, self.channels()) > -1) {
                    //Now it calls call-back function
                    self.channelCallBackMap[envelope.channel](envelope.channel, envelope.message);
                }
            });
        }
        this.alreadyRegistred = true;
    },

    channels: function () {
        var keys = $.map(this.channelCallBackMap, function (value, key) {
            return key;
        });
        return keys;
    }
}

---

试着这样做：

!function (name, definition) {
    if (typeof define == 'function' && define.amd) {
        define(definition);
    } else if (typeof module != 'undefined') {
        module.exports = definition();
    } else {
        this[name] = definition();
    }
}('MessageBus', function() {

    var MessageBus = function () {
        this.channelCallBackMap = {};
        this.alreadyRegistred = false;
    };

    // Rest of the object

    return MessageBus;
});

---

这是一种常见的语法，因为它也支持CommonJS。请参阅此库中的一个示例-

此库被许多人使用，有时有requirejs，有时没有。然后只构建两个版本，一个普通版本和一个包装在AMD中的版本。将更新我的答案实际上，使用两个版本，还有另一种方式，一个版本可以工作，但我不知道如何使用它。我有一个这样的例子！（函数（工厂）{//CommonJS if（typeof require==”函数“&&typeof exports==”对象“&&typeof module==”对象）{factory（require（“Knockout”），exports）//AMD}否则if（typeof define==”函数“&&define.AMD）{define（[“Knockout”，“exports”]，工厂）；//普通脚本标记}else{factory（ko，ko.postbox={}）；}}创建两个版本的库是不必要的。添加一个小包装器是很简单的。答案是用一个例子添加的。Hi smith你能告诉我！函数的意义吗？这是自调用函数的较短语法-