那些原生JavaScript

fantix 發(fā)布于2019-08-26 11:29 / 1434人閱讀

摘要：最近在用寫頁面，當然了在移動里引入或這些框架，肯定是極不理性的。原生挺簡單，為何需要的成功當時是因為這些瀏覽器不兼容，讓開發(fā)者崩潰，而且上瀏覽器性能好，跨平臺兼容也不影響性能。但根本就不是為手機設計的。

最近在用mui寫頁面，當然了在移動App里引入jq或zepto這些框架，肯定是極不理性的。
原生JS挺簡單，為何需要jq？
jq的成功當時是因為ie6、7、8、9、10、chrome、ff這些瀏覽器不兼容，讓開發(fā)者崩潰，而且pc上瀏覽器性能好，跨平臺兼容也不影響性能。但jq根本就不是為手機設計的。
手機上只有webkit瀏覽器（忽略wp，反正mui不支持wp），根本就不需要jq這種封裝框架來操作dom。

選擇元素

//jq
$(".el");
//js    
document.querySelector("div");
div.querySelectorAll(".el");
//mui
mui(".el")[0];

父、兄弟元素

//jq
$(".el").parent();
$(".el").prev();
$(".el").next();
$(".el").last();
$(".el").first();
//js
document.querySelector(".el").parentNode;
document.querySelector(".el").previousElementSibling;
document.querySelector(".el").nextElementSibling;  
document.querySelector(".el").lastElementChild;
document.querySelector(".el").children[0];

獲取元素文本

//jq
$(".el").html();
$(".el").val();
$(".el").text();
$(el).replaceWith(string);
//js
document.getElementById("el").innerHTML;
document.getElementById("el").value;
document.getElementById("el").textContent
document.getElementById("el").outerHTML = string;

創(chuàng)建元素

//jq
var newEl = $("");
//js
var newEl = document.createElement("div");

Set/get屬性

//jq
$(".el").filter(":first").attr("key", "value");
$(".el").filter(":first").attr("key");
$(".el").addClass("class");
$(".el").removeClass("class");
$(".el").toggleClass("class");
$(el).css("border-width", "20px");
//js
document.querySelector(".el").setAttribute("key", "value");
document.querySelector(".el").getAttribute("key");
document.querySelector(".el").classList.add("class");
document.querySelector(".el").classList.remove("class");
document.querySelector(".el").classList.toggle("class");
document.querySelector(".el").style.borderWidth = "20px";

附加

//jq
$(".el").append($(""));
//js  
document.querySelector(".el").appendChild(document.createElement("div"));

克隆

//jq
var clonedEl = $(".el").clone();
//js
var clonedEl = document.querySelector(".el").cloneNode(true);

移除

//jq
$(".el").remove();
// js
var toRemove = document.querySelector(el);
toRemove.parentNode.removeChild(toRemove);

ajax

//jq
$.get("url", function (data) {

});
$.post("url", {data: data}, function (data) {
 
});
//js
// get
var xhr = new XMLHttpRequest();
 
xhr.open("GET", url);
xhr.onreadystatechange = function (data) {
 
}
xhr.send();
 
// post
var xhr = new XMLHttpRequest()
 
xhr.open("POST", url);
xhr.onreadystatechange = function (data) {
 
}
xhr.send({data: data});

顯示和隱藏

//jq
$(el).show();
$(el).hide();
//js
el.style.display = "";
el.style.display = "none";

是否包含某個 class

//jq
$(el).hasClass(className);
//js
if (el.classList)
  el.classList.contains(className);
else
  new RegExp("(^| )" + className + "( |$)", "gi").test(el.className);

添加 Class

 //jq
 $(el).addClass(className);
 //js
 if (el.classList)
  el.classList.add(className);
else
  el.className += " " + className;

移除class

//jq
$(el).removeClass(className);
//js
// removeClass, takes two params: element and classname
function removeClass(el, cls) {
  var reg = new RegExp("(s|^)" + cls + "(s|$)");
  el.className = el.className.replace(reg, " ").replace(/(^s*)|(s*$)/g,"");
}

如果你只需要支持像IE10+,Chrome,FireFox,Opera和Safari這樣較現(xiàn)代的瀏覽器，那么你可以開始使用HTML5的classList功能，它讓增加和刪除類變得更簡單

