原型——在zepto和jquery中的应用

问题1: 说一个原型的实际应用

在zepto中,原型的一个应用如下:
pic2

当使用

$div1 = $('#div1')

时,调用了zepto源码中的$方法,返回了zepto.init(),zepto.init()根据参数中的选择器,使用document.querySelectorALL()方法找到目标的NodeList并使用Array.prototype.slice.call()方法将其转换为数组形式。之后将该数组和选择器作为参数调用zepto.Z,返回构造函数Z的实例。即zepto实例。

然后将$.fn付给Z.prototype,即定义了该构造函数的原型方法,我们使用的的zepto实例的方法基本都在于此。
1
jquery中的原型实例相同,如下:

pic3

实现方式其实和zepto是类似的,只是看起来更加简介,使用$(''),即jQuery('')时,直接返回一个

问题2: 原型如何体现它的扩展性

插件机制——原型的扩展性的使用

上面写的 在jQery和zepto中,为什么在定义构造函数的原型时要使用xxx.prototype = $.fn呢?也就是说,为什么要先把方法写在fn中呢?

当我们要扩展插件时,是使用如下方法:

pic4

这样,当我们使用构造函数的时候,生成的实例中便多出了getNodeName方法了。通过$.fn将插件的属性放在构造函数的原型中去,并不是直接给构造函数的原型赋值(XXX.prototype = ……)。原因如下:

1.因为只有$会暴露在window全局变量中;
2.将插件扩展统一到$.fn.xxx这一个接口中,方便使用。

 关于异步——事件轮询、deferred、Promise
ES6的class总结及其使用 
上一篇:关于异步——事件轮询、deferred、Promise
下一篇: ES6的class总结及其使用


如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