我一直在思考, 写博客是为了什么?终于有一天我想明白了: 思考, 表达,交流。
问: 谈一谈原型和构造函数在实际应用中的使用?
答: 原型和构造函数在jquery和zpeto中大量的被使用。
zepto的大概的流程是这样的:
//创建一个自执行函数,避免全局变量被污染
(function(window) {
// 声明一个zepto对象
var zepto = {};
function Z(dom, selector) {
var i, len = dom ? dom.length : 0
for(i=0;i<len;i++) {
this[i] = dom[len];
}
this.length = len;
this.selector = selector || ''
}
//Z方法new了一个Z的实例,说明Z是一个构造函数
zepto.Z = function(dom, selector) {
return new Z(dom, selector)
}
//init 函数将selector选中的类数组变成数组, 然后执行Z方法
zepto.init = function (selector) {
var slice = Array.prototype.slice;
var dom = slice.call(document.querySelector(selector));
return zepto.Z(dom, selector);
}
//$ 返回zepto初始化的方法
var $ = function(selector) {
return zepto.init(selector)
}
//给window一个$
window.$ = $;
$.fn = {
css: function(key, val) {
console.log(val)
},
html: function(val) {
console.log(val)
}
}
Z.prototype = $.fn
})(window)
jquery中的使用大致是这样的:
(function(window) {
//初始化$
var jQuery = function(selector) {
return new jQuery.fn.init(selector);
}
//定义fn方法
jQuery.fn = {
css: function(key, val) {
alert('css')
},
html: function(val) {
return 'html'
}
}
var init = jQuery.fn.init = function(selector) {
var slice = Array.prototype.slice;
var dom = 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;
}
//把fn方法挂载到init的prototype上
console.log(jQuery.fn)
init.prototype = jQuery.fn
//创建$方法
window.$ = jQuery;
})(window)
问题: 谈一谈jquery的插件机制(讲讲原型的扩展?)
答: jquery中, 是通过$.fn.方法名来扩展插件的。这样写的好处有两个:
- 向全局只暴露一个变量$,而没有构造函数Z(jquery.init).
- 方便统一管理
代码如下:
init.prototype = jQuery.fn
简单的实例:
<script type="text/javascript" src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
// 插件扩展
$.fn.getNodeName = function () {
// this
alert(this[0].nodeName)
}
</script>
<script type="text/javascript">
// 验证
var $p = $('p')
$p.getNodeName()
var $div1 = $('#div1')
$div1.getNodeName()
</script>