可想完成一个本身的简朴jQuery库？(十二，完结篇)

2024年3月19日 117次阅读 来源: 二哲

Lesson-11

新增width,height,extend

事宜部份讲完了后,我们末了完成3个要领.

width : function(w) {
    if(arguments.length == 1) {
        for (var i = 0; i < this.length; i++) {
            this[i].style.width = w + 'px';
        }
    } else {
        if (this[0].document === doc ) {
            return this[0].innerWidth;
        } else if (this[0].nodeType === 9 ){
            return document.documentElement.clientWidth;
        } else {
            return parseInt(getComputedStyle(this[0],null)['width']);
        }
    }
},

关于width(),height()就经常使用的就2种,一个是取值,一个是赋值.

我们经由过程推断arguments的个数,是取值照样赋值.

赋值很轻易,我们就用最简朴的方法,直接设置.

假如是取值,那我们就要做个推断,由于window,和document的取法是不一样的.

另有一种可能性是,当dom元素的display为none的时刻,直接取是取不到的.在这我就不做处理了.人人思索一下能够本身尝试.

思绪是把dom设置为position:absolute;visible:hidden;然后取,在设置归去.

同理height要领也是云云.我就直接给出代码了

height : function(h) {
    if(arguments.length == 1) {
        for (var i = 0; i < this.length; i++) {
            this[i].style.height = h + 'px';
        }
    } else {
        if(this[0].document === doc ) {
            return this[0].innerHeight;
        } else if (this[0].nodeType === 9 ){
            return document.documentElement.clientHeight;
        } else {
            return parseInt(getComputedStyle(this[0],null)['height']);
        }
    }
}

二者险些雷同只是改了API,实在完全能够封装为一个要领复用.

jQuery之所以那末广受群众所爱,还一个异常重要的就是他的extend要领.假如没有了他,将不会有如今那末多jQuery插件的降生

在此,我们就完成一个异常简朴的浅拷贝.(但是jQuery的extend异常壮大)

Kodo.prototype.extend = Kodo.extend = function() {
    var options = arguments[0];
    for( var i in options) {
        this[i] = options[i];
    }
};

这个要领我们不仅要能拓展静态要领,也要能拓展实例要领.

所以 Kodo.prototype.extend = Kodo.extend = 直接如许写了.

内里内容过于大略就不过量讲解了 :)

然后我们就可以如许拓展我们的插件了

f.prototype.extend({  //实例要领
    alert : function(msg) {
        alert(msg)
    }
});
f.extend({ //静态要领
    alert : function(msg) {
        alert(msg)
    }
});

f.alert('123');//挪用
f("div").alert('123');//挪用

实在jQuery另有许多别的部份,比方行列,动画,异步.都是一些异常值得本身去实践尝试的.

但至此,我们的小轮子基础也就完结了

别的的手势番外篇,本想直接集成在这内里.假如有群众所需,我就继承更下去

您连11节的课程都有耐烦看完,何须不顺手点下右上角的star呢? >.<

github地点: https://github.com/MeCKodo/forchange/tree/master/lessonn-11
可想完成一个本身的简朴jQuery库？(十)：http://segmentfault.com/a/1190000004028806

    原文作者：二哲
    原文地址: https://segmentfault.com/a/1190000004038033
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