javascript - 关于多个前端框架中消除$符冲突的疑问

问题描述

问 题

项目中同时使用了jQuery和zepto这两种框架，注意到一段js代码如下：

function slideToggleMenu() {
    jQuery(function ($) {
        $("#showMenu,.kelelogo").unbind("click");
        $("#showMenu,.kelelogo").click(function (e) {
            e.preventDefault() || e.stopPropagation();
            $("#mainMenu").slideToggle();
        });
    });
}

前辈解释说这里的$符代表了jQuery，而页面中其余部分的$都代表zepto,请问以下这种结构怎么理解？

jQuery(function($){});

我只知道(function($){}(jQuery))的形式可以消除$符的冲突

解决方案

首先要清楚形参和实参的概念。
然后要知道jQuery这个库里定义了一个函数，名叫jQuery。你展示的这段代码就是调用了一次jQuery函数，参数是一个回调函数。
这样调用jQuery的话，jQuery就会稍后在执行这个回调函数的时候，传入一个参数，值就是jQuery本身。因此在这个回调函数中，第一个参数就是jQuery本身，也就解决了冲突。
如果你明白了形参的概念，你就会明白这是怎么工作的。并且也会明白为什么下面的代码是对的：

jQuery(function (a) {
    // 这里的a就是jQuery
    a("#shouMenu, .kelelogo").unbind("click");
});

这篇关于javascript - 关于多个前端框架中消除$符冲突的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！