0%

JS连缀语法

发布于 / 分类: JavaScript / 暂无评论 / 阅读量 527

最后更新于 2018年11月11日

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
}

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

AJAX封装 JS CSS封装库(上)
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao