摘要：為什么說不要過度依賴呢從項目方面來講，一些項目在開發中實際用到內置功能不多，這樣會造成項目臃腫另一方面，目前的主流已經傾向于原生開發。而在之前一篇不要過度依賴一一文中已經介紹了部分使用原生實現功能的代碼，這一章將繼續列舉。

為什么說不要過度依賴JQuery呢？從項目方面來講，一些項目在開發中實際用到JQuery內置功能不多，這樣會造成項目臃腫；另一方面，目前的主流已經傾向于原生開發。

而在之前一篇《不要過度依賴JQuery（一）》一文中已經介紹了部分使用原生JavaScript實現JQuery功能的代碼，這一章將繼續列舉。

1、位置

獲取相對于文檔的位置

$("#test").offset() 

function offset(elem) {
  var rect = elem.getBoundingClientRect()    
  return {      
    top: rect.top + document.body.scrollTop,      
    left: rect.left + document.body.scrollLeft    
  }
}

offset(document.getElementById("test"));

獲取相對于具有定位（非static）的父元素（祖先元素）的位置：

$("#test").position()

var t = document.getElementById("test");
var position = {top: t.offsetTop, left: t.offsetLeft};

獲取相對于可視區左上角的位置

var offset = $("#test").offset();
var position = { top: offset.top - document.body.scrollTop,
          left: offset.left - document.body.scrollLeft
}

var position = document.getElementById("test").getBoundingClientRect();

2、尺寸

獲取包含內邊距（padding）和邊框（border）的元素高寬

var width = $("#test").outerWidth();
var height = $("#test").outerHeight();

var t = document.getElementById("test");
var width = t.offsetWidth;
var height = t.offsetHeight;

獲取元素內容的總高度

var t = document.getElementById("test");

/*在沒有滾動條的情況下，元素內容的總高度*/
t.scrollHeight
/*在沒有滾動條的情況下，元素內容的總寬度*/
t.scrollWidth

視口大小

var pageWidth = window.innerWidth || document.documentElement.clientWidth;
var pageHeight = window.innerHeight || document.documentElement.clientHeight;

3、綁定自定義數據

/*綁定*/
$("#test").data("name", "TG");
/*讀取*/
$("#test").data("name");
/*移除*/
$("#test").removeDate("name");

var t = document.getElementById("test");
/*綁定*/
t.dataset.name = "TG";
/*讀取*/
t.dataset.name
/*移除*/
delete t.dataset.name

4、事件

綁定事件

$("#test").on("click", function(){})

var addEvent = function(dom, type, handle, capture) {   
  if(dom.addEventListener) {   
    dom.addEventListener(type, handle, capture);   
  } else if(dom.attachEvent) {   
    dom.attachEvent("on" + type, handle);   
  }
};

var t = document.getElementById("test");
addEvent(t, "click", function(){});

移除事件

$("#test").off("click", fn);

var deleteEvent = function(dom, type, handle) {   
  if(dom.removeEventListener) {    
    dom.removeEventListener(type, handle);   
  } else if(dom.detachEvent) {   
    dom.detachEvent("on" + type, handle);   
  }
};

var t = document.getElementById("test");
deleteEvent(t, "click", fn);

事件代理

$(document).on("click", ".test", fn);

function eventBroker(e, className, fn) {    
  var target = e.target;  
  while(target) {   
    if(target && target.nodeName == "#document") {   
      break;    
    } else if(target.classList.contains(className)) {  
      fn();   
      break;   
    };   
    target = target.parentNode;   
  };   
}

addEvent(document, "click", function(e){
  eventBroker(e, "test", function(){});
});

獲取Event對象

$("#test", "click", function(event){
  event = event.originalEvent;
});

var t = document.getElementById("test");
addEvent(t, "click", function(event){
  event = event || window.event;
});

DOM加載完畢

$(document).ready(function(){});

function ready(fn) {   
  if (document.readyState != "loading"){   
    // ie9+   
    document.addEventListener("DOMContentLoaded", fn);   
  } else {   
    // ie8   
    document.attachEvent("onreadystatechange", function() {   
      if (document.readyState != "loading"){   
        fn();   
      }   
    });   
  }  
}

指定事件觸發

$("#test").trigger("click");

function trigger(elem, type) {
  if (document.createEvent) {   
    var event = document.createEvent("HTMLEvents");   
    event.initEvent(type, true, false);   
    elem.dispatchEvent(event);  
  } else {   
    elem.fireEvent("on" + type);  
  }
}

var t = document.getElementById("test");
trigger(t, "click");

5、AJAX

GET

$.get("test.php", { name: "TG"},   
  function(data){   
    console.log(data);   
});

var xhr= new XMLHttpRequest();  
xhr.open("GET", "test.php?name=TG", true); // false（同步）  
xhr.onreadystatechange = function() {   
  if (xhr.readyState === 4) {   
    if (xhr.status >= 200 && xhr.status < 400) {   
      // 成功   
      var data = JSON.parse(xhr.responseText);   
    } else {   
     // 錯誤   
    }   
  }  
};
xhr.send(null);

POST

$.post("test.php", { name: "TG"},   
  function(data){   
    console.log(data);   
});

var xhr= new XMLHttpRequest();   
xhr.open("POST", "test.php", true); // false（同步）  
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  // 必需
xhr.onreadystatechange = function() {       
  if (xhr.readyState === 4) {       
    if (xhr.status >= 200 && xhr.status < 400) {       
      // 成功       
      var data = JSON.parse(xhr.responseText);       
    } else {       
      // 錯誤       
    }       
  }     
};

var data = {name: "t"};  
xhr.send(data);

Fetch 請求

GET

fetch(url).then(function (response) {      
  return response.json();    
}).then(function (jsonData) {      
  console.log(jsonData);    
}).catch(function () {      
  console.log("出錯了");    
});

POST

fetch(url,{   
  method: "POST",   
  headers: {   
    "Content-Type": "application/x-www-form-urlencoded"   
  },   
  body: "name=TG&love=1"
}).then(function(response){})

6、數組

判斷元素是否在數組內

$.inArray(item, array)

array.indexOf(item)

判斷是否是數組

$.isArray(arr)

Array.isArray(arr)

數組迭代

$.map(arr, function(value, index) {})

arr.map(function(value, index) {})

7、特效

隱藏顯示

$("#test").hide();

var t = document.getElementById("test");
t.style.display = "none";

$("#test").show();

t.style.display = "block";

原文鏈接：不要過度依賴JQuery（二）

如有錯誤，歡迎指正！如有更好建議，歡迎留言！