位置：广州松河 > 技术支持 > 如何封装jQuery插件

如何封装jQuery插件

来源：网络整理时间：2023/2/14 0:57:52 共 3708 浏览

大神请忽略此文章，本文适用于新手。

很多刚刚开始接触js的网友可能会觉得js很神奇，如果没有一些编程基础可能觉得插件是可远观而不可触摸的。我也是这样子的，没有人教只能依靠自己学习没有讲解，关键之处完全靠自己摸索。

我最开始想封装一个自己的插件的时候花了一个星期的时间阅读了大量的网友提供的插件封装方法，有可能是太深奥了吧也可能是没有说得太明白，总是会出现各种问题。今天乘着刚好有一个项目的需求，我把模块拿出来简单的封装成了一个插件，功能简单容易学懂。

第一步：理解为什么要封装插件
个人总结一下：
1、代码可以复用
2、便于维护和管理
3、提升自身的能力
4、避免各个相同功能组件的干扰，以及一些作用域会相互影响的问题

第二步：理解函数
学习过js的网友对于函数应该不会默认，举个例子：

function alertMsg(){
   alert('hello word!');
}

    1
    2
    3

这是一个简单的函数，需要使用的时候只需使用以下代码激活即可：

<script>
alertMsg();
</script>

那么，如果需要传递参数呢？那改成下面这样子：

function alertMsg(obj){
   alert(obj);
}

alertMsg('hello world!');



一个功能模块其实就是n个函数之间的作用，而一个插件就是把n个功能模块安装一定的规范整合可以在多处环境下使用且互不影响。

第三步：理解插件封装
jQUery的标准封装方式

;(function ($) {
      // 插件内容 ...
})(jQuery);

上面就是一个简单插件的写法。封装jQuery插要依靠"$.fn"方法，该方法可以向jQuery添加新的方法。
举个例子：

$.fn.alertMsg = function () {
    alert('我是一个插件');
}

上面是一个插件，调用方法：

$("#test").alertMsg ();

明白上述内容之后，你已经了解怎么封装和调用了。

第四步：向外暴露参数
那我们常见的插件都是可以自己配置参数的，这如何实现呢？
这里需要"$.extend();"方法。

    $.extend(object);为扩展jQuery类本身.为类添加新的方法。
    $.fn.extend(object);给jQuery对象添加方法。

举个例子：

$(function ($) {
    $.fn.alertMsg = function (options) {
        var defaults = {
            Event : "click",
            msg : "我是一个插件!"
        }
        var settings = $.extend(defaults, options);
        var $this = $(this);

        $this.on(options.Event, function (e) {
            alert(options.msg);
        });
    }
});

调用方法：

$(function () {
    $("#btn").alertMsg(); //设置不传参数的用法，插件执行时会启动默认参数
});

//传递参数则改成这样子：
$(function () {
     $("#btn").alertMsg({
        Event : "click",
        msg : “hello world!"
    });
});

如果上述内容都已经理解透彻，那么你已经知道如果来分装属于你自己的jQuery插件了。
本文前段提及了本来的来由，下面附上地址供大家参考：
https://github.com/obear997/txtscroll
这是一个简单的能支持响应式的文本滚动插件，有兴趣的网友可以收藏和完善其他功能，有更好的想法和代码改进建议，非常乐意接受。

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：C# 消息队列 | ·下一条：jQuery 插件封装的方法