el.classList.add(className);
el.classList.remove("foo")
el.classList.contains("foo");
el.classList.toggle("active");

插入 HTML

//jq
$(el).before(htmlString);
$(parent).append(el);
$(el).after(htmlString);
//js
el.insertAdjacentHTML("beforebegin", htmlString);
parent.appendChild(el);
el.insertAdjacentHTML("afterend", htmlString);

獲取子節(jié)點

//jq
$(el).children();
//js
el.children

Trim

//jq
$.trim(string);
//js
string.trim();

參考：
http://youmightnotneedjquery.com/
http://www.quirksmode.org/dom/core/
http://blog.jobbole.com/52195/
http://ourjs.com/detail/535556a1ed9add0e26000002
http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html

云服務器 GPU云服務器原生javascript javascript原生原生javascript事件原生的javascript

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107007.html

【譯】《學習JavaScript設計模式》（二）

摘要：學習模式設計的過程中，我們遇到原生模式這玩意兒也不是啥大驚小怪的事。最好的設計模式通常不直接給出問題的答案，這被人認為是解決困難問題的必要步驟。原書鏈接Learning JavaScript Design Patterns水平有限很多地方不通順，錯翻漏翻歡迎交流。模式測試，原生模式&約法三章記住并不是所有的算法啊，最佳實踐啊，解決方案啊什么的都可以被稱為一個完整的模式的。很可能它...

lifefriend_007 2019-08-19 18:16 評論0 收藏0
Chrome DevTools：在 Profile 性能分析中顯示原生 javascript 函數(shù)

摘要：當我們在中查看代碼的調(diào)用棧時，這些函數(shù)是被過濾掉的。當我們捕獲調(diào)用棧時，并不會捕獲寫的函數(shù)。不過，在引擎中很多原生函數(shù)都是使用語言編寫的。如果我們開啟設置，將會在中顯示這些函數(shù)。分析器也會不一致。本文翻譯自 Chrome DevTools: Show native functions in JS Profile，中文版首發(fā)在我的知乎專欄 V8 源碼及周邊。在 Chrome DevT...

xuexiangjys 2019-08-20 15:26 評論0 收藏0
[譯] 深入理解 Promise 五部曲：4. 擴展問題

摘要：有一個和相關的更大的問題。最后，請負有責任感并且使用安全的擴展。深入理解五部曲異步問題深入理解五部曲轉換問題深入理解五部曲可靠性問題深入理解五部曲擴展性問題深入理解五部曲樂高問題最后，安利下我的個人博客，歡迎訪問原文地址：http://blog.getify.com/promis... 現(xiàn)在，我希望你已經(jīng)看過深入理解Promise的前三篇文章了。并且假設你已經(jīng)完全理解Promises...

Shimmer 2019-08-21 12:24 評論0 收藏0
垃圾回收機制——總結自《JavaScript高級程序設計》

摘要：為此，垃圾收集器會按照固定的時間間隔或代碼執(zhí)行中預定的收集時間，周期性地執(zhí)行這一操作。例如，其和中的對象就是使用以，組件對象模型對象的形式實現(xiàn)的，而對象的垃圾收集機制采用的就是引用計數(shù)策略。垃圾收集(garbage collection) 在編寫 JavaScript 程序時，開發(fā)人員不用再關心內(nèi)存使用問題，所需內(nèi)存的分配以及無用內(nèi)存的回收完全實現(xiàn)了自動管理。這種垃圾收集機制的原理其...

bovenson 2019-08-20 11:18 評論0 收藏0
2019年，F(xiàn)lutter 和 React Native 誰主沉浮?

摘要：移動行業(yè)渴望進行一場革命，以遏制移動應用程序開發(fā)過程中出現(xiàn)的問題。毫無疑問，它得到很好的回應。如今，是沃爾瑪優(yōu)步和特斯拉等應用程序的幕后支持者。由制作，而受社區(qū)青睞。然而，目前，的只有和支持。在提供靈活性和定制方面，顯然處于領先地位。 Flutter 與 React Native混淆了嗎？本文是幫助你了解這兩個應用程序開發(fā)框架區(qū)別指南。咱們知道，幾年前開發(fā)和維護iOS和Android...

xioqua 2019-08-23 18:04 評論0 收藏0