jQuery，解决命名冲突的问题

亮学长

已于 2024-01-25 10:44:38 修改

阅读量120

点赞数

文章标签：前端

于 2023-11-18 13:58:23 首次发布

本文链接：https://blog.csdn.net/formylovetm/article/details/134477209

版权

jquery源码解析noConflict

(function (global, factory) {
  "use strict";
  if (typeof module === "object" && typeof module.exports === "object") {
    module.exports = global.document
      ? factory(global, true)
      : function (w) {
          return factory(w);
        };
  } else {
    factory(global);
  }
})(
  typeof window !== "undefined" ? window : this,
  function (window) {
    var jQuery;
    var _jQuery = window.jQuery, // 1.在把jQuery挂到window之前，把之前的window的jQuery存起来(此时的window.jQuery很有可能是其他库声明的)
      _$ = window.$;
    // 当用户用到了noConflict，说明用户很想用window.$或者window.jQuery，这个变量名，但是又不想跟jquery库有关联
    // 此时用户要使用jquery库方法，就用noConflict函数返回值jQuery，如下步骤5
    jQuery.noConflict = function (deep) {
      // 3.因为下面的步骤2，导致了此时window.$就是我自己的jQuery，那么就还给你
      if (window.$ === jQuery) {
        window.$ = _$;
      }
      // 4.因为下面的步骤2，导致了此时window.jQuery就是我自己的jQuery，那么就还给你
      if (deep && window.jQuery === jQuery) {
        window.jQuery = _jQuery;
      }

      return jQuery; // 5.返回自己的jQuery库，给用户使用
    };
    window.jQuery = window.$ = jQuery; // 2.把局部的jQuery挂到window上
  }
);

使用noConflict(true)，把$和jQuery名字都给别人

<body>
    <script>
        var $ = 'zan'
        var jQuery = 'lan'
    </script>
    <script src="./jquery.js"></script>
    <script>
        console.log(jQuery, '11111'); // 打印jquery函数
        console.log($, '22222'); // 打印jquery函数
        console.log(jQuery.noConflict(true), '33333');// 打印jquery函数
        console.log($, '44444');// zan 44444
        console.log(jQuery, '55555');// lan 55555
    </script>
</body>

使用noConflict，只把$名字都给别人

<body>
    <script>
        var $ = 'zan'
        var jQuery = 'lan'
    </script>
    <script src="./jquery.js"></script>
    <script>
        console.log(jQuery, '11111'); // 打印jquery函数
        console.log($, '22222'); // 打印jquery函数
        console.log(jQuery.noConflict(), '33333');// 打印jquery函数
        console.log($, '44444');// zan 44444
        console.log(jQuery, '55555');// 打印jquery函数
    </script>
</body>

noConflict原理

下面是部分jquery源码

(function (global, factory) {
  "use strict";
  if (typeof module === "object" && typeof module.exports === "object") {
    module.exports = global.document
      ? factory(global, true)
      : function (w) {
          if (!w.document) {
            throw new Error("jQuery requires a window with a document");
          }
          return factory(w);
        };
  } else {
    factory(global);
  }
})(typeof window !== "undefined" ? window : this, function (window, noGlobal) {
  var jQuery = function () {};
  var _jQuery = window.jQuery; // 记录别人声明的jQuery变量值
  var _$ = window.$;// 记录别人声明的$变量值
  jQuery.noConflict = function (deep) {
    if (window.$ === jQuery) {
      window.$ = _$; // 还原别人声明的$值
    }
    if (deep && window.jQuery === jQuery) {
      window.jQuery = _jQuery;// 还原别人声明的jQuery值
    }
    return jQuery;
  };
  return jQuery;
});

亮学长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery，解决命名冲突的问题

/ 打印jquery函数log'22222';// 打印jquery函数lognoConflicttrue'33333';// 打印jquery函数log'44444';log'55555';
复制链接

扫一扫