前端编程提高之旅（一）—-插件
最后更新于：2022-04-01 09:36:49
平日收集有价值的网页颇多，而收集资料并不是一件快乐的事情，反而越多越给内心压力，困扰自己的同时，也错失了提高的时机。因此此系列文章意在探讨前端的编程所感，亦是疏解内心压力，自我提高的途径。此偏文章涉及内容均来自[网友博客](http://blog.csdn.net/blatar/article/category/1229834)。
示例一：
~~~
<!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");
}
})
~~~
**这段代码是一个使文字横向或者纵向滚动的插件，如果想了解清楚插件的工作原理大体需要看这[两个](http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html)[网页](http://www.css88.com/jqapi-1.9/jQuery.extend/)了解了extend函数的用法即可。在了解extend用法之后，就可以找一下插件了如上前三段代码的联系了。jquery插件与如上三段代码的区别在于通过extend方法后，内部的对象wordScroll就成了jquery包含的对象了，引用的时候可以这样：**
~~~
$.wordScroll({
});
~~~
**插件内都会设置一些default属性，当有部分变量传入时，与默认重复的会被覆盖成传入的，未传入的仍会保持原样。如下代码实现此功能：**
~~~
var opts = $.extend(this.defaults,opt);
~~~
剩余内容就是上述四段代码的共同点了，在代码内完成结构、样式、交互逻辑代码的设计，也就是说，用上extend函数和如上一行代码，就可以轻松实现jquery功能的扩展即插件。此篇引用博主的文章前几篇都是插件的使用。插件的确增加了“简单可依赖”的特点，增加了封装性，但封装涉及交互、样式和结构，降低了代码的可读性，以此看来插件的开发是把双刃剑。