jquery 封装页面切换插件

最新推荐文章于 2022-03-25 11:29:56 发布

seveinn

最新推荐文章于 2022-03-25 11:29:56 发布

阅读量215

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_38335055/article/details/105373856

版权

思路

- 立即执行函数封闭作用域，实现组件化开发
- $.fn.extend 扩展jquery插件内容
- 构造函数存储实例化参数

组件整体结构如下：

(function () {
    // 构造函数存储创建插件时的一系列参数
    function Page (options, wrapper) {

    }

    // 创建插件DOM结构
    Page.prototype.fillHtml = function () {

    }

    // 绑定翻页事件
    Page.prototype.bindEvent = function () {

    }

    $.fn.extend({
        // turnPage为接口函数
        turnPage : function (options) {

            // 实例化翻页对象
            var page = new Page(options, this);

            // 调用对象的初始化方法插入翻页部件：
            // 包括创建结点、初始化样式、绑定事件等一系列操作
            page.init();
    }
})
} ())

接口调用

例如：

    //将翻页部件插入class选择器选中的dom节点中
    $('.demo').turnPage({
        nowPage : 5,
        allPage : 10,
        changePage : function (page) {
            nowPage = page;
        }
    })

源码地址：