经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery源码学习一: 创建一个jquery实例
来源:cnblogs  作者:xy2370  时间:2019/9/10 10:54:18  对本文有异议

前言:

jquery是每个前端都会的基础技能,众所周知,jquery返回的是jquery实例方法,但是我们似乎是直接使用$就可以获取到jquery的方法啦,可以在浏览器中判断一下 window.$ 和window.jQuery,jQuery 之间的关系,就会发现他们之间是全等的;

不使用new方法调用

我们一般调用实例大部分是通过new方法,但是jquery却不是,而是直接调用,这是为什么呢
1. 创建实例方法:

  1. (function(root){
  2. var jQuery = function(){
  3. console.log('创建实例啦')
  4. }
  5. root.jQuery = jQuery //这样赋值就可以调用啦
  6. })(window)
  1. 2.返回时操作

但是现在页面上调用jQuery仍然不能使用$调用,于是简单修改代码

  1. (function(root){
  2. var jQuery = function(){
  3. return new jQuery()
  4. }
  5. root.$ = root.jQuery = jQuery
  6. })(this)

这样我们就可以不在外部调用new方法,因为jQuery在返回的时候就已经调用了new

原型共享

在之前的操作下,我们已经将new jQuery返回了出去,但是这样是有问题的。我们在jquery原型中定义一个init方法,并将init返回出去
1. 定义一个init

  1. var jQuery = function(){
  2. return new jQuery.prototype.init();
  3. }
  4. jQuery.prototype = {
  5. init: function(){
  6. }
  7. }

但是这样我们虽然解决了报错问题,但是我们现在无法获取到jQuery中的原型方法,也就无法调用到jQuery的方法。
2. 原型共享
jQuery中有很重要的一行代码:

  1. jQuery.prototype.init.prototype = jQuery.prototype

这就是原型共享,简单从代码来看,就是将jquery的原型赋值给jquery.prototype.init方法原型;
这样我们调用jquery时,虽然获取的是init方法,但是依然可以调用jquery中的原型方法。
3. 例子
我们在jquery上简单扩展方法,并打印jquery验证

  1. jQuery.prototype = {
  2. init: function(){
  3. },
  4. css: function(){},
  5. }

结果:
Image text

原文链接:http://www.cnblogs.com/xya-b/p/11466870.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号