如何將我的腳本封裝到一個函數中？專業的方法？

現在我正在編寫一些訓練代碼。試圖編寫一個半固定的頁面元素。這是我的結果現在：如何將我的腳本封裝到一個函數中？專業的方法？

$(document).ready(function() { 
    var elementPosition = $("#header").offset(); 
    var elementHeight = $("#header").outerHeight(); 
    $("#header").before("<div id='placeholder' style='display:none; height:" + elementHeight + "px'></div>"); 
    $(window).scroll(function() { 
     checkAttached("#header"); 
    }); 

    function checkAttached(element) { 
     var windowDepth = $(window).scrollTop(); 
     if (windowDepth >= elementPosition.top) { 
      $(element).addClass("attached"); 
      $("#placeholder").css("display", "block"); 
     } else { 
      $(element).removeClass("attached"); 
      $("#placeholder").css("display", "none"); 
     }; 
    }; 
});

http://jsfiddle.net/9xM3W/

的事情是，我不能與解決方案非常滿意。我希望它更靈活一點。我的目標是一個獨立的功能，可以解決各種頁面元素。像這樣的事情：

attachThis(element);

現在我遇到了滾動事件的麻煩。我不能有這個功能，我可以嗎？此外，我不知道一個很好的解決方案，不覆蓋「elementPosition」。我現在的解決方案是在函數之外定義它。不是很乾淨。

當然，我並不希望你提供更好的腳本，但也許你可以推動我走向正確的方向併爲我指出一個合適的技術？我很想知道專業人員如何處理這項任務。

來源

2013-02-26 Kreativrandale

我會建議詢問[codereview.SE]（http://codereview.stackexchange.com/），這個問題將在主題上討論，並且您可能會對代碼獲得更好的整體反饋。 – mgibsonbr 2013-02-26 19:54:15

謝謝你的鏈接，我會檢查一下！在不久的將來，可能會完美地幫助我！ – Kreativrandale 2013-02-26 20:09:05

Just put your code in a function，用諸如element的參數替換#header。有沒有在你的代碼是在全球範圍內，所以沒有問題，這樣做：

function attach(element){ 
    var el = $(element), 
     elementPosition = el.offset(), 
     elementHeight = el.outerHeight(), 
     placeholder = $("<div style='display:none; height:" + elementHeight + "px'></div>"); 

    el.before(placeholder); 
    $(window).scroll(function() { 
     checkAttached(el); 
    }); 

    function checkAttached(element) { 
     var windowDepth = $(window).scrollTop(); 
     if (windowDepth >= elementPosition.top) { 
      $(element).addClass("attached"); 
      placeholder.css("display", "block"); 
     } else { 
      $(element).removeClass("attached"); 
      placeholder.css("display", "none"); 
     }; 
    } 
}

來源

2013-02-26 19:55:57

除了'id'必須是唯一的。如果這被稱爲不止一次，將會有多個'＃placeholder'元素。不知道這是否需要兩次調用，但這將是一個問題。 – 2013-02-26 19:59:36

@JamesMontagne好點。把它變成一個封閉的變量。 – 2013-02-26 20:00:49

哇，好像我得到了函數/函數調用錯誤的原理。我認爲它會從上到下運行一次。這就是爲什麼我認爲scroll-eventhandler不能在函數內部工作。所以顯然它是enaugh，爲了讓scroll-eventhandler運行一次而調用它？謝謝你大好時光！ – Kreativrandale 2013-02-26 20:13:47

你可以定義一個jQuery的方法

jQuery.fn.fix = (function($){ 
        return function(){ 
         var selection = this, 
          elementPosition = selection.offset(), 
          elementHeight = selection.outerHeight(); 
         selection.before("<div id='placeholder" + 
               selection.attr('id') + 
              "' style='display:none; height:"+elementHeight+"px'></div>"); 
         $(window).scroll(function(){ 
          var windowDepth = $(window).scrollTop(); 
          if (windowDepth>=elementPosition.top) { 
         selection.addClass("attached"); 
           $("#placeholder").css("display", "block"); 
          } else { 
           selection.removeClass("attached"); 
           $("#placeholder").css("display", "none"); 
         }; 
         }); 
        return this; 
        }; 
       }(jQuery));

，然後使用它像這樣

$(function(){ 
    $("#header").fix(); 
})

來源

2013-02-26 20:02:03

如何將我的腳本封裝到一個函數中？專業的方法？

回答

相關問題