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

来源：互联网发布：ubuntu输入法无法使用编辑：程序博客网时间：2024/05/08 11:36

自调用匿名函数实现方式

方法一(注意：前面的;不要省略，可以防止前面的语句缺少;结尾)

;(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成对象

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

阅读全文

0 0