js原型在jQuery和zepto中的使用

背太阳的牧羊人

于 2019-12-16 17:45:29 发布

阅读量102

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u013565133/article/details/103566122

版权

JavaScript 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

原型的实际应用

zepto库中实现原型的方式：

index.hmtl代码：

<!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>Document</title>
</head>

<body>
    <P>jquery test 1</P>
    <P>jquery test 2</P>
    <P>jquery test 3</P>
    <div id="div1">jquery test in div</div>
</body>
<script src="my-zepto.js"></script>
<script type="text/javascript">
	//初始化实例
    var $p = $('p');
    $p.css('color', 'red');
    console.log($p.html());
    
	//初始化实例
    var $div1 = $('#div1');
    $div1.css('color', 'blue')
    console.log($div1.html());
</script>
</html>

my-zepto.js代码：

//定义一个自执行函数，避免全局变量的污染
(function (window) {
    var zepto = {};
    //Z构造函数
    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) {
        //document.querySelectorAll获取的是类数组，通过数组的slice方法将类数组转化成真正的数组
        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中
    window.$ = $;
    $.fn = {
        css:function(key,value){
            console.log('css');
        },
        html:function(value){
            console.log('html');
        }
    }

    //构造函数的原型
    Z.prototype = $.fn;
})(window)

jQuery中实现原型的方式：

index.html代码：

<!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>Document</title>
</head>

<body>
    <P>jquery test 1</P>
    <P>jquery test 2</P>
    <P>jquery test 3</P>
    <div id="div1">jquery test in div</div>
</body>
<!-- <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
<script src="my-jquery.js"></script>
<script type="text/javascript">
	//初始化实例
    var $p = $('p');
    $p.css('color', 'red');
    console.log($p.html());

	//初始化实例
    var $div1 = $('#div1');
    $div1.css('color', 'blue')
    console.log($div1.html());
</script>
</html>

my-jquery.js代码：

//定义一个自执行函数，避免全局变量的污染
(function (window) {
    var jQuery = function (selector) {
        return new jQuery.fn.init(selector)
    }

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

    //定义构造函数
    var init = jQuery.fn.init = function (selector) {
   	    //document.querySelectorAll获取的是类数组，通过数组的slice方法将类数组转化成真正的数组
        var slice = Array.prototype.slice;
        var dom = slice.call(document.querySelectorAll(dom));

        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)

原型的扩展性

为何把原型方法放在 $.fn 上而不是直接赋值一个对象？
在这里插入图片描述
原因如下：

只把 $ 暴露在window全局变量中，其它的变量不暴露在函数外。
将插件扩展统一到 $.fn.xxx 这一个接口，方便管理使用。

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

完整代码：

<!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>Document</title>
</head>

<body>
    <P>jquery test 1</P>
    <P>jquery test 2</P>
    <P>jquery test 3</P>
    <div id="div1">jquery test in div</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
    //插件代码
    $.fn.getNodeName = function () {
        console.log(this[0].nodeName);
    }
</script>

<script type="text/javascript">
    //验证代码
    var $p = $('p');
    $p.getNodeName();
    var $div1 = $('#div1');
    $div1.getNodeName();
</script>

</html>