javascript考点高级 —— 原型_描述一下zepto如何使用原型-优快云博客

本文链接：https://blog.youkuaiyun.com/zhanghuali0210/article/details/82222505

博客主要介绍了jQuery和Zepto的简单使用，包括二者如何使用原型。还给出原型实际应用的题目解答，涉及二者的使用描述及结合项目经验。此外，讲解了原型扩展，如插件机制，说明了给原型赋值的好处，并给出原型扩展的解答。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、jquery和zepto的简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>jqury test 1</p>
    <p>jqury test 2</p>
    <p>jqury test 3</p>
    <div id="div1">
        <p>jquery test in div</p>
    </div>
    <script type="text/javascript" src="./jquery-1.12.4.min.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')
        console.log($div1.html())
    </script>
</body>
</html>

二、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) {
            console.log('css')
        },
        html: function(value) {
            return '这是模拟'
        }
    }
    zepto.Z.prototype = Z.prototype = $.fn
})(window)

三、jquery如何使用原型

(function(window){
    var jQuery = function(selector) {
        return new jQuery.fn.init(selector)
    }

    jQuery.fn = {
        css: function(key, value) {
            console.log('css')
        },
        html: function(value) {
            return 'test'
        }
    }

    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)

四、题目解答

说一个原型的实际应用

解答：

（1）描述一下jQuery如何使用

（2）描述一下zepto如何使用

（3）结合自己的项目经验（试情况而定）

六、原型如何扩展，这里最明显的一个就是插件机制

上面的zepto源码和jQuery的源码中，我们给原型赋值通过zepto.Z.prototype = Z.prototype = $.fn和init.prototype = jQuery.fn，而不是直接将$.fn赋值给原型，这样做的好处：

（1）只有$会暴露在window全局中

（2）将插件扩展统一到$.fn.xxx这一接口，方便使用

我们在jQuery上面扩展出来一个新方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>jqury test 1</p>
<p>jqury test 2</p>
<p>jqury test 3</p>
<div id="div1">
    <p>jquery test in div</p>
</div>
<script type="text/javascript" src="./jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $.fn.getNodeName = function() {
        console.log(this[0].nodeName)
    }
</script>
<script type="text/javascript">
    var $p = $('p')
    $p.getNodeName()
    var $div1 = $('#div1')
    $div1.getNodeName()
</script>
</body>
</html>