前端程式設計提高之旅（一）----外掛

產品經理讀書會發表於2014-07-10
前端程式設計

           平日收集有價值的網頁頗多，而收集資料並不是一件快樂的事情，反而越多越給內心壓力，困擾自己的同時，也錯失了提高的時機。因此此係列文章意在探討前端的程式設計所感，亦是疏解內心壓力，自我提高的途徑。此偏文章涉及內容均來自網友部落格。

    示例一：

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>bar</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
#time_back{width:300px;height:20px;border:1px solid #246;background:#CCC}
#time_bar{width:0;height:20px;background:#470;color:#FFF;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
 $("#input_time").change(function(){//輸入框中數值一旦變化，則觸發change函式
  var rate = $(this).attr("value");
  changebar("#time_bar",rate,"red");
 });
 /**
 * 更新進度條
 * @ param obj 進度條id
 * @ param rate 進度，0-100間的整數
 * @ param deadColor 當進度超過一定值（預設80）的顏色
 */
 function changebar(obj,rate,deadColor){
  if(undefined!=deadColor&&rate>80){
   $(obj).css({"background":deadColor})
  }
  rate = rate%100 + "%";
  $(obj).animate({width:rate},1000);
  $(obj).html(rate);
 }
});
</script>
<body>
日期：<div id="time_back" ><div id="time_bar" ></div></div>
<input type="text" id="input_time" />
</body>
</html>

   這個例子製作工具條的例子，非常簡單。外層div，內層巢狀一個div，用animate函式設定內層背景顏色和文字，通過change方法觸發使得整個頁面呈現出響應和動態的效果。

   示例二：

$(document).ready(function(){
  //滾動事件,滾動window元素時，呼叫滾動事件
  $(window).scroll(function(){
   //顯示滾動條位置
    $(".fixed").html(document.body.scrollTop||document.documentElement.scrollTop);
    var t = document.body.scrollTop||document.documentElement.scrollTop;
    //當導航條不可見時，重新定義導航條位置
   if(t>100){//100為導航欄高度
    $("#nav").css({
     "position":"fixed",
     "top" :"0px",
     "left" :"0px"
    });
    }else{
    //回到導航條原來位置時，還原導航條位置
    $("#nav").css({
     "position":"",
     "top" :"",
     "left" :""
    });
    }
  });
 });

   這段程式碼則是通過滑動滾動條來觸發函式，並且通過導航與瀏覽器頂部的距離作為條件，修改id為nav的位置，意在使nav這個元素始終保持在視野中的頂部。

  示例三：

