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

Question

项目中同时使用了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))的形式可以消除$符的冲突

Answer 1

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

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

Answer 2

jQuery(function($){
    //把$作为jQuery的别名, 只有在这函数里有效
});

jQuery 本身就有考虑到多库共存, 最简单就是用
var jq = jQuery.noConflict();

如果是插件, 就用

(function($){

}(jQuery));