原型和原型链(jquery为例子)

首先,我们先看下jQuery是怎么用的,如下:

let a = $('p');
a.css('color', 'red');
a.html();
a.value();

简单实现zepto原型:

var zepto = {};

zepto.init = function (selector) {
    var slice = Array.prototype.slice;
    var dom = slice.call(document.querySelectorAll(selector));
    return zepto.Z(dom, selector);
}

function z(dom, selector) {
    var i, length = dom ? dom.length : 0
    for (i = 0; i < length; i++) {
        this[i] = dom[i];
    }
    this.length = length;
    this.selector = selector || '';
}

//构造函数
zepto.Z = function (dom, selector) {
    return new z(dom, selector);
}

var $ = function (selector) {
    return zepto.init(selector);
}

$.fn = {
    css: function (key, val) {

    },
    html: function (val) {

    },
    value: function (val) {

    }
}

//给z的原型赋值$.fn,这样zepto就有了CSS方法
z.prototype = $.fn;


简单实现jquery原型

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

jquery.fn = {
    css: function (key, val) {
        
    },
    html: function (val) {
        
    },
    value: function (val) {
        
    }
}

var init = jquery.fn.init = function (selector) {
    var slice = Array.prototype.slice;
    var dom = slice.call(document.querySelectorAll(selector));
    var i, length = dom ? dom.length : 0
    for (i = 0; i < length; i++) {
        this[i] = dom[i];
    }
    this.length = length;
    this.selector = selector || '';
}

//给z的原型赋值$.fn,这样jquery就有了CSS方法
init.prototype = jquery.fn

var $ = jquery;

/*扩展插件如下,为什么要把对象放在jquery.fn中,
因为jquery为了防止全局变量污染,只有jquery变量会暴露出来,
不可能会把init暴露出来,所以不能init.prototype.getValue
这样去添加方法,而且把可以让代码更统一*/

jquery.fn.getValue = function () {
    
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值