jQuery源码分析6-扩展工具方法1

从355-840,用extend扩展了一系列的jQ工具方法。本次先看前几个方法和属性。

一、noConflict()

在一个项目中,我们往往不止使用一个库或者框架,那么对$的使用就会出现冲突(比如mootools)。此时就需要使用到noConflict这个避免冲突的方法。

noConflict: function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }
    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }
    return jQuery;
 }

当我们先引入一个使用$的库,在引入jQuery,像这样:

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

此时我们调用noConflict方法。此时window.$与jQuery是相等。会给window下的$重新赋值。而_$在一开始是有定义的,

_$ = window.$,_jQuery = window.jQuery,

在jQuery一开始运行时,就提前保留了window下的$和jQuery属性,尽管他们会在jQuery运行后被覆盖。

所以运行后,$又变回了加载jQuery库前的那个对象了。如果传了true参数,他也会将jQuery的控制权限给释放掉。

函数的最后return了jQuery对象自己,是为了让开发者可以重新命名jQuery对象。

var jq = $.noConflict();
jq('#box');

二、isReady

该属性表示DOM是否ready,在ready方法中有用处。

三、readyWait

数值,用于holdReady中计数。

四、holdReady()

该方法可以暂停或者恢复jQuery.ready()事件。

在后面的DOM加载中详细说明。

五、ready()

同holdReady方法,在后面的DOM加载中详细说明。

六、isFunction()

用于判断参数是否是function类型,利用的是type工具方法。实现如下:

return jQuery.type(obj) === "function";

七、isArray()

用于判断参数是否是array类型,也是使用的type方法。

八、isWindow()

判断参数是否是window对象。实现如下:

return obj != null && obj == obj.window;

以后在没有使用jQuery库的地方,可以尝试使用这个方法。

九、isNumeric()

判断参数是否是数字或者是数值型字符串。实现是:

return !isNaN( parseFloat(obj) ) && isFinite( obj );

这个参数的parseFloat形式必须是非NaN,且该值能转成有限的数字。

十、type()

用于判断参数的类型,与js自带的typeof不同,该方式可以具体到变量的类型。而不是子返回个object。

class2type = {}; // 93行
core_toString = Object.prototype.toString; // 37行
// 900行
jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(i,name) {
 class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

type: function( obj ) {
   return obj == null ?
       String( obj ) :
       class2type[ core_toString.call(obj) ] || "object";
}

jQ利用了object对象原型上的toSting方法,再利用call方法。每个变量都会输出[object 类型]这种格式,此时,我们只需要去class2type对象中按键匹配就行了。

这种判断方式不错,可以特别记忆下。

十一、isPlainObject()

判断参数是否是一个通过字面量形式{}或new Object创建的对象。

if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
    return false;
}
try {
    // Not own constructor property must be Object
    if ( obj.constructor &&
        !core_hasOwn.call(obj,"constructor") &&
        !core_hasOwn.call(obj.constructor.prototype,"isPrototypeOf") ) {
        return false;
    }
} catch ( e ) {
    // IE8,9 Will throw exceptions on certain host objects #9897
    return false;
}
// Own properties are enumerated firstly,so to speed up,// if last one is own,then all properties are own.
var key;
for ( key in obj ) {}

return key === undefined || core_hasOwn.call( obj,key );
....
// 38行
core_hasOwn = Object.prototype.hasOwnProperty,

首先第一个if过滤掉undefined、false、空字符串以及type类型不是object的,Dom节点,和window对象。

接着使用try..catch..防止ie8、9下的报错。当参数还有constructot,该属性是他本身就有的,且constructor的原型上自带了isPrototypeOf这属性时,将正常通过try中的if。

十二、isEmptyObject()

该方法用于判断参数是否是空对象。

 var name;
 for ( name in obj ) {
     return false;
 }
 return true;

利用for..in..遍历该参数是否有属性,若有则是含有属性,为非空对象,反之亦然。

十三、error()

用于控制台的error输出。

throw new Error( msg );

十四、parseHTML()

该方法用来解析html字符串。

parseHTML: function( data,context,scripts ) { // scripts是否解析script标签
    var parsed;
    if ( !data || typeof data !== "string" ) {
        return null;
    }
    if ( typeof context === "boolean" ) { // 对两个参数(无context)时进行特殊处理
        scripts = context;
        context = 0;
    }
    context = context || document;

    // Single tag
    if ( (parsed = rsingleTag.exec( data )) ) { // 单标签,创建他,所以text加不上。
        return [ context.createElement( parsed[1] ) ];
    }

    parsed = jQuery.buildFragment( [ data ],scripts ? null : [] );
    return jQuery.merge( [],(parsed.cacheable ? jQuery.clone( parsed.fragment ) : parsed.fragment).childNodes );
 }

第一个参数是html字符串。第二个参数是上下文环境,不赋值的话,就是默认的document。第三个参数是个布尔值,表示是否解析script标签。

第一个if过滤null、undefined、空字符串以及非字符串类型的值。

第二个if处理两个参数时的情况,将第二个参数的布尔值赋值给scripts。

context值取外部传入的或者是默认的document。第三个if,判断是否是单标签,当是单标签时,直接使用createElement方法创建他,返回的是数组形式的。

如果是多标签的话,会调用buildFragment()这个方法去创建这个方法等遇到时在解释。最后调用merge并return。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


问题背景 最近小伙伴提了一个希望提高后台下拉列表可操作性的需求,原因是下拉列表选项过多,每次下拉选择比较费时费力且容易出错,硬着头皮啃了啃前端知识,网上搜寻了一些下拉列表实现的资料,这里总结一下。 P
// n位随机数生成 function randomNum(n) { let sString = &quot;&quot;; let strings = &quot;abcdefghijklmnopq
HTML是HyperText Markup Language的简称,中文名称:超文本标记语言,它是一种用于创建网页的 标准标记语言
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
JavaScript 是脚本语言,是一种解释性脚本语言(代码不进行预编译)
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 一名开发者或设计师通常可以在一秒内指出优秀的设计,但对于糟糕的设计只需最多半
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 Excel是我们办公中常用的工具 ,它几乎能为我们处理大部分数据,友好的交互
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/8-tips-for-an-awesome-sign
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/what-is-deno-and-will-it-r
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/4-reasons-to-use-sass-in-y
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features-
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/sessionstorage-and-localst
一直以来,JavaScript使用数组和对象来定义和存放结构化数据, 在这篇文章中,我们将一起深挖另一种对象Map的一切,我们将会去了解它是什么、如何遍历、都包括什么属性和方法以及优缺点是什么。
由于CSS的出现,现在的网站风格已经与它们很早之前的样子有了很大的不同。CSS的出现为原本平平无奇的网页注入了活力。这也是网站的用户体验得到进一步进化的原因。这可能就是当今几乎所有的网站或多或少都在使
自苹果推出了iPhone应用商店以来,App成为了我们生活中不可或缺的一部分,而对于实体业务也是如此,现在各行业都在推出自己的App,但有没有人想过这样一种场景,如果自己的潜在客户还没有安装你的App
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/10-top-chrome-extensions-f
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://blog.bitsrc.io/do-your-buttons-lead-or-mi
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前段时间在开发【葡萄城社区】公众号时有一个功能是需要用网页授权认证地址生成二
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员