$(document).ready(function(){
  // 初始化內容
  for(var i = 0 ; i < 3 ; i++){
   $(".flow").each(function(){
    $(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>");
   });
  }
 
  $(window).scroll(function(){
   // 被捲去的高度
   var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
   // 頁面高度
   var pageHeight = $(document).height();
   // 可視區域高度
   var viewHeight = $(window).height();
   //alert(viewHeight);
   //當滾動到底部時
   if((scrollTop+viewHeight)>(pageHeight-20)){
    if(scrollTop<1000){//防止無限制的增長
     for(var i = 0 ; i < 2 ; i++){
      $(".flow").each(function(){
       $(this).append("<div style=\"width:90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;\"></div>");
      });
     }
    }
   }
  });
 });
  /*
 * 獲取指定範圍隨機數
 * @param min，最小取值
 * @param max，最大取值
 */
 
 function getRandom(min,max){
  //x上限，y下限
        var x = max;
        var y = min;
  if(x<y){
   x=min;
   y=max;
  }
        var rand = parseInt(Math.random() * (x - y + 1) + y);
  return rand;
 }
   

   這段程式碼是典型瀑布流構造的程式碼，只需要加入圖片到div內部即可。通過滾動條觸發函式，使得在一定範圍內，隨機載入div寬度，連線到原有div之後，構成邊拉邊載入的效果。

  示例四：

$.extend({
        wordScroll:function(opt,callback){
   //alert("suc");
    this.defaults = {
     objId:"",
     width:300,  // 每行的寬度
     height:100, // div的高度
     liHeight:25,  // 每行高度
     lines:2,  // 每次滾動的行數
     speed:1000,  // 動作時間
     interval:2000,  // 滾動間隔
     picTimer:0,  // 間隔控制程式碼，不需要設定，只是作為標識使用
     isHorizontal:false  // 是否橫向滾動
    }
   
     //引數初始化,看是否有新的引數傳入，傳入則更新初始化設定
    var opts = $.extend(this.defaults,opt);
   
    // 縱向橫向通用
    $("#"+opts.objId).css({
           width:opts.width,
           height:opts.height,
           "min-height":opts.liHeight+"px",
           "line-height":opts.liHeight+"px",
           overflow:"hidden"
           });
   
    $("#"+opts.objId+" li").css({
           height:opts.liHeight
           });
                if(opts.lines==0)
     opts.lines=1;
   
    // 橫向滾動
    if(opts.isHorizontal){
     
     $("#"+opts.objId).css({
            width:opts.width*opts.lines + "px"
            });
     
     $("#"+opts.objId+" li").css({
            "display":"block",
            "float":"left",
            "width":opts.width + "px"
            });//水平則行內顯示
     
     $("#"+opts.objId+" ul").css({
            width:$("#"+opts.objId).find("li").size()*opts.width + "px"// 輸出li選擇器的數量，乘以寬度
     });     // 橫向使用，不夠一屏則不滾動
     if($("#"+opts.objId).find("li").size()<=opts.lines)
      return;
     var scrollWidth = 0 - opts.lines*opts.width;
     
    }else{
   
     //如果不夠一屏內容 則不滾動
     if($("#"+opts.objId).find("li").size()<=parseInt($("#"+opts.objId).height()/opts.liHeight,10))
      return;
     var upHeight=0-opts.lines*opts.liHeight;
    }
   
   
    // 橫向滾動
    function scrollLeft(){
      $("#"+opts.objId).find("ul:first").animate({
        marginLeft:scrollWidth
      },opts.speed,function(){
        for(i=1;i<=opts.lines;i++){
         $("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first"));
        }
        $("#"+opts.objId).find("ul:first").css({marginLeft:0});
      });
    };
    // 縱向滾動
    function scrollUp(){
      $("#"+opts.objId).find("ul:first").animate({
        marginTop:upHeight
      },opts.speed,function(){
        for(i=1;i<=opts.lines;i++){
          $("#"+opts.objId).find("li:first").appendTo($("#"+opts.objId).find("ul:first"));
        }
        $("#"+opts.objId).find("ul:first").css({marginTop:0});
      });
    };
   
    //滑鼠滑上焦點圖時停止自動播放，滑出時開始自動播放
    $("#"+opts.objId).hover(function() {
     clearInterval(opts.picTimer);
    },function() {
     opts.picTimer = setInterval(function() {
      // 判斷執行橫向或縱向滾動
      if(opts.isHorizontal)
       scrollLeft();
      else
       scrollUp();
     },opts.interval); // 自動播放的間隔，單位：毫秒
    }).trigger("mouseleave");
    }       
})

   這段程式碼是一個使文字橫向或者縱向滾動的外掛，如果想了解清楚外掛的工作原理大體需要看這兩個網頁瞭解了extend函式的用法即可。在瞭解extend用法之後，就可以找一下外掛瞭如上前三段程式碼的聯絡了。jquery外掛與如上三段程式碼的區別在於通過extend方法後，內部的物件wordScroll就成了jquery包含的物件了，引用的時候可以這樣： 

$.wordScroll({
	});

     外掛內都會設定一些default屬性，當有部分變數傳入時，與預設重複的會被覆蓋成傳入的，未傳入的仍會保持原樣。如下程式碼實現此功能：
var opts = $.extend(this.defaults,opt);

      剩餘內容就是上述四段程式碼的共同點了，在程式碼內完成結構、樣式、互動邏輯程式碼的設計，也就是說，用上extend函式和如上一行程式碼，就可以輕鬆實現jquery功能的擴充套件即外掛。此篇引用博主的文章前幾篇都是外掛的使用。外掛的確增加了“簡單可依賴”的特點，增加了封裝性，但封裝涉及互動、樣式和結構，降低了程式碼的可讀性，以此看來外掛的開發是把雙刃劍。

相關文章