前端编程提高之旅（一）----插件-前端开发提高之旅

平日收集有价值的网页颇多，而收集资料并不是一件快乐的事情，反而越多越给内心压力，困扰自己的同时，也错失了提高的时机。因此此系列文章意在探讨前端的编程所感，亦是疏解内心压力，自我提高的途径。此偏文章涉及内容均来自网友博客。

示例一：

<!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功能的扩展即插件。此篇引用博主的文章前几篇都是插件的使用。插件的确增加了“简单可依赖”的特点，增加了封装性，但封装涉及交互、样式和结构，降低了代码的可读性，以此看来插件的开发是把双刃剑。