有时候一个网页的内容往往是非常多的，而如何把各部分按照组件化的思想来开发也就显得非常重要了。组件化模式能够让代码看起来更有条理，最重要的是易于后期代码的维护，也易于团队协作开发的展开，要知道多人开发一个页面是需要有一个共同制定的规则的，比如在命名属性的时候书写格式也很重要，以什么前缀开头，就表示这个dom应该是哪个部分负责的，然后再样式编写额时候要注意父元素与子元素的关系，命名的时候也可以体现出来哪些是父元素、哪些是子元素，这在类属性命名的时候最好能体现出来，这样就不用让团队开发人员在文档里找半天都搞不懂这部分是在哪里写的，哪里负责的。
扯了一些后期维护的东西，但是这篇博文主要是为如何编写一个插件以及如何在html中引入使用插件而写的，其实我所学的jQuery插件知识也没有很多，知识借鉴其他一些插件的使用的方法，基本上了解了一款jQuery插件到底是如何生成并能够在任何html文档中插入使用的。虽然现在前端开发对jQuery的需求好像没有那么大了，因为现在大家都已经去使用先进的东西，比如三大主流框架等，但是目前jQuery的适用性也是依然存在的，打开一些网页依然可以看到他们都在用这样一个JavaScript库。
我刚开始接触jQuery的时候也觉得它的确在代码上实现了如它的logo所说的那样：“write less, do more”，我想它曾经也给许多前端开发人员带来过极大的便利把，用起来真的很爽，就像如果我们使用了vue等主流框架之后，也会惊呼这东西原来可以这样用，真是爽爆了这样，时代在进步，技术的前进方向也永远超乎人的想象，我们也是要永远跟随着技术的步伐永远前进，否则只能落后于他人，这也是在探索新知的时候的一点动力吧，也许不止于此，还有内心真的很好奇新生事物，想去了解一番。
但是技术这东西重要的还是在它实现的思想上，所以技术的原理可见其重要性，弄懂原理，就掌握了它的核心思想，然后再去多多练习，多多实践，最后还是会有进步的。其实在学了插件机制之后，我觉得这些东西大体应该不会差太多，就像在使用bootstrap的时候，还是一样会像使用jQuery插件以样，在html中需要去引入。
balabala。。。完。
开始：
首先使用jQuery编写插件的语法是
//编写插件方法
$.fn.fnName=function(){
//里面写插件代码的实现
}
$("选择器").fnName();//调用插件方法，选择器是需要使用这款插件的地方我这里就给大家介绍一个自己编写的轮播图插件，这是我在上次项目发开中总结出来的，上次那篇实战文章实在太长，可能我没写得很明白，所以试着重新写一遍。
轮播图插件：
轮播图的js实现方法，我学过的有显示隐藏的操作和设置宽度增减这两种方法，但是我觉得还是显示隐藏的方法会好点，因为我觉得设置宽度增减的话，就要把父元素的宽度设置到很大，所以还是用显示隐藏的方式来写，实现思路如下：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Banner_Plugin</title>
<link rel="stylesheet" type="text/css" href="style/css.css">
</head>
<body>
<div class="banner-slide ui-slide">
<div class="ui-slide-block">
<div class="ui-slide-image ui-slide-image-focus">
<img class="ui-slide-item ui-slide-item-focus" src="./img/banner_1.jpg">
</div>
<div class="ui-slide-image">
<img class="ui-silde-item" src="./img/banner_2.jpg">
</div>
<div class="ui-slide-image">
<img class="ui-slide-item" src="./img/banner_3.jpg">
</div>
<div class="ui-slide-image">
<img class="ui-slide-item" src="./img/banner_2.jpg">
</div>
</div>
<div class="ui-slide-arrow">
<a href="#1" class="arrow arrow-left"></a>
<a href="#1" class="arrow arrow-right"></a>
</div>
<div class="ui-slide-process">
<span class="ui-slide-process-item ui-process-focus"> </span>
<span class="ui-slide-process-item"> </span>
<span class="ui-slide-process-item"> </span>
<span class="ui-slide-process-item"> </span>
</div>
</div>
</body>
</html>css.css
.ui-slide-item{
height: 414px;
width: 544px;
}
.ui-slide{
overflow: hidden;
position: relative;
width: 544px;
margin:0 auto;
}
.ui-slide-image{
display: none;
height: 414px;
}
.ui-slide-image-focus{
display: block;
}
.ui-slide-arrow{
width: 544px;
height: 40px;
position: absolute;
top: 207px;
margin-top: -20px;
}
.ui-slide-arrow .arrow{
display: inline-block;
width: 40px;
height: 40px;
font-size: 24px;
color:#fff;
line-height: 40px;
text-align: center;
background:url(../img/ui-slider-arrow.png) no-repeat;
}
.ui-slide-arrow .arrow-right{
float:right;
background-position-x: -40px;
}
.ui-slide-process{
position: absolute;
bottom: 3px;
right: 0;
left: 0;
margin:0 auto;
height: 18px;
line-height: 18px;
text-align: center;
}
.ui-slide-process-item{
display: inline-block;
width: 20px;
height: 20px;
background:url(../img/ui-slider-process.png) no-repeat;
}
.ui-slide-process-item:hover,
.ui-process-focus{
background-position-x: -23px;
}
.ui-slide-process-item:hover{
cursor: pointer;
}Banner_Slide_Plugin,js
$(function(){
$.fn.UiSlide=function(slideImage,slideProcessItem,arrowRight,arrowLeft,time){
var ui=$(this);
var slideImage=$(slideImage);
var processItem=$(slideProcessItem);
var len=slideImage.length;
var index3=0;
var timer;
//当点击右箭头的时候，下一张图片显示，当前图片隐藏，需要获得图片索引，
//当索引大于最后一张索引时，需返回到最开始那张
$(arrowRight,ui).on('click',function(){
forwardImage();
})
//当点击左箭头的时候，上一张图片显示，当前图片隐藏，需要获得图片索引，
// 当索引小于第一张索引时，返回到最后一张
$(arrowLeft,ui).on('click',function(){
backImage();
})
//当点击进度点时，切换图片
processItem.on('click',function(){
var currentCount=$(this).index();
changeImage(currentCount)
})
function changeImage(index){
slideImage.eq(index)
.show()
.siblings()
.hide()
.end();
processItem.eq(index)
.addClass('ui-process-focus')
.siblings()
.removeClass('ui-process-focus')
.end();
}
//下一张图片显示，当前图片隐藏，需要获得图片索引，
//当索引大于最后一张索引时，需返回到最开始那张
function forwardImage(){
index3++;
changeImage(index3);
if (index3>=len) {
index3=0;
changeImage(index3);
}
}
//上一张图片显示，当前图片隐藏，需要获得图片索引，
// 当索引小于第一张索引时，返回到最后一张
function backImage(){
index3--;
changeImage(index3);
if (index3<0) {
index3=len-1;
changeImage(index3);
}
}
//自动播放图片
function autoImage(){
timer=setInterval(function(){
forwardImage();
},time);
}
autoImage();
//当鼠标悬浮在图片时，停止自动播放
ui.on('mouseover',function(){
clearInterval(timer);
})
ui.on('mouseout',function(){
autoImage();
})
}
})然后就是在html中引入这个插件了，但是前提是需要先引入jQuery，之后就是使用这个插件，使用的方法我写在了js.js文件里，以下是js.js文件和在html文件中引入插件：
js.js：
$(function(){
$(".ui-search").UiSearch('.ui-focus','.ui-search-list','.ui-search-item');
})引入插件：
<script src="js/jquery-1.12.4.js"></script>
<script src="js/Banner_Slide_Plugin.js"></script>
<script src="js/js.js"></script>end.
扫一扫
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
