我们在封装的时候会把js代码放到一个自执行函数里面,这样可以防止变量冲突。
?
1 2 3 4 5 6 7 | ( function (){ ...... ...... }()} |
然后再创建一个构造函数
?
1 2 3 4 5 6 7 8 9 | ( function (){ var demo = function (options){ ...... } }()) |
把这个函数暴露给外部,以便全局调用
?
1 2 3 4 5 6 | ( function (){ var demo = function (options){ ...... } window.demo = demo; }()) |
其实现在你可以直接调用了,封装好了,虽然没实现什么功能
?
1 2 3 4 | var ss = new demo({ x:1, y:2 }); |
或者
?
1 2 3 4 | new demo({ x:2, y:3 }); |
然后传参怎么搞呢,我们一个插件一般有一些必选参数或者可选参数,在我看来可选参数不过就是在插件里面给了默认值罢了。我们传的参数会覆盖插件中的默认参数,可以用$.extend({})覆盖
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ( function (){ var demo = function (options){ this .options = $.extend({ "x" : 1, "y" : 2, "z" : 3 },options) } window.demo = demo; }()) |
然后你可以在在初始化构造函数的时候执行一些操作
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | ( function (){ var demo = function (options){ this .options = $.extend({ "x" : "1" , "y" : "2" , "z" : "3" },options); this .init(); }; demo.prototype.init = function (){ alert( "x是" + this .options.x+ " y是" + this .options.y+ " z是" + this .options.z); }; window.demo = demo; }()); new demo({ "x" : "5" , "y" : "4" }); </script> |
就是这样了。一个超级简单的封装