jquery 这些小技巧你懂吗

Love_vermouth

于 2018-08-24 14:22:47 发布

阅读量230

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/u010238381/article/details/81156069

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jquery有很多奇淫技巧，它的结构清晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性。

这里仅对其中的一些小技巧做个总结。

1、jquery闭包

把当前沙箱需要的外部变量通过函数参数引入进来

只要保证参数对内提供的接口的一致性，你可以随意替换传进来的这个参数

(function(window, undefined) {
    // jQuery 代码
    undefined = 20;
    console.log(undefined);  // 20
})(window);

(function(w, u) {
    // jQuery 代码
    console.log(w);  // window
    u = 20;
    console.log(u);  // 20
})(window);

(function(window,undefined) {
    // jQuery 代码
     undefined = 20;
     console.log(undefined); // 20
 })(window, undefined);
 undefined = 20;
 console.warn(undefined); // undefined

2、jquery 无 new 构造

// 无 new 构造
// s也能访问jq原型链上的所有方法
var s = $('#test');
 
// 当然也可以使用 new
// q能访问jq原型链上的所有方法
var q = new $('#test');

(function (window, undefined) {
    var
        // ...
        jQuery = function (selector, context) {
            // 实例化方法 jQuery() 实际上是调用了其拓展的原型方法 jQuery.fn.init
            return new jQuery.fn.init(selector, context, rootjQuery);
        },

        // jQuery.prototype 即是 jQuery 的原型，挂载在上面的方法，即可让所有生成的 jQuery 对象使用
        jQuery.fn = jQuery.prototype = {
            // 实例化化方法，这个方法可以称作 jQuery 对象构造器
            init: function (selector, context, rootjQuery) {
                // ...
            }
        },

        jQuery.fn.init.prototype = jQuery.fn;

})(window);

1）使用 $('xxx') 这种实例化方式，其内部调用的是 return new jQuery.fn.init(selector, context, rootjQuery) ，即构造实例是交给 jQuery.fn.init() 方法去完成。

2）将 jQuery.fn.init 的 prototype 属性设置为 jQuery.fn，那么使用 new jQuery.fn.init() 生成的对象的原型对象就是 jQuery.fn ，所以挂载到 jQuery.fn 上面的函数就相当于挂载到 jQuery.fn.init() 生成的 jQuery 对象上，所有使用 new jQuery.fn.init() 生成的对象也能够访问到 jQuery.fn 上的所有原型方法。

3）也就是实例化方法存在这么一个关系链

jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ;
new jQuery.fn.init() 相当于 new jQuery() ;
var obj1 = jQuery() 返回的是 new jQuery.fn.init()，var obj2 = new jQuery()，obj1和obj2是相当的，所以我们可以无 new 实例化 jQuery 对象。

3、jQuery.fn.extend 与 jQuery.extend

jQuey 内部用extend 方法来扩展静态方法或实例方法， jQuery 插件开发的时候也会用到它。

1）jQuery.extend(object) 为扩展 jQuery 类本身，为类添加新的静态方法；

2）jQuery.fn.extend(object) 给 jQuery 对象添加实例方法，也就是通过这个 extend 添加的新方法，实例化的 jQuery 对象都能使用，因为它是挂载在 jQuery.fn 上的方法（jQuery.fn = jQuery.prototype ）。

1）jQuery.extend(): 把两个或者更多的对象合并到第一个当中，

2）jQuery.fn.extend()：把对象挂载到 jQuery 的 prototype 属性，来扩展一个新的 jQuery 实例方法。

也就是说，使用 jQuery.extend() 拓展的静态方法，我们可以直接使用 $.xxx 进行调用（xxx是拓展的方法名），

而使用 jQuery.fn.extend() 拓展的实例方法，需要使用 $().xxx 调用。

jQuery.fn.extend({
    a: function() {
        console.log('使用$(xx).xxx调用');
    }
});

jQuery.extend({
    b: '使用$.xxx调用'
})

$().a();
$.b;

需要注意的是这一句 jQuery.extend = jQuery.fn.extend = function() {} ，也就是 jQuery.extend 的实现和 jQuery.fn.extend 的实现共用了同一个方法，但是为什么能够实现不同的功能了，这就要归功于 Javascript 强大（怪异？）的 this 了。

1）在 jQuery.extend() 中，this 的指向是 jQuery 对象(或者说是 jQuery 类)，所以这里扩展在 jQuery 上；

