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

  

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

如果是制作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") } });

 

posted @ 2018-06-13 14:36  徐大春  阅读(3688)  评论(0编辑  收藏  举报