那些原生JavaScript

fantix 发布于2019-08-26 11:29 / 1388人阅读

摘要：最近在用写页面，当然了在移动里引入或这些框架，肯定是极不理性的。原生挺简单，为何需要的成功当时是因为这些浏览器不兼容，让开发者崩溃，而且上浏览器性能好，跨平台兼容也不影响性能。但根本就不是为手机设计的。

最近在用mui写页面，当然了在移动App里引入jq或zepto这些框架，肯定是极不理性的。
原生JS挺简单，为何需要jq？
jq的成功当时是因为ie6、7、8、9、10、chrome、ff这些浏览器不兼容，让开发者崩溃，而且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;

创建元素

//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这样较现代的浏览器，那么你可以开始使用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);

获取子节点

//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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107007.html

【译】《学习JavaScript设计模式》（二）

摘要：学习模式设计的过程中，我们遇到原生模式这玩意儿也不是啥大惊小怪的事。最好的设计模式通常不直接给出问题的答案，这被人认为是解决困难问题的必要步骤。原书链接Learning JavaScript Design Patterns水平有限很多地方不通顺，错翻漏翻欢迎交流。模式测试，原生模式&约法三章记住并不是所有的算法啊，最佳实践啊，解决方案啊什么的都可以被称为一个完整的模式的。很可能它...

lifefriend_007 2019-08-19 18:16 评论0 收藏0
Chrome DevTools：在 Profile 性能分析中显示原生 javascript 函数

摘要：当我们在中查看代码的调用栈时，这些函数是被过滤掉的。当我们捕获调用栈时，并不会捕获写的函数。不过，在引擎中很多原生函数都是使用语言编写的。如果我们开启设置，将会在中显示这些函数。分析器也会不一致。本文翻译自 Chrome DevTools: Show native functions in JS Profile，中文版首发在我的知乎专栏 V8 源码及周边。在 Chrome DevT...

xuexiangjys 2019-08-20 15:26 评论0 收藏0
[译] 深入理解 Promise 五部曲：4. 扩展问题

摘要：有一个和相关的更大的问题。最后，请负有责任感并且使用安全的扩展。深入理解五部曲异步问题深入理解五部曲转换问题深入理解五部曲可靠性问题深入理解五部曲扩展性问题深入理解五部曲乐高问题最后，安利下我的个人博客，欢迎访问原文地址：http://blog.getify.com/promis... 现在，我希望你已经看过深入理解Promise的前三篇文章了。并且假设你已经完全理解Promises...

Shimmer 2019-08-21 12:24 评论0 收藏0
垃圾回收机制——总结自《JavaScript高级程序设计》

摘要：为此，垃圾收集器会按照固定的时间间隔或代码执行中预定的收集时间，周期性地执行这一操作。例如，其和中的对象就是使用以，组件对象模型对象的形式实现的，而对象的垃圾收集机制采用的就是引用计数策略。垃圾收集(garbage collection) 在编写 JavaScript 程序时，开发人员不用再关心内存使用问题，所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其...

bovenson 2019-08-20 11:18 评论0 收藏0
2019年，Flutter 和 React Native 谁主沉浮?

摘要：移动行业渴望进行一场革命，以遏制移动应用程序开发过程中出现的问题。毫无疑问，它得到很好的回应。如今，是沃尔玛优步和特斯拉等应用程序的幕后支持者。由制作，而受社区青睐。然而，目前，的只有和支持。在提供灵活性和定制方面，显然处于领先地位。 Flutter 与 React Native混淆了吗？本文是帮助你了解这两个应用程序开发框架区别指南。咱们知道，几年前开发和维护iOS和Android...

xioqua 2019-08-23 18:04 评论0 收藏0