连缀

[javascript]代码库

/*base.js文件*/
//前台调用---实例化一个Base对象
var $ = function () {
    return new Base();
};

//基础库
//创建Base对象
function Base(){
    this.elements = [];//创建一个数组，存放获得的节点和节点数组

    //获得ID节点
    //参数：节点的ID
    //返回值：Base对象
    this.getId = function (id) {
        this.elements.push(document.getElementById(id)); //将获得的节点存放在数组中
        return this; //返回当前对象--Base（此时对象中的elements数组已经存放了需要的节点）
    };
    //获得元素节点
    //参数：节点的tag
    //返回值：Base对象
    this.getTagName = function (tag) {
        //将节点数组存放在数组中（通过遍历）
        var tags = document.getElementsByTagName(tag);
        for (var i = 0; i < tags.length; i++) {
            this.elements.push(tags[i]);
        }
        return this;//返回当前对象--Base
    }
}

    //设置css方法---需要在对象的原型上添加方法
    //参数：attr--属性  value--属性对应的值
    //返回值：Base对象
    Base.prototype.css = function (attr, value) {
        for (var i = 0; i < this.elements.length; i++) {
            this.elements[i].style[attr] = value; //将对象的节点设置css属性
        }    
        return this;//返回当前对象--Base
    }
    //设置innerHTML方法---在对象的原型上添加
    //参数：str-页面上显示的值
    //返回值：Base对象
    Base.prototype.html = function (str) {
        for (var i = 0; i < this.elements.length; i++) {
            this.elements[i].innerHTML = str;
        }
        return this; //返回当前对象--Base
    };
    //出发点击事件click方法--在对象的原型上添加
    //参数：一个匿名函数
    //返回值：Base对象
    Base.prototype.click = function (fn) {
        for (var i = 0; i < this.elements.length; i++) {
            this.elements[i].onclick = fn;
        }
        return this; //返回当前对象--Base
    }


/*demo.js文件*/
window.onload = function () {

    //var base = new Base();//实例化一个Base对象
    //base.getId("box").css("color", "red").css("background", "blue").html("改变现实的值").click(function () { alert("a") });

    //另外一个问题---当前面设置了一些css属性后面再设置之后，前面的设置会被覆盖掉
    //原因：两次设置是在通过base对象上设置的
    //base.getTagName("p").css("background", "black");
    //针对这个问题的解决方法
    //在base.js中实例化一个Base对象，在demo中直接调用已经实例化好的对象，就不会出现调用同一个对象的情况
    $().getTagName("p").css("background", "black");
    $().getId("box").css("color", "red").css("background", "blue").html("改变现实的值").click(function () { alert("a") });
}