jQuery 进阶：插件开发基础

最新推荐文章于 2020-03-23 16:24:37 发布
最新推荐文章于 2020-03-23 16:24:37 发布
阅读量327 收藏 1
点赞数
分类专栏： JavaScript 库 Library
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wildye/article/details/80620765
版权

基础知识点

1. 闭包

用自执行匿名函数包裹代码，外部无法直接访问，形成闭包

  • 避免合并 js 出现无法正常解析进而报错，在自执行匿名函数前加上 ;
  • 以 jQuery 对象为实参、$ 符号为形参
    兼容操作符 $ 和 jQuery，避免全局依赖和第三方破坏
;(function ($) {
    // code...
})(jQuery)

2. 对象级别组件开发

即挂在 jQuery 原型下的方法，这样通过选择器获取的 jQuery 对象实例也能共享该方法，也称为动态方法

  • $.fn === $.prototype === jQuery.prototype，即 jQuery对象的原型
  • 方法内部 this 指向选择器返回的元素或元素集
  • 使用 return 维持 jQuery 的链式调用
  • each() 方法内的 this 是普通DOM，需转化成 $(this)
;(function ($) {

    $.fn.PageSlide = function() {
        // 这里 this 指向 jQuery 选择器返回的集合
        return this.each(function() {
            // 使用 each 遍历集合中的每个元素
            $(this)
        }); 
    }

})(jQuery)

3. 单例模式

如果实例存在则不再重新创建实例

  • 利用 data() 来存放插件对象的实例
$.fn.PageSlide = function() {

    return this.each(function() {

        var me = $(this),
            instance = me.data("PageSlide"); // 获取实例对象

        // 若实例不存在则创建，并使用 data 方法存放实例
        if (!instance) {
            me.data("PageSlide", (instance = new PageSlide()));
        }

    })

}

4. 定义构造函数

  • 将插件所有方法包装到对象上，在构造函数原型上挂载该对象
  • 构造函数推荐为自执行函数表达式，并返回自身维持链式调用
;(function ($) {

    // 定义构造函数
    var PageSlide = (function() {
        // 初始执行代码
        this.init()

        return PageSlide;
    })();

    // 在构造函数原型上定义对象方法
    PageSlide.prototype = {

        init: function() {
        },

        pagesCount: function() {
        }

    };

    // 在 jQuery 对象原型上 挂载插件
    $.fn.PageSlide = function() {
        return this;
    }

})(jQuery)

4. 配置默认参数

使用 jQuery 提供的 $.extend() 方法来合并默认配置和用户配置

5. 将插件的所有方法包装到一个对象上

  • 不影响外部命名空间

示例：基于 jQuery 的轮播图插件

  • HTML
<div data-PageSlide>
    <div class="items">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
        <div class="item item4"></div>
    </div>
    <div class="pages"></div>
</div>

<script>
    (function ($) {
        // 实例化插件
        $('[data-PageSlide]').PageSlide({
            index: 0，
            look: true,
            pages: true
        });
    })(jQuery);
</script>
  • JS
