最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件。
如果是制作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") } });