Jquery 实用技巧
Posted 撩前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery 实用技巧相关的知识，希望对你有一定的参考价值。
New Version: v3.2.1
/* 本次分享，纯属个人理解 */
// 用一个函数域包起来，就是所谓的沙箱
// 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局
// 把当前沙箱需要的外部变量通过函数参数引入进来
// 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
(function(window, undefined) {
// jQuery 代码
})(window);
来源于：https://www.cnblogs.com/coco1s/p/5261646.html
一、jq 闭包结构
(function(window, factory) {
// jQuery 代码
})( typeof window !== "undefined" ? window : this, function() {
// jQuery 代码
} );
*常见面试题：js闭包
二、jq 扩展方式（静态、实例）
$.extend() 或 jQuery.extend() 静态方法
$.fn.extend() 和 jQuery.fn.extend() 实例方法
使用方式：
1)、 $.fun()
全局方法使用
2)、$().fun()
在这个 DOM 上操作，函数中的 this 的类型为 Object
* 你是否尝试过在控制台直接输出" $ "？
jQuery文件加载和未加载的页面对比。
ƒ $(selector, [startNode]) { [Command Line API] }
ƒ (a,b){return new n.fn.init(a,b)}
分析源码：
1、定义方法。90行：
var version = "3.2.1",
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
},
2、赋值。10246行：
// 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;
}
3、noGlobal 的由来。16行：
"use strict";
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 have a `window` with a `document`
// (such as Node.js), expose a 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.
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 );
}
4、最后一行。return jQuery;
四、js 的链式调用 （ javascript设计模式 --- 方法的链式调用）
layout.loading().verify().init();
这处请访问源码：https://www.bugbank.cn/js/layout.js?v=22018
在此感谢我的导师（S.M）
附：https://github.com/532604872/blogs/blob/master/bkframe.js
问题解答处：
1、闭包：能够获取其他函数内部变量的函数。
2、请自己在控制台尝试。
以上是关于Jquery 实用技巧的主要内容，如果未能解决你的问题，请参考以下文章