如何使用全局延遲js文件和單獨的獨立javascript文件

Question

好的，所以我已經推遲了一個js文件（稱為combination.js），該文件包含我的網站需要的所有“全局” /通用js-使用此方法：

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "../js/combination.js"; 
document.body.appendChild(element);
}

if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

這樣就可以整理出一般的js，但是我（在某些頁面上）需要一些Java腳本來用於必須獨立的聯系表單（即：它不能成為global Combine.js文件的一部分），因為我將在下面更改某些代碼網頁：

<script type="text/javascript">
jQuery(document).ready(function() {
$('.contactform').submit(function() {
    var action = $(this).attr('action');
    var form = this;
    $('.submit', this).attr('disabled', 'disabled').after(
          '<img src="assets/ajax-loader.gif" class="loader" />');
    $('.message', this).slideUp(750, function() {
        $(this).hide();
        $.post(action, {
            name: $('.name', form).val(),
            email: $('.email', form).val(),
            phone: $('.phone', form).val(),
            country: $('.country', form).val(),
            guests: $('.guests', form).val(),
            dayin: $('.dayin', form).val(),
            dayout: $('.dayout', form).val(),
            comments: $('.comments', form).val(),
            verify: $('.verify', form).val()
        },
        function(data) {
            $('.message', form).html(data);
            $('.message', form).slideDown('slow');
            $('img.loader', form).fadeOut('fast', function() {
                $(this).remove();
            });
            $('.submit', form).removeAttr('disabled');
        });
    });
    return false;
});
});
</script>

但是我遇到的問題是，當我在延遲的javascript下面經過這段代碼時，就像這樣：

問題方法：

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "../js/combination.js"; 
document.body.appendChild(element);
}

if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

<script type="text/javascript">
jQuery(document).ready(function() {
$('.contactform').submit(function() {
    var action = $(this).attr('action');
    var form = this;
    $('.submit', this).attr('disabled', 'disabled').after(
          '<img src="assets/ajax-loader.gif" class="loader" />');
    $('.message', this).slideUp(750, function() {
        $(this).hide();
        $.post(action, {
            name: $('.name', form).val(),
            email: $('.email', form).val(),
            phone: $('.phone', form).val(),
            country: $('.country', form).val(),
            guests: $('.guests', form).val(),
            dayin: $('.dayin', form).val(),
            dayout: $('.dayout', form).val(),
            comments: $('.comments', form).val(),
            verify: $('.verify', form).val()
        },
        function(data) {
            $('.message', form).html(data);
            $('.message', form).slideDown('slow');
            $('img.loader', form).fadeOut('fast', function() {
                $(this).remove();
            });
            $('.submit', form).removeAttr('disabled');
        });
    });
    return false;
});
});
</script>

后者的javascript（對於我的表單）無法正常執行（我知道這很模糊，但我會在下面進行解釋），但是當我將該javascript放在我的Combine.js文件底部時，它可以完美執行。 作為一個對javascript知識很少的人，我不明白為什么？

上面的javascript代碼是我的聯系表單驗證過程的一部分，並且（使用ajax）還會顯示成功或錯誤消息，具體取決於表單是否已成功發送，並且這些消息僅在同一頁面上加載提交按鈕下方。

但是，當我像上面的“問題方法”中那樣放置javascript時，此javascript執行的成功/錯誤消息會在新的空白頁中打開，幾乎就像ajax無法正常工作一樣。

由於需要包含不能包含在全局js文件中的獨立js，我如何獲得問題方法的工作方式？

Answer 1

這可以通過基本的事件發射器解決：

var EventEmitter = {
  events : {},

  on : function(event, func){
     if(!this.events[event]){
        this.events[event] = [];
     }

     this.events[event].push(func);
  },

  emit : function(event){
    var events = this.events[event];
        //check for the event
    if(events){
        //fire them off
        for(var i = 0, l = events.length; i < l; i++){
            events[i]();
        }
    }
  }
};

這個非常簡單的對象使您可以存儲函數，直到事件發射器發出特定動作為止。

基本用法示例：

var foo = function(){}; //create a function (can be anonymous or not)
EventEmitter.on('bar', foo); //connect the function the 'bar' event
//... somewhere down the script
EventEmitter.emit('bar'); //calls foo

在將其downloadJSAtOnload之前，將其放在腳本中，然后像這樣使用它：

<script type="text/javascript">
    //event emitter here
    // ...

    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.onload = function(){
            //call all of your functions waiting for script load
            EventEmitter.emit('load');
        };            
        element.src = "../js/combination.js"; 
        document.body.appendChild(element);
    }

    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

然后，不使用文檔就緒，而使用事件發射器：

<script type="text/javascript">
//replaces document.ready
EventEmitter.on('load', function() {
    $('.contactform').submit(function() {
         // ....
    });
});
</script>

我建議將EventEmitter放在頭部，以便內聯腳本可以使用它，但是將腳本在底部或$（document）.ready（）中加載combination.js，以避免任何潛在的麻煩。