如何將js常用函數進行封裝

在前端的開發中，我們會經常遇到這樣的一個問題，就是當頁面滾動到一定的時候；會有回到頂部的需求，那麼在每一個頁面上都寫這麼一個方法就會使程式碼很冗餘；所以為了解決這個問題；我把程式碼抽了出來，封裝成一個公用的函數，方便使用。封裝的還不是很好，有不同見解，可以互相討論討論~

/** * 页面回顶部
 * @obj //对象{}传入 ; 其中回顶部的imgSrc路径必传 ; 其他参数说明看函数内部的默认defaults对象 
 */
function _backToTop(obj){   
    var defaults = {
      pageHeight: 2,    //默认当向下滚动2页时，显示      
      aId: 'aToTop',    //a标签的id      
      href: 'backTop',   //跳转到指定body元素的顶部      
      aStyle: {        //a标签样式    
      width: '40px',
         height: '40px',
         display: 'block',
         position: 'fixed',
         right: '20px',
         bottom: '50px',
         zIndex: 99999  //z-index:999的这种样式以 zIndex:999的方式传值      
      },
      imgStyle: {          //img标签样式         
         width: '100%',
         height: '100%'      }
   };   for (var def in defaults) {      if (typeof obj[def] === 'undefined') {         obj[def] = defaults[def];
      }      else if (typeof obj[def] === 'object') {         for (var deepDef in defaults[def]) {            if (typeof obj[def][deepDef] === 'undefined') {               obj[def][deepDef] = defaults[def][deepDef];
            }
         }
      }
   }   
   //把样式对象转化为样式字符串,有如：z-index:999;的样式按 zIndex:999;的 方式传值   
       obj.aStyle = 
   JSON.stringify(obj.aStyle).replace(/{|}|"/g,'').replace(/,/g,';').replace(/[A-Z]/g, function(ch) {return '-'+String.fromCharCode(ch.charCodeAt(0) | 32);});   
       obj.imgStyle = JSON.stringify(obj.imgStyle).replace(/{|}|"/g,'').replace(/,/g,';').replace(/[A-Z]/g, function(ch) {return '-'+String.fromCharCode(ch.charCodeAt(0) | 32);});  
        var winHeight = document.documentElement.clientHeight || document.body.clientHeight;   
        var scrollValue;
        document.getElementsByTagName('body')[0].setAttribute('id',obj.href);   
        var box = document.createElement('a');   
        var img = document.createElement('img');
   box.setAttribute('id',obj.aId);
   box.setAttribute('href','#'+obj.href);
   box.setAttribute('style',obj.aStyle);
   img.setAttribute('style',obj.imgStyle);
   img.setAttribute('src',obj.imgSrc);
   box.appendChild(img);
   window.addEventListener('scroll',function(e){
      scrollValue = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;      if(scrollValue > (winHeight * obj.pageHeight)){
         document.body.appendChild(box);
      }else{
         document.getElementById(obj.aId) ?
   document.body.removeChild(document.getElementById(obj.aId)) : null;
      }
   });
}

以上是如何將js常用函數進行封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！