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类型
-----------------未完待续-------------------------