2）在 jQuery.fn.extend() 中，this 的指向是 fn 对象，前面有提到 jQuery.fn = jQuery.prototype ，也就是这里增加的是原型方法，也就是对象方法。

4、jQuery 的链式调用及回溯

只需要在要实现链式调用的方法的返回结果里，返回 this ，就能够实现链式调用了。

var s = {
    a: function() {
        console.log(1);
        return this;
    },
    b: function() {
        console.log(2);
        return this;
    },
    c: function() {
        console.log(3);
        return this;
    }
};

s.a().b().c();

jQuery 完整的链式调用、增栈、回溯通过 return this 、 return this.pushStack() 、return this.prevObject 实现

jQuery.fn = jQuery.prototype = {
    // 将一个 DOM 元素集合加入到 jQuery 栈
    // 此方法在 jQuery 的 DOM 操作中被频繁的使用, 如在 parent(), find(), filter() 中
    // pushStack() 方法通过改变一个 jQuery 对象的 prevObject 属性来跟踪链式调用中前一个方法返回的 DOM 结果集合
    // 当我们在链式调用 end() 方法后, 内部就返回当前 jQuery 对象的 prevObject 属性
    pushStack: function (elems) {
        // 构建一个新的jQuery对象，无参的 this.constructor()，只是返回引用this
        // jQuery.merge 把 elems 节点合并到新的 jQuery 对象
        // this.constructor 就是 jQuery 的构造函数 jQuery.fn.init，所以 this.constructor() 返回一个 jQuery 对象
        // 由于 jQuery.merge 函数返回的对象是第二个函数附加到第一个上面，所以 ret 也是一个 jQuery 对象，这里可以解释为什么 pushStack 出入的 DOM 对象也可以用 CSS 方法进行操作
        var ret = jQuery.merge(this.constructor(), elems);

        // 给返回的新 jQuery 对象添加属性 prevObject
        // 所以也就是为什么通过 prevObject 能取到上一个合集的引用了
        ret.prevObject = this;
        ret.context = this.context;

        // Return the newly-formed element set
        return ret;
    },
    // 回溯链式调用的上一个对象
    end: function () {
        // 回溯的关键是返回 prevObject 属性
        // 而 prevObject 属性保存了上一步操作的 jQuery 对象集合
        return this.prevObject || this.constructor(null);
    },
    // 取当前 jQuery 对象的第 i 个
    eq: function (i) {
        // jQuery 对象集合的长度
        var len = this.length,
            j = +i + (i < 0 ? len : 0);

        // 利用 pushStack 返回
        return this.pushStack(j >= 0 && j < len ? [this[j]] : []);
    }
}

总的来说，

1）end() 方法返回 prevObject 属性，这个属性记录了上一步操作的 jQuery 对象合集；

2）而 prevObject 属性由 pushStack() 方法生成，该方法将一个 DOM 元素集合加入到 jQuery 内部管理的一个栈中，通过改变 jQuery 对象的 prevObject 属性来跟踪链式调用中前一个方法返回的 DOM 结果集合

3）当我们在链式调用 end() 方法后，内部就返回当前 jQuery 对象的 prevObject 属性，完成回溯。

5、jQuery方法的重载

// 获取 title 属性的值
$('#id').attr('title');
// 设置 title 属性的值
$('#id').attr('title','jQuery');

function addMethod(obj, name, f) {
    var old = obj[name];
    obj[name] = function () {
        if (f.length === arguments.length) {
            return f.apply(this, arguments);
        } else {
            return old.apply(this, arguments);
        }
    }
}

var people = {
    name: ["张三", "李四", "王五"]
};

var find0 = function () {
    return this.name;
};

var find1 = function (name) {
    var arr = this.name;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === name) {
            return arr[i] + "在" + i + "位";
        }
    }
}

function test(a) {
    console.log('形参个数', test.length);  // 1
    console.log('实参个数', arguments.length);  // 0
}

test();


addMethod(people, 'find', find0);
addMethod(people, 'find', find1);
console.log(people.find("王五"));

6、jQuery 变量冲突处理

当需要处理冲突的时候，调用静态方法 noConflict()，让出变量的控制权

