题目:
1.说一个原型的实际应用
2.原型如何体现它的扩展性
知识点:
1.jquery和zepto的简单使用
2.Zepto如何使用原型
3.Jquery 如何使用原型
1.Jquey例子,zepto模仿jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery</title>
</head>
<body>
<p>jquery test 1</p>
<p>jquery test 2</p>
<p>jquery test 3</p>
<div id="div1">
<p>jquery test in div</p>
</div>
<script type="text/javascript" src="my-jquery.js"></script>
<script>
var $p = $('p')
$p.css('font-size', '40px')
console.log($p.html())
var $div1 = $('#div1')
$div1.css('color', 'blue')
console.log($div1.html())
</script>
</body>
</html>
其中有两个实例,$pm$div1,同时具有css,html方法,实例不同但构造方法相同。他们都是从构造函数中继承过来的。
因此,当多个实例可以共用一个方法,说明构造方法来自同一个原型中。
2.zepto
(function (window) {
var zepto = {}
function Z(dom, selector) {
var i, len = dom ? dom.length : 0
for(i = 0; i< len; i++) {
this[i] = dom[i]
}
this.length = len
this.selector = selector || ''
}
zepto.Z = function (dom ,selector) {
return new Z(dom, selector)
}
zepto.init = function (selector) {
var slice = Array.prototype.slice
var dom = slice.call(document.querySelectorAll(selector))
return zepto.Z(dom, selector)
}
var $ = function (selector) {
return zepto.init(selector)
}
window.$ = $ //$函数赋值到全局变量中
$.fn = {
css: function (key, value) {
alert('css')
},
html: function (value) {
return '这是一个模拟html'
}
}
Z.prototype = $.fn
})(window)
$p传入一个选择器,再到zepto.init处理,选择器转化成DOM节点,数组形式,再给了zepto.z,又new了一个Z的实例,构造函数原型赋值成了$.fn
3.jQuery如何使用原型
(function (window) {
var jQuery = function (selector) {
return new jQuery.fn.init(selector)
}
jQuery.fn = {
css: function (key, value) {
alert('css')
},
html: function (value) {
return 'html'
}
} //先定义一下免得报错
var init = jQuery.fn.init = function (selector) {
var slice = Array.prototype.slice
var dom = slice.call(document.querySelectorAll(selector))
var i, len = dom ? dom.length : 0
for(i = 0 ; i< len ; i++) {
this[i] = dom[i]
}
this.length = len
this.selector = selector || ''
}
init.prototype = jQuery.fn
window.$ = jQuery
})(window)
通过 $函数传入css选择器,进入函数中,立马执行一个实例化一个构造函数,
构造函数体与zepto基本一致。
构造函数的原型等于找个对象,这个对象里有这两个方法。
如何体现原型的扩展性?
提问?
为什么要将$.fn赋值给Z.prototype,而不是直接讲Z.prototype等于一个对象呢?因为要扩展插件。可以扩展原型,可以将getNodeName,放到那个改造函数里。
插件的属性放在构造函数的原型里面去,放的方法,不是直接给原型赋值,而是通过$.fn给他赋的值、
好处:
1.只有$会暴露在window全局变量。(限制) 不要暴露很多变量,会造成变量污染、
2.将插件扩展统一到$fn.xxx这个接口,方便使用
问题解答:
说一下jquery和zepto的插件机制
结合自己的开发经验,做过的基于原型的插件
总结:
1.说一个原型的实际应用
描述一下jquery如何使用原型
描述一下zepto如何使用原型
再结合自己项目的项目经验,说一个开发的例子
2.原型的扩展性
说一下jquery和zepto的插件机制
结合自己的开发经验,做过的基于原型的插件。