jQuery插件开发小记

在编写前端网页时候，总是为了满足一些功能上的需求去写很多function。大部分都是面向过程的写法，比如弹个小窗口，改变个dom元素样式。这些都比较简单很好实现。但是对于一些比较复杂的需求，就没那么轻松了。

比如：要写一个网页，要求实现一屏幕一屏幕滚动的效果。我们可能会这样写。

function pageScroll(){
//获取滚动模块dom元素
var main = $('.main');
//获取屏幕高度宽度
var wH ...;
var wW ...;
//屏幕触碰、绑定事件
$('.main').bind('touchstart',functino(){
//根据手指触碰开始和结束时的坐标变化判断上滚、下滚
var direction = getDirection();
//调用滚屏方法
if(dircetion == 'up'){
pageUp();
}else{
pageDown();
}
})
}

这样基本可以实现滚屏的简单需求了。只要在主页面中调用一下pageScroll();方法就可以。

<script>
$().ready(function(){
pageScroll();
});
</script>

这看起来很简单，一切也都很顺利。然而，新的需求来了，要求点击超链接跳转到固定的某一屏。这乍一看是很简单就能实现的。依然是获取屏幕高度然后在根据页码算出距离就好了。

function goTo(n){
//获取屏幕高度
var wH = $(window).height();
//移动距离
var movement = wH*(n-1);
//移动main
var $main = $('.main');
$main.move(n);
...
}

但是这个goTo(n)；函数跟之前的pageScroll函数是两个函数，他们的变量是不能共享的，这样的话两个函数里就都有wH（屏幕高度的变量）、变量var main = $(‘.main’)（即滚屏的主框架dom元素）。而且这两个函数在语义上来说都是main这个元素上的操作。分开为两个单独的函数是不合理的。以后还有对main的操作的时候就又多了一个函数。而且这些函数里会有很多语义重复的变量，这是很头疼的事。

所以，我们需要一种面向对象的思维，将需要的重要变量定义在对象的属性上去，再将函数变成对象的方法。需要对象操作的时候通过对象来获取方法，进行操作。

//定义pageScroll的构造函数
var pageScroll = function(element,options){
this.$ele = element;
this.$defaults = {
//页面切换速度
speed:'300',
//手指触碰屏幕初始坐标
startY:'0',
//当前窗口高度
wH:'0',
//页面总数
pageCount:'0',
//当前页码
currentPageIndex:'1',
...
};
this.options = $.extend({},this.defaults,options);
}
//定义pageScroll方法
pageScroll.prototype = {
//初始化main和page
initialise: function(){
...
}
//翻页函数
moveUp: fucntion(){
}
moveDown: function(){
}
//跳转到某一页
moveTo: function(){
}
...
}
$.fn.pageScroll = function(options){
//创建pageScroll实体对象
var pageScroll = new PageScroll(this,options);
//调用上翻
pageScroll.moveUp();
//下翻
pageScroll.moveDown();
$.fn.moveTo = function(n){
pageScroll.moveTo();
}
}

这样我们要在html中初始化pageScroll效果时候就可以这样写了。

$().ready(function(){
$('.main').pageScroll();
});

这其实就是添加了jquery的原型方法，我们可以通过dom元素直接调用我们定义的方法。以后在调用

$('.main').moveTo(n);

时，他们所操作的也都是同一个dom元素。这样不仅语意清楚，最重要的是插件在复用的时候其他人不必了解你的函数如何写的，你只需要通过$.fn提供对外接口函数，别人直接调用就好了。

$('.main').pageScroll({
//添加page,把page样式名称传去
page:'.page',
//修改滚屏动画的速度
speed:'1000',
});

也可以通过这种配置方式，在初始化pageScroll时改变一些插件运行的参数，实现插件的可配置。

总结：主要是面向对象的原型写法，然后通过$.fn和option配置来提供插件的方法调用和参数配置。