可想实现一个自己的简单jQuery库？(十二，完结篇)

joyqi 发布于2019-08-01 14:57 / 1048人阅读

摘要：新增事件部分讲完了后我们最后实现个方法关于就常用的就种一个是取值一个是赋值我们通过判断的个数是取值还是赋值赋值很容易我们就用最简单的办法直接设置如果是取值那我们就要做个判断因为和的取法是不一样的还有一种可能性是当元素的为的时候直接取是取不

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

专线服务超融合服务器完结篇 js实现的简单特效怎么搭建一个自己的视频网站如何搭建一个自己的服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49673.html

可想实现一个自己的简单jQuery库？(十二，完结篇)

摘要：新增事件部分讲完了后我们最后实现个方法关于就常用的就种一个是取值一个是赋值我们通过判断的个数是取值还是赋值赋值很容易我们就用最简单的办法直接设置如果是取值那我们就要做个判断因为和的取法是不一样的还有一种可能性是当元素的为的时候直接取是取不 Lesson-11 新增width,height,extend 事件部分讲完了后,我们最后实现3个方法. width : function(w) ...

ivan_qhz 2019-08-19 17:05 评论0 收藏0
可想实现一个自己的简单jQuery库？(十二，完结篇)

摘要：新增事件部分讲完了后我们最后实现个方法关于就常用的就种一个是取值一个是赋值我们通过判断的个数是取值还是赋值赋值很容易我们就用最简单的办法直接设置如果是取值那我们就要做个判断因为和的取法是不一样的还有一种可能性是当元素的为的时候直接取是取不 Lesson-11 新增width,height,extend 事件部分讲完了后,我们最后实现3个方法. width : function(w) ...

lingdududu 2019-08-05 18:17 评论0 收藏0
JavaScript专题系列20篇正式完结！

摘要：写在前面专题系列是我写的第二个系列，第一个系列是深入系列。专题系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 专题系列是我写的第二个系列，第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 评论0 收藏0
可想实现一个自己的简单jQuery库？(三)

摘要：这个版本新增这个选择元素的方法还是比较常用的首先我们需要一个来过滤我们需要的上面那段比较简单就是普通的过滤下元素看下方法的源码就知道我传入数组对象的个对象然后取它的下一个同辈元素直接返回方法同理这段是取到第一个父元素由于返回的不是原生的对 Lesson-2 这个版本新增 next(),prev(),parent(),parents() 这4个选择元素的方法还是比较常用的首先我们需要...

xiaoxiaozi 2019-08-21 10:48 评论0 收藏0
可想实现一个自己的简单jQuery库？(三)

摘要：这个版本新增这个选择元素的方法还是比较常用的首先我们需要一个来过滤我们需要的上面那段比较简单就是普通的过滤下元素看下方法的源码就知道我传入数组对象的个对象然后取它的下一个同辈元素直接返回方法同理这段是取到第一个父元素由于返回的不是原生的对 Lesson-2 这个版本新增 next(),prev(),parent(),parents() 这4个选择元素的方法还是比较常用的首先我们需要...

habren 2019-08-02 18:22 评论0 收藏0