我怎样才能做一个js函数，可以使用和不使用requirejs

Question

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

我附上我的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; 

}); 

Answer 1

室内用建立一个咕噜任务的另一个

尝试这样：

!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。在这个库中看到一个例子 - https://github.com/ded/klass/blob/master/klass.js

Answer 2

不确定为什么你把它写成AMD模块，当你不想使用它作为一个。

这根本不是一个好主意，但你可以有你添加自己的方法之前MessageBus.js会，将设置MessageBus在全球范围内：

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

一种更好的方式将有两个不同的版本。你可以有正常的JS版本，并使用grunt-combine任务

combine: { 
    amd: { 
    input: "amdContainer.js", 
    output: "MessageBus-amd.js", 
    tokens: [ 
     { 
     token: "%MessageBus%", 
     file: "MessageBus.js" 
     } 
    ] 
    } 

amdContainer.js

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

MessageBus.js

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; 
    } 
}