我怎樣才能做一個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; 
    } 
}