03. 原型.md

原型

问题

• 说一个原型的实际应用
• 原型如何体现它的扩展性

原型的实际应用

• jq 和 zepto 的简单使用
• zepto 如何实现的原型
• jq 如何实现的原型

JQ 的简单使用：

<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 type="text/javascript">
    var $p = $('p')
    $p.css('font-size', '40px')         //  css 是原型方法
    alert($p.html())                    //  html 是原型方法

    var $div1 = $('#div1')
    $div1.css('color', 'blue')          //  css 是原型方法
    alert($div1.html())                 //  html 是原型方法
</script>

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) {
        // 出现关键字 new
        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)
    }

    // 即使用 zepto 的时候的  $
    var $ = function (selector) {
        return zepto.init(selector)
    }

    window.$ = $

    // 原型的扩展
    $.fn = {
        constructor: zepto.Z,
        css: function (key, value) {

        },
        html: function (value) {

        }
    }
    Z.prototype = $.fn

})(window)

JQ 原型的实现：

(function (window) {

    var jQuery = function (selector) {
        // 关键字 new, 找到构造函数
        return new jQuery.fn.init(selector)
    }

    // 初始化原型 jQuery.fn
    jQuery.fn = {
        constructor: jQuery,
        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)

原型的扩展性

• 总结 jQuery 和 Zepto 的原型使用
• 插件机制

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

$.fn.getNodeName = function() {
    return this[0].nodeName;
};

// 其实就是
jQuery.fn = {
    constructor: jQuery,
    css: function (key, value) {
        alert('css')
    },
    html: function (value) {
        return 'html'
    },
    // 这里
    getNodeName = function() {
        return this[0].nodeName;
    }
}

好处：

• 只有 $ 会暴露在 window 全局变量
• 将插件扩展同源到 $.fn.xxx 这一接口，方便使用

<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">

    console.log($.fn)
    // 插件扩展
    $.fn.getNodeName = function () {
        // this
        alert(this[0].nodeName)
    }
</script>
<script type="text/javascript">
    // 验证
    var $p = $('p')
    $p.getNodeName()
    var $div1 = $('#div1')
    $div1.getNodeName()
</script>

总结：

• 入口函数
• 构造函数
• 构造函数原型