最简单的原生js和jquery插件封装

最新推荐文章于 2026-08-19 21:38:20 发布

转载最新推荐文章于 2026-08-19 21:38:20 发布 · 216 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/jason1991/p/9177692.html

本文详细介绍了一种自定义JavaScript插件的封装方法，通过使用自执行函数避免变量污染，利用extend方法合并用户参数，实现了插件的初始化、事件绑定等功能，并提供了具体的代码示例及使用说明。

最近在开发过程中用别人的插件有问题，所以研究了一下，怎么封装自己的插件。

如果是制作jquery插件的话。就将下面的extend方法换成 $.extend 方法，其他都一样。

总结一下实现原理：

将方法体封装在一个自执行的函数体里面，防止变量污染。

默认参数在options设置，extend方法有由for-in遍历得到，使得参数为用户制定参数。
this.init是项目初始化，init，extend，event方法都是在demo对象的原型链上面的方法，方便调用。
将自己的方法直接卸载event方法里面就可以，调用参数调用this.options.x 就可以使用。

下列代码封装成js，引入，如何使用方法在下面.

(function () {
        'use strict';
        var demo = function (options) {
            //demo("options") 或者 new demo("options")都可以使用demo方法
            if(!(this instanceof demo)){return new demo(options)};

            // 参数合并 extend方法体在下面
            this.options = this.extend({
                "x": "1",
                "y": "2",
                "z": "3"
            }, options);
            this.init();
            //初始化
        };
        demo.prototype = {
            init: function () {
                this.event();
            },
            // 参数合并方法体
            extend: function (obj, obj2) {
                for (var key in obj2) {
                    obj[key] = obj2[key];
                //    确保参数唯一
                }
                return obj
            },
            event:function () {
                var _this = this;

                //方法调用前的回调
                _this.options.open&&_this.options.open();

                //此处执行方法体，使用 this.options.x\this.options.y\this.options.z进行访问

                //打印参数
                console.log(this.options.x)

                // 方法结束的回调
                _this.options.close&&_this.options.close();
            }
        }
        //暴露对象
        window.demo = demo;
    }());


// 使用方法 demo("args") 和 new demo("args")
   demo({
        "x": "111",
        "y": "3",
        "c":"ccc",
        open:function () {
            console.log("start")
        },
        close:function () {
            console.log("end")
        }
    });