JS基础知识2.0(二)原型

题目：
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的插件机制
结合自己的开发经验，做过的基于原型的插件。

JS基础知识2.0(二)原型

猜你喜欢