亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

那些原生JavaScript

fantix / 1491人閱讀

摘要：最近在用寫頁(yè)面，當(dāng)然了在移動(dòng)里引入或這些框架，肯定是極不理性的。原生挺簡(jiǎn)單，為何需要的成功當(dāng)時(shí)是因?yàn)檫@些瀏覽器不兼容，讓開發(fā)者崩潰，而且上瀏覽器性能好，跨平臺(tái)兼容也不影響性能。但根本就不是為手機(jī)設(shè)計(jì)的。

最近在用mui寫頁(yè)面，當(dāng)然了在移動(dòng)App里引入jq或zepto這些框架，肯定是極不理性的。
原生JS挺簡(jiǎn)單，為何需要jq？
jq的成功當(dāng)時(shí)是因?yàn)閕e6、7、8、9、10、chrome、ff這些瀏覽器不兼容，讓開發(fā)者崩潰，而且pc上瀏覽器性能好，跨平臺(tái)兼容也不影響性能。但jq根本就不是為手機(jī)設(shè)計(jì)的。
手機(jī)上只有webkit瀏覽器（忽略wp，反正mui不支持wp），根本就不需要jq這種封裝框架來(lái)操作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";
是否包含某個(gè) 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功能，它讓增加和刪除類變得更簡(jiǎn)單
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é)點(diǎn) 
//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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107007.html

相關(guān)文章

  • 【譯】《學(xué)習(xí)JavaScript設(shè)計(jì)模式》（二）

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

    lifefriend_007 評(píng)論0 收藏0

  • Chrome DevTools：在 Profile 性能分析中顯示原生 javascript 函數(shù)

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

    xuexiangjys 評(píng)論0 收藏0

  • [譯] 深入理解 Promise 五部曲：4. 擴(kuò)展問(wèn)題

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

    Shimmer 評(píng)論0 收藏0

  • 垃圾回收機(jī)制——總結(jié)自《JavaScript高級(jí)程序設(shè)計(jì)》

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

    bovenson 評(píng)論0 收藏0

  • 2019年，F(xiàn)lutter 和 React Native 誰(shuí)主沉浮?

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

    xioqua 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

fantix

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<