更新于

JS连缀语法

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

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
}

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

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了327篇文章

共有550条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局