;(function ($) {
    "use strict"; // 严格模式

    // 构造函数
    var PageSlide = (function () {

        function PageSlide (element, options) {
            this.element = element;  // this 指向选择器返回的 DOM 元素集
            this.settings = $.extend({}, $.fn.PageSlide.defaults, options || {}); // 合并配置参数
            this.init(); // 执行初始化方法
        }

        // 将原型上挂载对象，将常用方法包装到对象上
        PageSlide.prototype = {

            // todo: 初始化页面布局及事件绑定
            init: function () {
                var me = this,               // this 多次调用，缓存起来
                    userAgent = navigator.userAgent;

                // 获取 DOM 元素
                me.selector = me.settings.selector;
                me.items = me.element.find(me.selector.items);  // 容器
                me.item = me.items.find(me.selector.item);      // 子项
                me.pages = me.element.find(me.selector.pages);  // 分页

                // 获取索引
                me.index = (me.settings.index >= 0 && me.settings.index < me.pageCount()) ? me.settings.index : 0;

                // 获取浏览器信息
                if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) {
                    me.isIE8 = navigator.userAgent.toLowerCase().match(/msie ([\d.]+)/)[1] == "8.0" ? true : false;
                }

                me._initLayout(); // 页面布局
                me._initEvent();  // 事件绑定
                me._autoPlay();
            },

            // todo: 获取页面总数
            pageCount: function () {
                return this.item.length;
            },

            // todo: 上一页
            prev: function () {
                var me = this;
                me.index--;
                me._switchPage();
            },

            // todo: 下一页
            next: function () {
                var me = this;
                me.index++;
                me._switchPage();

            },

            // todo: 页面布局
            _initLayout: function () {
                var me = this;

                // 分页布局
                if (me.settings.pages) {

                    // 生成分页控制点
                    var spans = "";
                    for (var i = 0; i < me.pageCount(); i++) spans += "<span></span>";
                    me.pages.append(spans);

                    me.pages.children("span").eq(me.index).addClass("on"); // 高亮当前索引控制点

                    // 生成左右切换按钮
                    if (me.settings.pagesArrows) {
                        me.element.append('<div class = "btn L">&lt;</div><div class = "btn R">&gt;</div>');
                    }
                }

                // 子页横向布局
                me.items.css("width", (me.pageCount() + 1) * 100 + "%");
                me.item.push(me.item.eq(0).clone().appendTo(me.items)); // 追加首元素至末尾, 用以css无缝切换
                me.item.each(function () {
                    $(this).css("width", 100 / (me.pageCount()) + "%");
                });
            },

            // todo: 事件绑定
            _initEvent: function () {
                var me = this,
                btn = me.element.children(".btn");

                // 控制点移入切换
                if (me.settings.pagesDot) {
                    me.pages.find("span").on("mouseover", function () {
                        me.index = me._oddIndex($(this).index());
                        me._switchPage();
                    });
                }

                // 左右切换箭头按钮
                if (me.settings.pagesArrows) {
                    btn.eq(0).on("click", function () {
                        me.prev();
                    });
                    btn.eq(1).on("click", function () {
                        me.next();
                    });
                }

                // 绑定键盘事件
                if (me.settings.keyboard) {
                    $(window).keydown(function (e) {
                        var keyCode = e.keyCode;
                        if (keyCode == 37 || keyCode == 38) {
                            me.prev();
                        } else if (keyCode == 39 || keyCode == 40) {
                            me.next();
                        }
                    });
                }

                // 绑定鼠标滚轮事件
                if (me.settings.mouseRoll) {
                    me.element.on("mousewheel DOMMouseScroll", function (e) {
                        e.preventDefault();
                        var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

                        if (delta > 0 && (me.index && !me.settings.loop || me.settings.loop)) {
                            me.prev();
                        } else if (delta < 0 && (me.index < (me.pageCount() - 1) && !me.settings.loop || me.settings.loop)) {
                            me.next();
                        }
                    });
                }
            },

            // todo: 自动播放
            _autoPlay: function () {
                var me = this;

                if (me.settings.loop) {
                    // 设置定时器
                    var timer = setInterval(function() {
                        me.index++;
                        me._switchPage();
                    }, me.settings.interval);

                    // 移入清除定时器
                    me.element.hover(function() {
                        clearInterval(timer);
                    },function() {
                        timer = setInterval(function() {
                            me.index++;
                            me._switchPage();
                        }, me.settings.interval);
                    });
                }
            },

            // todo: 切换页面
            _switchPage: function () {
                var me = this;

                // 末页切首页
                if (me.index == me.pageCount()) {
                    me.items.css("left", "0");
                    me.index = 0;
                }

                // 首页切末页
                if (me.index == -1) {
                    me.items.css("left", -(me.pageCount() - 2) * 100 + "%");
                    me.index = me.pageCount() - 2;
                }

                // 控制点高亮切换
                if (me.index >= me.pageCount() - 1) {
                    me.pages.children("span").eq(0).addClass("on").siblings().removeClass("on")
                } else {
                    me.pages.children("span").eq(me.index).addClass("on").siblings().removeClass("on");
                }

                // 过渡动画
                me.items.stop().animate({
                    left: -(me.index * 100) + "%"
                }, me.settings.speed);
            },

            // todo: IE8控制点索引受PIE生成的元素影响, 这里做一个索引转换
            _oddIndex: function (index) {
                var me = this;
                if (!me.isIE8) return index;

                var arr = [1];
                for (var i = 1; i <= me.pageCount(); i++) arr.push(arr[arr.length - 1] + 2);

                // 让IE8兼容indexOf方法
                if (!Array.prototype.indexOf) {
                    Array.prototype.indexOf = function(val){
                        var me = this;
                        for(var i =0; i < me.length; i++){
                            if(me[i] == val) return i;
                        }
                        return -1;
                    };
                }

                return arr.indexOf(index);
            }

        };
        return PageSlide;
    })();

    // 注册 jQuery 组件
    $.fn.PageSlide = function (options) {

        // 实现单例模式
        return this.each(function () {
            var me = $(this),
            instance = me.data("PageSlide"); // 获取实例对象

            // 若实例不存在，则创建实例对象
            if (!instance) {
                me.data("PageSlide", (instance = new PageSlide(me, options)));
            }

            // 若实例已存在，直接返回该实例
            if ($.type(options) === "string") return instance[options]();
        });
    };

    // 默认配置参数
    $.fn.PageSlide.defaults = {
        selector: {
            items: ".items", // 容器
            item: ".item",   // 子项
            pages: ".pages"  // 分页
        },

        index: 0,          // 索引

        loop: true,        // 启用循环切换
        interval: 1500,    // 切换间隔
        speed: 800,        // 过渡时间

        pages: true,       // 启用分页
        pagesArrows: true, // 分页箭头控制
        pagesDot: true,    // 分页点控制
        keyboard: false,   // 启用键盘控制
        mouseRoll: false   // 启用鼠标滚轮控制
    }

})(jQuery);

参考
https://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

凝弧
关注
专栏目录
webpack写jquery插件的环境配置
10-18
- **插件开发**: 学习如何利用`webpack`开发自己的插件或库。 - **兼容性问题**: 了解如何解决不同浏览器之间的兼容性问题，比如通过选择合适的`jQuery`版本来支持老旧浏览器。 #### 四、后续学习建议 对于希望...
jQuery插件开发进阶
weixin_33860147的博客
03-11 84
jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能更好地组织我们的代码，并且从这些前人总结出来的模式中学到很多好的实践。 根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种： 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery ...
自定义全屏分页插件
huangbaokang的博客
03-23 315
pageswitch.js /*! * PageSwitch 1.0 * */ (function($){ "use strict"; /*说明:获取浏览器前缀*/ /*实现：判断某个元素的css样式中是否存在transition属性*/ /*参数：dom元素*/ /*返回值：boolean，有则返回浏览器样式前缀，否则返回false*/ var _prefix = (fun...
jquery 仅在前端完成table分页(没有与后台的交互)
qq_36666181的博客
07-05 2209
效果图：       html: &lt;script type="text/javascript" src="../main/js/paging.js"&gt;&lt;/script&gt; &lt;a class="glyphicon glyphicon-plus-sign" onclick="addrow()"&gt;添加一行&lt;/a&a
JQ学习笔记--进阶
weixin_33724059的博客
10-08 82
JQ插件 　　$.browser() 　　　　http://jquery.thewikies.com/browser/ 　　　　http://jquery.thewikies.com/browser/jquery.browser.min.js 　　$.cookie() 　　　　https://github.com/carhartl/jquery-cookie#readm 　　e-cal...
jquery 高级进阶1-插件开发
qq_15988615的专栏
08-27 194
插件开发两种方式 1：类级插件开发 /*      * jquery 类级插件开发      * 1:直接给jquery添加全局函数      * 2:用extend()方法      * 3:使用命名空间      * **/     //直接给jquery添加全局函数     jQuery.myAlert=function(objText){         alert(objText)...
TuneMeUp:音频播放器 jQuery 插件
07-03
一、jQuery与JavaScript基础 在深入理解TuneMeUp之前，我们需要了解jQuery，这是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery通过提供简洁的API，降低了JavaScript编程的...
jQuery进阶_权限选择_表单验证_时间插件_封装ajax_三级联动等
10-28
在这篇关于jQuery进阶的文章中，作者详细讲解了如何使用jQuery进行一些高级操作，例如权限选择、表单验证、时间插件的使用、封装ajax以及实现三级联动等功能。以下是对文章内容知识点的详细解析： 1. jQuery基础...
jquery基础学习插件实例大全
09-11
《jQuery基础学习插件实例大全》是一套针对初学者及有一定JavaScript基础的开发者设计的教程，旨在通过实例化的教学方式，帮助用户快速掌握jQuery的核心功能和常见插件的使用。教程分为三个部分，即“jQ学习第一季”...
jQuery动画表单插件FormAnimationPlugin
08-10
**jQuery动画表单插件FormAnimationPlugin详解** 在网页交互设计中，表单验证和反馈是不可或缺的一部分。jQuery动画表单插件FormAnimationPlugin专为此目的而设计，它旨在为用户提供一种优雅、友好的方式来提示错误...
jQuery进阶
z_ipython的博客
06-11 195
添加和删除html内容 append（） 在选定元素的内部追加一个元素 Before（） 在选定元素的前边添加一个元素 Remove（） 移除指定元素以及当中的子元素，选择器要用好 Empty（） 清空一个元素当中的子元素 修改样式 addClass（） removeClass（） 计时器： 设置计时器 setTimeout 指定时间之后执行指定函数，2秒之后切换背景颜色 ...
jquery进阶
troysps的博客
05-15 462
jquery 进阶 jquery特殊效果 fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 toggle() 切换元素的可见状态 slideDown() 向下展开 slideUp() 向上卷起 slideToggle() 依次展开或卷起某个元素 &lt;!DOCTYPE html&gt; &lt;html lang="en...
jQuery学习笔记（8）——插件进阶
liuyueyi1995的博客
11-29 311
jQuery插件进阶 之前看书写过jQuery插件的内容，但是实际使用和看大神的代码的过程中，才发现jQuery插件的博大精深。
Element源码系列——Form以及Form-item组件
热门推荐
马骏超的博客
08-02 3万+
Element源码系列——Form、Form-item组件 Element源码系列——Form、Form-item组件 序言 控件组成 数据收集 校验数据 提交数据 总结 序言 Element团队将组件主要分为Basic、Form、Data、Notice、Navigation、Others几大类. 如果您跟我一样学习到Form大类的时候,先看Form组件绝对没...
addEventListener和attachEvent以及element.onclick的区别
weixin_30394333的博客
09-01 173
attachEvent是ie添加事件处理程序，接收两个参数，其中事件类型名称要加"on"， 可以添加多个事件处理程序，按照添加顺序相反的顺序触发; addEventListener是给非ie添加事件处理程序，接收三个参数，第一个是事件名，不需要加“on”， 第二个是绑定的函数，第三个参数是一个布尔值，是事件的方式，意思是是否使用useCatch方式， 如果是false，就使用传统的冒泡方式...
SenchaTouch添加自定义事件
王宏亮的Blog
04-17 382
//添加html元素自定义事件 var me = this; me.element.on('tap',function(){ //必须是element         console.log('tap'); },me); //具体到哪个元素响应事件用代理delegate me.element.addListener({ // on 和 addListener 都行     d
回调函数style
幸福有多远
07-25 214
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Co...
jquery中常用方法
99的博客
09-19 324
toFixed() 方法 定义和用法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。 语法 NumberObject.toFixed(num) 参数 描述 num 必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用
Element-UI 实现树形选择器
凝弧
09-29 2万+
https://wildye.cn/posts/1ab23fc5/ 组件调用 &lt;template&gt; &lt;!-- 行模式 --&gt; &lt;el-form inline&gt; &lt;el-form-item label="inline 默认："&gt; &lt;select-tree :options="options" v-model=&q
JavaScript与jQuery进阶：深入理解原型链
"进阶篇---原型链-JQUERY的PPT详细，明了适合初学者" 在JavaScript中，原型链是一种机制，它允许对象继承其他对象的属性和方法。每个JavaScript对象都有一个内部属性`__proto__`，这个属性指向创建该对象的构造函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值