请选择 进入手机版 | 继续访问电脑版

10模板

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1339|回复: 3

静态与实例方法共享设计

[复制链接]

1288

主题

1801

帖子

4611

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4611
发表于 2017-3-2 11:04:43 | 显示全部楼层 |阅读模式
保留上一节分割出2个构造器的疑问,我们先看看jQuery在接口的设计:
遍历方法:
$(".aaron").each()   //作为实例方法存在$.each()             //作为静态方法存在
这是最常见的遍历方法,第一条语句是给有指定的上下文调用的,就是(".aaron")获取的DOM合集,第二条语句$.each()函数可用于迭代任何集合,无论是“名/值”对象(JavaScript对象)或数组。在迭代数组的情况下,回调函数每次都会传递一个数组索引和相应的数组值作为参数。本质上来说2个都是遍历,那么我们是不是要写2个方法呢?
我们来看看jQuery的源码:
jQuery.prototype = {    each: function( callback, args ) {        return jQuery.each( this, callback, args );    }}
实例方法取于静态方法,换句话来说这是静态与实例方法共享设计,静态方法挂在jQuery构造器上,原型方法挂在哪里呢?
我们上节不是讲了内部会划分一个新的构造器init吗?jQuery通过new原型prototype上的init方法当作构造器,那么init的原型链方法就是实例的方法了,所以jQuery通过2个构造器划分2种不同的调用方式一种是静态,一种是原型。
方法是共享的,并且实例方法取于静态方法,2个构造器是完全隔离的 ,这个要如何处理?
看看jQuery给的方案:
画龙点睛的一处init.prototype = jQuery.fn,把jQuery.prototype原型的引用赋给jQuery.fn.init.prototype的原型,这样就把2个构造器的原型给关联起来了。
ajQuery.fn = ajQuery.prototype = {        name: 'aaron',        init: function(selector) {               this.selector = selector;               return this;        },        constructor: ajQuery}ajQuery.fn.init.prototype = ajQuery.fn
这段代码就是整个结构设计的最核心的东西了,有这样的一个处理,整个结构就活了!不得不佩服作者的设计思路,别具匠心。
看看init的的构造图:
(单击图片查看大图)

通过原型传递解决问题,把jQuery的原型传递给jQuery.prototype.init.prototype。换句话说jQuery的原型对象覆盖了init构造器的原型对象,因为是引用传递所以不需要担心这个循环引用的性能问题。
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.    
  10. 打印$().say()
  11. <div id="aaron"></div>

  12. <script type="text/javascript">

  13. var $ = ajQuery = function(selector) {
  14.     return new ajQuery.fn.init(selector);
  15. }

  16. ajQuery.fn = ajQuery.prototype = {
  17.         name: 'aaron',
  18.         init: function(selector) {
  19.                 this.selector = selector;
  20.                 return this;
  21.         },
  22.         constructor: ajQuery
  23. }

  24. ajQuery.fn.init.prototype = ajQuery.fn

  25. ajQuery.fn.say = function() {
  26.         $("#aaron").html(this.name)
  27. }

  28. $().say()

  29. </script>
  30. </body>
  31. </html>
复制代码

评分

参与人数 2金钱 +2 收起 理由
fengzhi + 1 谢谢楼主!帖子很给力
晴天 + 1 很给力!

查看全部评分

asdsadsa
回复

使用道具 举报

1288

主题

1801

帖子

4611

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4611
 楼主| 发表于 2017-3-31 13:59:08 来自手机 | 显示全部楼层
收藏德安县
回复 支持 反对

使用道具 举报

1288

主题

1801

帖子

4611

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4611
 楼主| 发表于 2017-4-4 01:05:45 来自手机 | 显示全部楼层
江汀啦咯啦咯啦咯啦咯啦咯啦咯啦咯啦咯啦咯啦咯啦咯啦咯
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|10模板  

GMT+8, 2018-4-25 20:17 , Processed in 0.268777 second(s), 26 queries .

快速回复 返回顶部 返回列表