jQuery源码分析_工具方法(学习笔记)

expando:生成唯一JQ字符串(内部使用)

noConflict():防止冲突

isReady:DOM是否加载完成(内部)

readyWait:等待多少文件的计数器(内部)

holdReady():推迟DOM触发

ready():准备DOM触发

isFunction():是否为函数

isArray():是否为数组

isWindow():是否为window

isNumeric():是否为数字

type():判断数据类型

isPlainObject():是否为对象自变量

isEmptyObject():是否为空的对象

error():抛出异常

parseHTML():解析节点

parseJSON():解析JSON

parseXML():解析XML

noop():空函数

globalEval():全局解析JS

camelCase():转驼峰

nodeName():是否为指定节点名(内部)

each():遍历集合

trim():去前后空格

nakeArray():类数组转真数组

inArray():数组版indexOf

merge():合并数组

grep():过滤新数组

map():映射新数组

guid:唯一表示符(内部)

proxy():改this指向

access():多功能值操作(内部)

now():当前时间

swap():CSS交换(内部)

 

expando:生成唯一JQ字符串(内部使用)

源码:

<script src="jquery-2.0.3.js"></script>

<script>

alert( $.expando );

</script>

 

 

运行结果:

 

noConflict():防止冲突

源码:

jquery对外提供的接口是$()或者jQuery(),$符号在很多别的库中也会使用到所以就可能会有冲突

不冲突的解决方法:

<script src="jquery-2.0.3.js"></script>

<script>

var aa = $.noConflict(true);//现在将$替换成aa

var $ = 123; //模拟$被占用的情况

aa(function(){

alert($);

})

</script>

运行结果:

 

isReady:DOM是否加载完成(内部)

readyWait:等待多少文件的计数器(内部)

holdReady():推迟DOM触发

ready():准备DOM触发

$(function(){})与原生js中window.onload = function(){}

window.onload = function(){}原生的window.onload是页面中所有的东西(节点、图片、flash)都全部加载完成才会执行的语句

$(function(){})是在DOM(节点)加载完就会执行 ,加载速度更快

原生js中DOM加载完成事件:DOMContentLoaded,触发时就表示DOM加载完成了

深入跟踪发现 $(function(){})只是调用了原生js的DOMContentLoaded

JQ中DOM触发有三种方式:

1)  $(function(){});

2)  $(document).ready(function(){});

3)  $(document).on('ready',function(){})

holdReady()和ready()的使用方法:

源码:

 1 isReady: !1,
 2 readyWait: 1,
 3 holdReady: function(e) {
 4     e ? x.readyWait++ : x.ready(!0)
 5 },
 6 ready: function(e) {
 7     if (e === !0 ? !--x.readyWait : !x.isReady) {
 8         if (!a.body) return setTimeout(x.ready);
 9         x.isReady = !0, e !== !0 && --x.readyWait > 0 || (n.resolveWith(a, [x]), x.fn.trigger && x(a).trigger("ready").off("ready"))
10     }
11 },

下边写一个简单的a.js,有一个弹出框,在加载完成a.js后再执行后边的操作需要用holdReady(),否则有可能是先弹出2,后弹出1;

alert(1);
 1 <script src="jquery-2.0.3.js"></script>
 2 <script>
 3 $.holdReady(true);  //推迟加载
 4 $.getScript('a.js',function(){
 5     $.holdReady(false);  //在a.js加载完成后释放,往下执行
 6 })
 7 $(function(){
 8     alert(2);
 9 });
10 </script>

运行结果:先弹出1,后弹出2;

 

isFunction():是否为函数

isArray():是否为数组

isWindow():是否为window

isNumeric():是否为数字

不多说,很简单。使用时在前边加 $. 就ok

内部源码,通过type实现:

 1 isFunction: function(e) {
 2     return "function" === x.type(e)
 3 },
 4 isArray: Array.isArray || function(e) {
 5     return "array" === x.type(e)
 6 },
 7 isWindow: function(e) {
 8     return null != e && e == e.window
 9 },
10 isNumeric: function(e) {
11     return !isNaN(parseFloat(e)) && isFinite(e)
12 }

 

isPlainObject():是否为对象自变量

首先 什么是对象自变量:json 或者new obj的形式

var obj = {}//json形式

var obj = new object();

alert($.isPlainObject(obj));//返回结果是boolean类型

 

 

-----------------未完待续-------------------------

 

posted @ 2015-11-30 17:31  千城。  阅读(286)  评论(0编辑  收藏  举报