(function(window, undefined) {
    var
        // Map over jQuery in case of overwrite
        // 设置别名，通过两个私有变量映射了 window 环境下的 jQuery 和 $ 两个对象，以防止变量被强行覆盖
        _jQuery = window.jQuery,
        _$ = window.$;
 
    jQuery.extend({
        // noConflict() 方法让出变量 $ 的 jQuery 控制权，这样其他脚本就可以使用它了
        // 通过全名替代简写的方式来使用 jQuery
        // deep -- 布尔值，指示是否允许彻底将 jQuery 变量还原(移交 $ 引用的同时是否移交 jQuery 对象本身)
        noConflict: function(deep) {
            // 判断全局 $ 变量是否等于 jQuery 变量
            // 如果等于，则重新还原全局变量 $ 为 jQuery 运行之前的变量（存储在内部变量 _$ 中）
            if (window.$ === jQuery) {
                // 此时 jQuery 别名 $ 失效
                window.$ = _$;
            }
            // 当开启深度冲突处理并且全局变量 jQuery 等于内部 jQuery，则把全局 jQuery 还原成之前的状况
            if (deep && window.jQuery === jQuery) {
                // 如果 deep 为 true，此时 jQuery 失效
                window.jQuery = _jQuery;
            }
 
            // 这里返回的是 jQuery 库内部的 jQuery 构造函数（new jQuery.fn.init()）
            // 像使用 $ 一样尽情使用它吧
            return jQuery;
        }
    })
}(window)

jQueryå²çªå¤çæµç¨å¾

那么让出了这两个符号之后，是否就不能在我们的代码中使用 jQuery 或者呢 $ 呢？莫慌，还是可以使用的：

// 让出 jQuery 、$ 的控制权不代表不能使用 jQuery 和 $ ，方法如下：
var query = jQuery.noConflict(true);
 
(function($) {
 
// 插件或其他形式的代码，也可以将参数设为 jQuery
})(query);
 
//  ... 其他用 $ 作为别名的库的代码

7、短路表达式

var a = 1, b = 0, c = 3;
 
var foo = a && b && c,    // 0 ,相当于 a && (b && c)
    bar = a || b || c;   // 1

1、在 Javascript 的逻辑运算中，0、""、null、false、undefined、NaN 都会判定为 false ，而其他都为 true ；

2、因为 Javascript 的内置弱类型域 (weak-typing domain)，所以对严格的输入验证这一点不太在意，即便使用 && 或者 || 运算符的运算数不是布尔值，仍然可以将它看作布尔运算。虽然如此，还是建议如下：

if(foo){ ... }     //不够严谨
if(!!foo){ ... }   //更为严谨，!!可将其他类型的值转换为boolean类型

8、$.trim

let core_version = "1.19.2";

let core_Trim = core_version.trim;

function trim(data) {
    return core_Trim.call(data);
}
console.log(trim("  abds  "));

// 源码
core_version = "1.9.0",
core_trim = core_version.trim,
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,

trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
  function( text ) {
    return text == null ?
      "" :
      core_trim.call( text );
  } :

  // Otherwise use our own trimming functionality
  function( text ) {
    return text == null ?
      "" :
      ( text + "" ).replace( rtrim, "" );
  }

var core_trim = String.prototype.trim; if (core_trim && !core_trim.call("\uFEFF\xA0")) 相当于： if (String.prototype.trim && "\uFEFF\xA0".trim() !== "") 高级的浏览器已经支持原生的String的trim方法，但是jQuery还为了避免它没法解析全角空白，所以加多了一个判断："\uFEFF\xA0".trim() !== ""

\uFEFF是utf8的字节序标记，详见：字节顺序标记 "\xA0"是全角空格如果以上条件成立了，那就直接用原生的trim函数就好了，展开也即是：

$.trim = function( text ) {
    return text == null ?
        "" :
        text.trim();
}

如果上述条件不成立了，那jQuery就自己实现一个trim方法：

$.trim = function( text ) {
    return text == null ?
        "" :
        ( text + "" ).replace( rtrim, "" );
}

参考文章：

【深入浅出jQuery】源码浅析--整体架构

Love_vermouth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 这些小技巧你懂吗

jquery有很多奇淫技巧，它的结构清晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性。这里仅对其中的一些小技巧做个总结。 1、jquery闭包把当前沙箱需要的外部变量通过函数参数引入进来只要保证参数对内提供的接口的一致性，你可以随意替换传进来的这个参数(function(window, undefined) { // jQuery 代码 undefine...
复制链接

扫一扫

专栏目录