JS原生封装

我们在封装的时候会把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>

就是这样了。一个超级简单的封装

转载于:https://my.oschina.net/u/3647114/blog/1786664