• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

JS连缀语法

160 0

html部分:

<div id="box">id</div>
<input type="radio" name="sex" value="男" />
<p>标签</p><p>标签</p><p>标签</p><p>标签</p>

js连缀写法:

window.onload = function() {
    $().getId('box').css('color','red').css('background','green');
    $().getTagName('p').css('color','green').html('已修改').click(function() { alert('a')});
}

这里,使用了连缀的方式来获取元素,然后修改css,修改html内容,添加点击事件并且可以无限制的这样添加下去,那么这里就可以看出,在每个.xxx()的方法中肯定都会返回这个函数的本身,这样才可以无限制的.xxx(),因为你不可能getTagName()里面包含css(),然后css()里面包含css和html的方法,这是不可能的,所以只有返回这个初次调出的函数才对。

然后我们就开始写吧,一步步来:

function Base() {
  this.getId = function(id) {
    return document,getElementById(id);    //这里返回对应的id元素
  }
}

//由于后面我们还要修改css,所以我们要将这个对应的id元素保存在一个数组里,方便调用

function Base() {
  this.elemrnts = [];
  this.getId = function(id) {
    this.elements.push(document,getElementById(id));  //将元素通过栈方法传入数组中
    return this;    //这里我们之前说了,在每个.xxx()的方法中肯定都会返回这个函数的本身,所以我们return出this。
  }
  this.css = function(attr,value) {
    this.elements[0].style[attr] = value;    //由于没有.attr的方法,不存在,原本style.color的写法要改成键对值的形式。
    return this;
  }
}

//这样我们可以模拟出两步了,getId('box').css('color','red');下面还要获取元素节点的集合,p元素节点,由于p元素获取是通过getElementsByTagName,他包含了很多个节点,为此我们还需要将他们的节点一个个出入elements中去,方便调用,那么既然elements中有多个节点,所以就不能用死的数组来修改css,一样也要一个个都修改,于是:


function Base() {
  this.elemrnts = [];
  this.getTagName = function(tag) {
    var tags = doucment.getElementsByTagName(tag);
    for(var i = 0;i<tags.length,i++){
      this.elements.push(tags[i]);    //将tags内的元素通过栈方法传入数组中
    }
    return this;   
  }
  this.css = function(attr,value) {
    for(var i = 0;i<this.elements.length;i++){
      this.elements[i].style[attr] = value;
    }
    return this;
  }
}

//这样p元素也是可以模拟出两步,于是我们开始调用一下:

window.onload = function() {
    var base = new Base();
    base.getId('box').css('color','red').css('background','green');
    base.getTagName('p').css('color','green');
}

//然后你会发现color=green会覆盖color=red;原因是因为我们共用了一个构造函数中的数组,我们之前写的时候是将数组里的所有元素节点都做修改,所以我们还要改动一下,让他们不共用数组,那么就分别各运行一次new Base(),这样都分别创建了实例化对象了。


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

window.onload = function() {
    //var base = new Base();  //不需要了
    $().getId('box').css('color','red').css('background','green');
    $().getTagName('p').css('color','green');
}

//剩下就很简单得了,只需要将对于的方法写入构造函数中,数组有多个元素,就用for语句循环,然后再一个个添加就行了,然后事情还没有结束,我们要考虑到如果有很多的地方都要调用.css的方法,我们分别new出来的实例化对象都会自带一个css方法,但是这样就很冗余了,因为.css方法是一样的,没必要个个都自带,可以共用啊,所以这里还要用到构造函数中的原型。

//于是改造如下:


function Base() {
    this.arr = [];
    this.getId = function(id) {
        this.arr.push(document.getElementById(id));
        return this;
    }
    this.getTagName = function(tag) {
        var tags = document.getElementsByTagName(tag);
        for(var i = 0;i<tags.length;i++){
            this.arr.push(tags[i]);
        }
        return this;
    }
    
    
}

Base.prototype.css = function(attr,value) {
    for(var i = 0;i<this.arr.length;i++){
        this.arr[i].style[attr] = value;
    }
    return this;
}
Base.prototype.html = function(str) {
    for(var i = 0;i<this.arr.length;i++){
        this.arr[i].innerHTML = str;
    }
    return this;
}
Base.prototype.click = function(fn) {
    for(var i = 0;i<this.arr.length;i++){
        this.arr[i].onclick = fn;
    }
    return this
}

//通过共有的原型来调用相同的方法,节省资源,于是,连缀方法大概就介绍到这里了。

0
  • 本文分类:JavaScript
  • 本文标签:原型JS连缀构造函数
  • 流行热度:已超过 160 人围观了本文
  • 最后更新:2018年11月11日 - 16时48分08秒
  • 发布日期:2018年11月11日 - 16时45分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码