连缀功能

电玩女神 2022-07-31 17:19 95阅读 0赞

一下都是我自己对代码的理解，但也是我自身也是弱菜一枚，很多地方可能理解有错，也希望大神们帮我指正。。我也会定期发错误总结写成博客！

所用代码为李炎恢老师博客前端代码！！！！

> $().getId(‘box’).css(‘color’, ‘red’).html(‘标题’).click(function()\{alert(‘a’)\});

这段代码就是连缀功能。。很多人第一反正肯定是觉得很直观，清楚明了简洁，但为什么可以这么写呢。。  
我们知道。在javascript中对象是有方法的，我们就把这每一个类似css(‘color’, ‘red’)当成为一种方法不就可以调用了么。。而css(‘color’, ‘red’)返回一个对象。这样我们就可以接着调用之后的方法了。。

那么既然知道这点。我们该如何写呢。肯定会想到写一个构造函数然后向其中加入各种方法。那我们就来看一下

先写几个最基本的功能吧。获取ID之后给其CSS样式  
这样我们需要new一个对象来用其中的方法但是呢。我们所有的方法都放在构造函数里，不方便看和整理，所以我们不如分离出来，那如何分离呢。。这时我们就会想到原型函数

Base.prototype.css=function(attr,value) { 
        for(vari= 0;i<this.elements.length;i++) { //如果获得的是tagName可能有很多就需要循环
            this.elements[i].style[attr]= value;
            }
            return this;
    }

这样呢我们就可以和以前一样调用了，而且十分清楚每个方法是什么。但问题来了。。原型的弊端，那就是共享 也就是第一个代码中的**this.elements=\[\];** ，也就是说如果我们其他方法需要用到this.elements\[\]那么所有的方法中的都会发生变化（例如设置背景颜色，就不在这举例了），，所以我们要将这个代码分离出来，那如何分离呢，我们可以这样想，在每次创建对象的时候就创建一个数组。可以是吧

var $=function(){  
        return new Base(); 
    };

这样我们每次调用这个方法就会新建一个数组。。这样就不会共享咯哟~~

那么我们也就实现了`$().getId('box').css('color', 'red')`

第一次写，可能逻辑上还有些问题，希望广大看友留下意见。我慢慢改正