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配置来提供插件的方法调用和参数配置。