js自调用匿名函数与内部实例化封装插件

时间：2021-02-04 19:12:49

自调用匿名函数实现方式

  • 方法一(注意：前面的;不要省略，可以防止前面的语句缺少;结尾)
;(function (win, $) {
//handle
})(window, jQuery);
  • 方法二
!function (win, $) {
//handle
}(window, jQuery);
  • 方法三
(function (win, $) {
 //handle
}(window, jQuery));

下面是一个简单插件案例

请自行引入jquery类库，点击li能够在控制台console里面打印相应内容（通过以上三种方式任意一种都可以实现）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body>
<h4>匿名自调用函数封装插件</h4>
<p>please click F12, see console result.请按F12查看控制台console内容</p>
<ul id="list">
<li class="item">clik me show in console is apple</li>
<li class="item">clik me show in console is banana</li>
<li class="item">clik me show in console is orange</li>
<li class="item">clik me show in console is grape</li>
</ul>
<script src="http://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script>
 ;(function (win, $) {
var plugin = function (item) {
this.item = $(item);
this.clickEvent();
 };
 plugin.prototype.clickEvent = function () {
this.item.click(function(){
 console.log($(this).text());
 });
 };
 plugin.init = function (itemLists) {
var _this = this;
 itemLists.each(function (key, item) {
new _this(item);
 });
 };
 win.MyTapPlugin = plugin;
 })(window, jQuery);
</script>
<script>
 MyTapPlugin.init($('#list .item'));
</script>
</body>
</html>

封装插件注意事项

  • 内部实例化一定要弄明白传入的是对象还是数组。如果是对象，直接用new this(selector) 实例化；如果是数组，则用for (){} 或者 each() 循环的方式实例化。另外不得不提的是each循环的this指向问题，可以参考上面的案例来实现

  • jquery传入的对象，实例化后出来的item是dom节点，需要用$(item) 来恢复jquery成对象

欢迎点赞，谢谢关注！！！ ：）

标签：

相关文章