建立JS库文件

建立库的方式

1. 函数式
2. 对象式

函数式

// 函数式
function $(id) {
   return  documnet.getElementById(id);
}

对象式

//  对象式
var Base = {
  $: function $(id) {
    return  documnet.getElementById(id);
  },
  $$: function (name) {
    return  documnet.getElementsByName(name);
  },
  $$$: function (tagname) {
    return  documnet.getElementsByTagName(tagname);
  },
}
// 更改为getId getName getElementsByTagName
var Base = {
  getId: function $(id) {
    return  documnet.getElementById(id);
  },
  getName: function (name) {
    return  documnet.getElementsByName(name);
  },
  getTagName: function (tagname) {
    return  documnet.getElementsByTagName(tagname);
  },
}

给JS添加连缀(链式)操作

// 连缀
// base是一个基础库的核心对象
// base.getId('box')返回的是一个divelement,这个对象是没有css方法 的,将base.getId('box')返回改为base即可
// 返回base对象
// 在base对象中添加css html  click方法
var $ = function(){
  return new Base();
}
 function Base() {
  //  获取id节点
   // 创建一个数组来保存获取的额节点和节点数组
   this.elements = [];
   this.getId = function (id) {
       this.elements.push(document.getElementById(id));
       return this;
   }
   this.getTag = function(tag){
     var tags = document.getElementsById(tag);
    //遍历所有的tag,将对象推入函数当中
     for (var i =0; i = tags.length; i++){
       this.elements.push(tag[i]);
     }
     return this;
   };

 }

给Base对象添加原型方法

1.添加CSS方法

Base.prototype.css = function(attr,value){
  for(var i=0; i<this.elements.length; i++){
      this.elements[i].style[attr] = 'value';
  }
  return this;
}

2.添加HTML方法

Base.prototype.html = function(str){
  for(var i=0; i<this.elements.length; i++){
      this.elements[i].innerHTML = str;
  }
  return this;
}

3.添加click事件

Base.prototype.click = function(fn){
  for(var i=0; i<this.elements.length; i++){
      this.elements[i].onclick = fn;
  }
  return this;
}