美文网首页我爱编程
jQuery之noConflict方法

jQuery之noConflict方法

作者: 西瓜胖胖 | 来源:发表于2018-01-08 00:01 被阅读31次

    源码如下:

      var
    
        // Map over jQuery in case of overwrite
            _jQuery = window.jQuery,
    
        // Map over the $ in case of overwrite
        jQuery.noConflict = function( deep ) {
            if ( window.$ === jQuery ) {
                window.$ = _$;
            }
    
            if ( deep && window.jQuery === jQuery ) {
                window.jQuery = _jQuery;
            }
    
            return jQuery;
        };
    
    // Expose jQuery and $ identifiers, even in AMD
    // (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
    // and CommonJS for browser emulators (#13566)
        if ( !noGlobal ) {
            window.jQuery = window.$ = jQuery;
        }
    

    第一种情况:

        <script src="./jquery3.2.1.js"></script>
        <script>
            var $ = 111;
            $(function(){
                console.log('11111111')
            }) 
        </script>
    

    当给$赋值111时,会引起变量名冲突,$名字被别人占用,代码无法执行。

       <script>
            var jq = $.noConflict()
            var $ = 111;
            jq(function(){
                console..log('11111111')
            }) 
        </script>
    

    这时noConflict()方法派上了用场,给jQuery取了别名jq,$让给别人,解决变量名冲突。

    第二种情况:

        <script>
            var $ = 11111;
        </script>
        <script src="./jquery3.2.1.js"></script>
        <script>
            var jq = $.noConflict()
            jq(function(){
                console.log($) // 1111
            }) 
        </script>
    

    看源码知道在加载jquery时,已经把冲突的变量名的值存到_jQuery或者_$; 加载jquery后 ,$又变成jQuery ,用noConflict方法解决变量名冲突后,jquery放弃使用$或者jQuery的名字,把_jQuery 或者_$的值重新赋给$或者jQuery,jquery使用jq别名。

    相关文章

      网友评论

        本文标题:jQuery之noConflict方法

        本文链接:https://www.haomeiwen.com/subject/kwkvnxtx.html