前端面试之原型

++本文系慕课网学习笔记++

说一下原型的实际应用

解答思路：

1. 描述一下 jQuery 如何使用原型
2. 描述一下 zepto 如何使用原型
3. 再结合自己的项目经验，说一个自己开发的例子

jQuery 和 zepto 的简单使用

<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="./jquery-3.2.1.js"></script>
<script type="text/javascript">
    var $p = $('p')
    $p.css('color', 'red')  // css 是原型方法
    console.log($p.html())  // html 是原型方法
    
    var $div1 = $('div1')
    $div1.css('color', 'blue')  // css 是原型方法
    console.log($div1.html())   // html 是原型方法
</script>

zepto 如何使用原型

// 空对象
(function (window) {
    var zepto = {}
    zepto.init = function(selector) {
        // 源码中这的处理情况比较复杂，但这里是针对原型所以就弱化了
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))
        return zepto.Z(dom, selector)
    }
    // 即使用 zepto 时候的 $
    var $ = function(selector) {
        return zepto.init(selector)
    }
    window.$ = $
})(window)

// 构造函数
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) {
    // 注意出现了 new 关键字
    return new Z(dom, selector)
}

$.fn = {
    constructor: zepto.Z,
    css: function (key, value) {
        ...
    },
    html: function(value) {
        ...
    }
}

zepto.Z.prototype = Z.prototype =$.fn
    

jQuery 如何使用原型

var jQuery = function(selector) {
    // new 关键字， 构造函数
    return new jQuery.fn.init(selector)
}
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 || ''
}
window.$ = jQuery

// 初始化 jQuery.fn
jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    css: function (key, value) {
        ...
    },
    html: function(value) {
        ...
    }
}
// 定义原型
init.prototype = jQuery.fn

原型如何实现它的扩展性

解答思路：

1. 说一下 jQuery 和 zepto 的插件机制
2. 结合自己的开发经验，做过的基于原型的插件

思考：为何要把原型方法放在 $fn?

// 因为要扩展插件
$.fn.getNodeName = function() {
    return this[0].nodeName
}
// 好处
    // 只有 $ 会暴露在 window 全局变量
    // 将插件扩展统一到 $.fn.xxx 这一个接口，方便使用

总结 zepto 和 jQuery 原型的使用

插件机制