从jQuery 入口方式写jQuery工具类库

###1.jQuery 入口方式在常用的jquery入口方式中估计大部分人都是直接用的是

$(function(){
  //code
})
复制代码

下面详细说一下jquery的几种入口方式： ####1.1 $ 符号+ready() 的方式很多人可能会看到一下这种方式入口,是通过ready() 函数调用，至于原理会在下面讲解。

$(document).ready(function(){
		//code
});
复制代码

####1.2 $ 符号 +简写的方式这种应该最多人用的，因为写起来也是最方便的

$(function(){
  //code
})
复制代码

####1.3 jQuery +ready() 的方式这是jquery完整的写法，也是最初的形态。

	jQuery(document).ready(function(){
			console.log('jQuery ready 入口方式');
	})
复制代码

####1.4 jQuery + 简写入口这种方式也是跟第二种方式类似

  jQuery(function(){
	  console.log('I am jquery ');
  })
复制代码

2. 模拟 jQuery 的入口函数

####2.1 认清楚 $ 符号其实 $ 是 jQuery 的一个代替品，也就是可以解析为什么上面四种入口方法类似的原因。尝试：

var $ = 'I am $';
console.log($);
复制代码

从控制台打印出来的是

I am $
复制代码

再次测试，引入jQuery 后打印 $ 对象和 jQuery 对象

<script src="jquery-1.11.1.min.js"></script>
<script>
  console.log($);
  console.log(jQuery);
  console.log($===jQuery)
</script>
复制代码

打印结果如下：

结论：从上面可以得知 $ 和 jQuery 是同一个对象，也可以得知它是一个方法（或者对象），通过传递（a,b）两个参数，返回了一个新的对象，当然，在这里面也会根据你是否已经创建过该对象。

再次测试，看创建两个jQuery 对象情况会怎么样， $ 和 jQuery.

  var t1 = $;
  var t2 = jQuery;
  console.log(t1===t2);
复制代码

思考另外一种情况：

var t1 =new $;
var t2 = new jQuery;
console.log(t1===t2);
复制代码

这样子的情况请问相等嘛？答案是 false

解析：

通过new 是开辟了一个新的空间，去存储这个对象。具体看一下

console.log(t1);
console.log(t2);
复制代码

再看，如果是通过 $ 或 jQuery 直接打印出来的对象可以看得出是一个方法里面通过传参数，而通过 new $ 或 new jQuery 的话直接是返回的对象，下面是两个的对比。

继续探究：

返回的属性有个 proto 对象打印一下：

var t2 = new jQuery;
console.log(t2);
console.log(t2.__proto__);
复制代码

继续推测：

//下面这句会不会是 打印jQuery 的版本号呢？
console.log(t2.__proto__.jquery);
复制代码

下面这句通过

jQuery.fn = jQuery.prototype ={
  //这里暴露一些属性接口信息
    jquery: version,// 这里把上面的版本号version 通过jquery这个接口获得
}

复制代码

详情图：

貌似跑题了。回到最初的问题 ####2.1 写一个kQuery 库回顾js 的调用方式

var  kQuery=  function (a){
  //code
}
kQuery(a);
复制代码

测试下你的 code 块是否被执行了。再次模拟jquery，它是返回一个对象。那我们的kQuery 应该也有个对象返回,

var  kQuery=  function (a){
 
    //返回对象
    return obj;
}
复制代码

上面代码明显是错误的，因为它不知道 obj 是个什么东东，所以应该先定义 obj 为一个对象。

var  kQuery=  function (a){
     var obj ={}
    //返回对象
    return obj;
}
复制代码

再次看第一大点，jquery的如后函数是不是都是通过ready() 来执行的，那是不是这个对象应该拥有ready 的这个方法。

var  kQuery=  function (a){
     var obj ={
        ready:function(){
              console.log('This is ready function');
        }
      }
    //返回对象
    return obj;
}
复制代码

2. 模拟 jQuery 的入口函数

相关文章：