小微型庫(1.獲取元素的API)

liangsheng0111發表於2018-11-01
API

參考JQ,利用原生js做一個簡單的微型庫,有以下一些功能:

  1. 可進行鏈式操作
  2. 元素的獲取的API
    • id
    • class
    • tag標籤名
    • css選擇器
  3. 事件的處理
    • 事件的繫結相容
    • 解綁事件的相容
  4. typeOf 功能實現
  5. 封裝遍歷物件{}的方法
  6. 封裝innerHTML方法
  7. 封裝innerText方法
  8. 封裝類名新增
  9. 封裝類名移除
  10. 封裝一個檢測類名的方法：參考classList.toggle()
  11. 封裝新增節點的方法
  12. 封裝移除節點的方法
  13. 封裝css樣式設定的方法
  14. 封裝操縱標籤屬性的方法

相容到ie8

以上為要求,接下來一部分一部分實現.

第一部分 獲取元素的API

  •  介面API:      $()
複製程式碼
  •  ID選擇器:     $("#id")
複製程式碼
  •  class選擇器 : $(".class")  注: 做相容
複製程式碼
  •  css選擇器   : $("warp > div")
複製程式碼
  •  標籤選擇器  : $("div")
複製程式碼
  •  標籤建立器  : $("<div>liang<span>sheng</span></div>")
複製程式碼
(function(window, document, undefined) {
  //getElementsByClassName的相容
  if (!document.getElementsByClassName) {
    //將 undefined時取反，能進來這裡一定是IE低版本
    document.getElementsByClassName = function(eleClassName) {
      var aEle = document.getElementsByTagName("*"), //萬用字元，獲得所有的標籤
          reg = new RegExp("\\b" + eleClassName + "\\b"),
          arrEle = [];
      for (var i = 0, len = aEle.length; i < len; i++) {
        if (reg.test(aEle[i].className)) {
          arrEle.push(aEle[i]);
        }
      }
      return arrEle;
    };
  }

  //去空格的相容,trim()在String的原型上,不相容ie8及以下
  if(!String.prototype.trim){
    String.prototype.trim = function(){//誰呼叫trim 就指向誰
      return this.replace(/(^\s+)|(\s+$)/g, "");
    };
  }

  //工具類
  function Liang(selector) {
    return new Liang.prototype.init(selector);
  }
  Liang.prototype = {
    constructor: Liang,
    init: function(selector) {
      /* 初始化,獲取元素,返回物件*/
      var arr = null,
          obj = {
            id: function(sel) {
              //id返回的有兩種 null和節點
              //$("#id"),要進行字串擷取將#截掉
              var dom = document.getElementById(sel.slice(1));
              return dom === null ? [] : [dom];
            },
            className: function(sel) {
              //$(".className")
              return document.getElementsByClassName(sel.slice(1));
            },
            tag: function(sel) {
              //$("div")
              return document.getElementsByTagName(sel);
            },
            html: function(sel) {
              //建立元素
              var div = document.createElement("div");
              div.innerHTML = sel;
              return div.children;
            },
            css3: function(sel) {
              return document.querySelectorAll(sel);
            }
          };
      
      //判斷引數的型別
      if(typeof selector === "string"){
        //進來的是選擇條件
        selector = selector.trim();//去字串首尾的空格
        //判斷函式
        function isSelector(str){
          //str 就是選擇條件的字串
          if( /^</.test(str) ){ //以尖括號為開頭的一定是建立標籤
              return "html";
          }else if( /[+~>\s]/.test(str) ){ //css3選擇器
              return "css3";
          }else if( /^\./.test(str) ){ //單個類名獲取
              return "className";
          }else if( /^#/.test(str) ){ //id
              return "id";
          }else if( /^\w+$/.test(str) ){ //標籤(任意字元)
              return "tag";
          }
        }
        arr = obj[isSelector(selector)](selector);
      } else if(typeof selector === "object"){
        //進來的是節點
        arr = [selector];
      }   
       Liang.each(arr, function(v, i){
          this[i] = v;
        }, this); //this修改為指向例項物件
       this.length = arr.length;
    },
  };
  //關鍵程式碼: 設定init的原型 = Liang類的原型,可以使得init訪問到Liang的原型
  Liang.prototype.init.prototype = Liang.prototype;
  
  //靜態方法
  //遍歷
  Liang.each = function(obj, fn, that) {
    // 遍歷物件  回撥函式   可選引數，改變this指向的物件
    for (var i = 0, len = obj.length; i < len; i++) {
      var bool = fn.call(that || obj[i], obj[i], i, obj);
      if (bool === false) {
        break;
      } else if (bool === true) {
        continue;
      }
      /* false : 結束整個for迴圈  true : 跳出本次for迴圈 */
    }
  };
  //設定$為全域性window的屬性
  window.$ = Liang;
})(window, document, undefined);
複製程式碼

相關文章