JQuery 的各种初始化方法

小麦麦子 发布于 2015/07/17 16:50
阅读 2K+
收藏 1

      JQuery是web前端的常用技术,在前端开发、甚至phpJavapythonweb开发中,我们经常需要用到这门技术。因此jQueryweb开发中,非常重要的一个技术,也是初学者必须掌握的一个技术。今天小编就和大家分享分享JQuery的那些事儿。

我们从基础的源码开始分享吧,jQuery 源码:

(function( global, factory ) {

// 平时的时候moduleundefined

if ( typeof module === "object" && typeof module.exports === "object" ) {

// For CommonJS and CommonJS-like environments where a proper window is present,

// execute the factory and get jQuery

// For environments that do not inherently posses a window with a document

// (such as Node.js), expose a jQuery-making factory as module.exports

// This accentuates the need for the creation of a real window

// e.g. var jQuery = require("jquery")(window);

// See ticket #14549 for more info

// 如果不是undefined,说明调用了一些特殊的js文件,如Node.js或者requiredJs

// 再用到这些的时候,是需要用module.exports来处理的

module.exports = global.document ?

factory( global, true ) : // 如果是requiredJS之类的,那么是不需要把jQuery对象作为全局变量的,所以noGlobaltrue

function( w ) {

if ( !w.document ) {

throw new Error( "jQuery requires a window with a document" );

}

return factory( w );

};

} else {

// 这个是默认的调用方法

factory( global );

}

 

// Pass this if window is not defined yet

}(typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

www.maiziedu.com

var

// Map over jQuery in case of overwrite

// 获取当前的window.jQuery对象,保存起来,用于noConflict

_jQuery = window.jQuery,

 

// Map over the $ in case of overwrite

  // 获取当前的window.$对象,并保存起来,用于noConflict

  _$ = window.$;

 

// 获取jQuery对象,并把全局变量还给原本的值

// 这样做的一个好处是,如果需要用到两个版本的jQuery,那么就可以通过这个来生成两个版本的jQuery对象、

// 或者如果有其他的js插件同样占用了$这个符号,那么就可以通过noConflict来还原。

jQuery.noConflict = function( deep ) {

    // 如果用noConflict的话,那么就会让出window.$对象给原本的值

    if ( window.$ === jQuery ) {

        window.$ = _$;

    }

 

    // 如果用deep的话,那么同时也会让出window.jQuery对象给原本的值

    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)

// 如果noGlobalnull的话(反则为true),那么就把jQuery设置为全局变量来使用

if ( typeof noGlobal === strundefined ) {

    window.jQuery = window.$ = jQuery;

}

}));

 

粘贴一点麦子学院 www.maiziedu.com 的noconflict代码(略作修改)

<script type="text/javascript" src="jquery.1.10.js"></script>

<script type="text/javascript" src="jquery.11.js"></script>

 

<script type="text/javascript">

var jq = $.noConflict();

// 在下面使用的$jquery.1.10的代码

// jq和jQuery使用的是1.11的代码

</script>

 

或者另外一种方法

 

<script type="text/javascript" src="other_lib.js"></script>

<script type="text/javascript" src="jquery.js"></script>

 

<script type="text/javascript">

$.noConflict();

jQuery(document).ready(function($) {

// 使用 jQuery $ 的代码

});

// 使用其他库的 $ 的代码

</script>

 

或者使用$.noConflict(true)

 

<script type="text/javascript" src="jquery.1.10.js"></script>

<script type="text/javascript" src="jquery.11.js"></script>

 

<script type="text/javascript">

var jq = $.noConflict(true);

// 在下面使用的$jQueryjquery.1.10的代码

// jq使用的是1.11的代码

</script>

    从以上JQuery 的源码中,我们也可看出其全局变量、noconflict 和兼容各种 js 的初始化方法,还没掌握的亲,赶紧学起来,这将让你的web开发更加顺畅哦。

 

加载中
返回顶部
顶部