抛弃jQuery 深入原生的JavaScript
虽然我已经做网站建设工作10多年了,但我从最近3年才开始更多地学习如何更好的将纯JavaScript用于工作中,而不总是将jQuery考虑在第一位。现在我每天学习很多东西。这个过程让我觉得Adtile的JavaScript SDK 更像是在创建一个开源工程,而不是“具体的工作”,不得不说,我很喜欢那样。
今天,我准备将在过去几年学到的一些基础东西与大家一起分享,这将可能帮你深入纯 JavaScript的世界,让你能更简单的做出决定——jQuery在你下个工程中是否需要。
逐步增强
虽然像jQuery这样的库有助于解决许多浏览器之间不兼容的问题,但当你一旦开始使用纯JavaScript来完成所有工作的时候你确实会变得对他们很熟悉。为了避免写包含浏览器修改和只能解决浏览器兼容问题的JavaScript代码,我建议使用特征检测只将更现代化的浏览器作为目标来培养逐步增强的经验。这并不意味着从像IE7这样的浏览器上得不到任何东西,这只能说明在JavaScript没有增强的情况下他们得到一个更基础的经验。
我们是怎么做的
我们有一个叫做”feature.js”的分离的JavaScript部分,它拥有所有的功能测试。真实的测试列表比这长多了,但让我们稍晚点再回到这问题吧。为了消除一些老浏览器的不兼容,我们使用如下两个测试:
var feature = {addEventListener : !!window.addEventListener,querySelectorAll : !!document.querySelectorAll, };
然后,在主应用程序部分,我们检测这些特性是否能被下面例子中简单的“if”语句支持。如果不被支持,那么浏览器将不会执行如下的任何代码:
if (feature.addEventListener && feature.querySelectorAll) {this.init(); }
这两个测试确保我们在JavaScript中使用CSS选择器时有本地方法(querySelectorAll)可用,添加和删除事件的简便方法(addEventListener)且浏览器标准支持比IE8的好。阅读有关这个方法的更多内容请访问BBC blog的 “Cutting the mustard” 文章。
浏览器支持
这儿有一个我们测试的哪些浏览器支持这个特性,且日后能保持运行JavaScript的粗略列表:
- IE9+
- Firefox 3.5+
- Opera 9+
- Safari 4+
- Chrome 1+
- iPhone and iPad iOS1+
- Android phone and tablets 2.1+
- Blackberry OS6+
- Windows 7.5+
- Mobile Firefox
- Opera Mobile
基础原生JavaScript方法
让我们开始关注与jQuery相比,最基础且需求频繁的功能在纯JavaScript中是如何工作的。对于每个例子,我都打算提供jQuery和纯JavaScript两种方法。
Document Ready 事件
在jQuery中,你们中的许多人可能过去常常像这样使用 document.ready :
$(document).ready(function() {// Code });
但是你知道,你可以将所有的JavaScript放在页面的底端,但他们确实是一回事吗?JavaScript同样拥有一个DOM内容加载事件的侦听器,而不是使用jQuery的document.ready:
document.addEventListener("DOMContentLoaded", function() {// Code }, false);
选择器API
JavaScript的本地选择器API非常优秀。它对CSS选择器是有用的且jQuery提供的非常类似。如果你过去经常在jQuery中这样写:
var element = $("div");
现在你可以用如下的语句来替代:
var element = document.querySelector("div");
或者选择所有div的某些内部容器:
var elements = document.querySelectorAll(".container div");
你也可以针对特定元素进行查询来找到它的子元素:
var navigation = document.querySelector("nav"); var links = navigation.querySelectorAll("a");
很简单,容易理解且现在不需要太多的代码,不是吗?更远一步来说,我们甚至可以自己建一个小型的JavaScript库来进行简单的DOM查询。以下是Andrew Lunny已经想出来的一些东西:
// This gives us simple dollar function and event binding var $ = document.querySelectorAll.bind(document); Element.prototype.on = Element.prototype.addEventListener;// This is how you use it $(".element")[0].on("touchstart", handleTouch, false);
遍历DOM
用纯JavaScript来遍历DOM比起用jQuery来说有一些困难。但也不是太困难。下面是一些简单的例子:
// Getting the parent node var parent = document.querySelector("div").parentNode;
// Getting the next node var next = document.querySelector("div").nextSibling;
// Getting the previous node var next = document.querySelector("div").previousSibling;
// Getting the first child element var child = document.querySelector("div").children[0];
// Getting the last child var last = document.querySelector("div").lastElementChild;
添加和删除样式名(class name)
使用jQuery,添加、删除和检查一个元素是否有确定的类是很简单的事。用纯JavaScript会有一些复杂,但也不是太复杂。给元素一个叫做“foo”的类且替换目前所有的类:
// Select an element var element = document.querySelector(".some-class");
// Give class "foo" to the element element.className = "foo";
在不替换目前类的前提下增加类:
element.className += " foo";
从html元素中移除”no-js”类且用”js”来替代:
<html class="no-js"> <head><script>document.documentElement.className = "js";</script>
这相当简单,对不对?下一步,只移除某些类稍微有点复杂。我一直在单独部分使用这个叫做util.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,""); }
然后,在主应用程序部分,我一直像这样使用:
removeClass(element, "foo");
如果针对某些类你同样想检查一个元素,那么就像jQuery的hasClass一样。你可能需要把这些代码加入到你的utils工具中:
// hasClass, takes two params: element and classname function hasClass(el, cls) {return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className); }
然后可以这样使用:
// Check if an element has class "foo" if (hasClass(element, "foo")) {// Show an alert message if it doesalert("Element has the class!"); }
HTML5 的 classList API 简介
如果你只需要支持像IE10+,Chrome,FireFox,Opera和Safari这样较现代的浏览器,那么你可以开始使用HTML5的classList功能,它让增加和删除类变得更简单。
这是我在我们最新的开发者文档中最终做的事,随着功能的开发,这更像是UI的加强,且如果这不是现在的,其实际上并不是能打破经验的一些东西。
通过下面简单的”if”语句,你可以检测出浏览器是否支持这个功能:
if ("classList" in document.documentElement) {// classList is supported, now do something with it }
用classList来添加、删除、转换类:
// Adding a class element.classList.add("bar");
// Removing a class element.classList.remove("foo");
// Checking if has a class element.classList.contains("foo");
// Toggle a class element.classList.toggle("active");
使用classList的另一个好处是它比使用原始的类名属性表现得更好。如果你有像这样的元素:
<div id="test" class="one two three"></div>
你想操作哪一个:
var element = document.querySelector("#test"); addClass(element, "two"); removeClass(element, "four");
这些被类名属性读和写的方法将触发浏览器重绘。但这并不是我们是否应该用相应的classList方法的情况:
var element = document.querySelector("#test"); element.classList.add("two"); element.classList.remove("four");
用classList之后,最基本的类名属性仅在必要的时候进行更改。添加一个已经存在的类和移除一个不存在的类时,根本没有牵涉到类名属性,这意味着我们刚刚避免了两次重绘。
事件监听器
添加和移除一个元素的事件监听器在纯JavaScript和jQuery中都一样比较简单。当你必须要添加多个事件监听器时,事情就变得有点复杂了,但我会详细解释给你的。最简单的一个例子,当你单击一个元素时弹出一个警告信息,如下代码所述:
element.addEventListener("click", function() {alert("You clicked"); }, false);
为了让页面的所有元素都实现这个功能,我们必须依次重复每个元素且给他们添加事件监听器:
// Select all links var links = document.querySelectorAll("a");// For each link element [].forEach.call(links, function(el) {// Add event listenerel.addEventListener("click", function(event) {event.preventDefault();alert("You clicked");}, false);});
JavaScript有关事件监听器一个最伟大的功能就是“addEventListener” 能携带一个作为第二个参数的对象,这将会让它自动的寻找一个叫做“handleEvent”的方法然后调用它。Ryan Seddon在它的文章中已经彻底地介绍了这个方法,所以我只打算给一个最简单的例子,你可以通过在它的博客中学到更多的东西:
var object = {init: function() {button.addEventListener("click", this, false);button.addEventListener("touchstart", this, false);},handleEvent: function(e) {switch(e.type) {case "click":this.action();break;case "touchstart":this.action();break;}},action: function() {alert("Clicked or touched!");} };// Init object.init();
操作DOM
用纯JavaScript来操作DOM刚开始听起来就像一个可怕的想法,但比使用jQuery其实它并没有复杂多少。下面,我们会有一个例子,选择DOM的元素,克隆它,用JavaScript来操作克隆的样式,然后用被操纵的东西来替代原始的元素。
// Select an element var element = document.querySelector(".class");// Clone it var clone = element.cloneNode(true);// Do some manipulation off the DOM clone.style.background = "#000";// Replaces the original element with the new cloned one element.parentNode.replaceChild(clone, element);
在DOM中,如果除了附加在<body>中新创建div,你不想替代任何东西,那么你可以这样做:
document.body.appendChild(clone);
如果你觉得你想了解更多不同的DOM方法,我建议你可以拜读一下 Peter-Paul Koch的DOM Core tables。
进一步深入
在这儿我想再多分享两个我最近发现的先进技术。这些都是我们在创建Adtile的时候需要的功能,因此你也会觉得它们很有用。
在JS中决定响应图片的最大宽度
这是我最爱的之一,且如果你需要用JavaScript操作流体图片时这非常有用。由于浏览器默认返回当前被调整过大小的图片,我们必须要想一些其它的办法。幸运的是,现代浏览器目前已有解决的方案了:
var maxWidth = img.naturalWidth;
这将会给我们提供最大宽度100%像素的图片,且IE9,Chrome,Firefox,Safari和Opera都支持这个方法。我们也可以保留这个特性然后通过加载图片到内存中添加老浏览器的支持:
// Get image's max-width:100%; in pixels function getMaxWidth(img) {var maxWidth;// Check if naturalWidth is supportedif (img.naturalWidth !== undefined) {maxWidth = img.naturalWidth;// Not supported, use in-memory solution as fallback} else {var image = new Image();image.src = img.src;maxWidth = image.width;}// Return the max-widthreturn maxWidth; }
你应该注意到在检查宽度前,图片必须完全被加载。这是我们一直使用的用于确定它们有尺寸的方法:
function hasDimensions(img) {return !!((img.complete && typeof img.naturalWidth !== "undefined") || img.width); }
判断一个元素是否在视图窗口中
通过使用getBoundingClientRect方法,你可以获取页面中任何元素的位置。以下是一个简单的函数来表明它有多简单和多强大。这个函数有一个参数,那就是你想要检查的元素。当元素为可见时,函数将返回true:
// Determine if an element is in the visible viewport function isInViewport(element) {var rect = element.getBoundingClientRect();var html = document.documentElement;return (rect.top >= 0 &&rect.left >= 0 &&rect.bottom <= (window.innerHeight || html.clientHeight) &&rect.right <= (window.innerWidth || html.clientWidth)); }
上面的函数可以在给窗体添加一个”滚动”事件监听器,然后调用isInViewport()方法时使用。
结论
在你的下个项目中是否使用jQuery很大程度上取决于你所建的项目。如果你的项目需要大量的前端代码,那么你应该使用jQuery。然而,当你构建一个JavaScript插件或库时,你应该只考虑纯JavaScript。使用纯JavaScript意味着更少的请求和更少的数据加载。这同样意味着你不必强迫开发人员在他们的项目中加jQuery。
转载:http://www.admin10000.com/document/4281.html
抛弃jQuery 深入原生的JavaScript相关推荐
- SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可...
jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可 转载于:https://www.cnblogs.com/npk19195global/p/4482 ...
- 原生JS javascript解除绑定事件 JS删除绑定事件
原生JS javascript解除绑定事件 JS删除绑定事件 一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...
- 全面解析jQuery $(document).ready()和JavaScript onload事件
这篇文章主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下 对元素的操作和事件的绑 ...
- jQuery数组对象转javascript数组
当我们在前端开发中,使用了jQuery时,我们通常通过$(".box-item")的方式获取的是一个jQuery对象是一个类数组对象,当我们需要向后台传输的数据中,使用的是java ...
- 抛弃jQuery,深入原生的JavaScript
虽然我已经做网站建设工作10多年了,但我从最近3年才开始更多地学习如何更好的将纯JavaScript用于工作中,而不总是将jQuery考虑在第一位.现在我每天学习很多东西.这个过程让我觉得Adtile ...
- [转]抛弃jQuery,使用原生JavaScript
原文链接 Document Ready 事件 在jQuery中,document.ready可以让代码在整个文档加载完毕之后执行: $(document).ready(function() {// C ...
- jQuery使用最广泛的javascript函数库
[目录] 一.选择网页元素 二.改变结果集 三.链式操作 四.元素的操作:取值和赋值 五.元素的操作:移动 六.元素的操作:复制.删除和创建 七.工具方法 八.事件操作 九.特殊效果 [正文] 一.选 ...
- 原生js javascript 实现进度条拖动---移动端
最近的需求有个简单的移动端页面,需要在页面中实现一个进度条的拖动,因为没引入什么框架,所以只能原生JavaScript手写了, 效果图: 代码:这些代码可以复制到本地一个html文件中,直接双击打开, ...
最新文章
- 美团应届生年薪达 35 万?究竟什么导致薪资倒挂?
- 【java项目实战】代理模式(Proxy Pattern),静态代理 VS 动态代理
- 如何利用python爬虫获取网易云音乐某个歌手简介_Python 爬虫获取网易云音乐歌手信息...
- MATLAB实战系列(三十五)-MATLAB基于BP神经网络的光伏发电太阳辐照度预测
- php集成jpush教程,Laravel 集成 JPush 极光推送指北
- 通过Python扫描代码关键字并进行预警
- python自动化运维之python2.6升级2.7和集中病毒扫描
- 算法笔记_132:最大流量问题(Java)
- PyTorch命令行中执行python程序使用指定的GPU
- Java GC 原理
- 电子工艺实训考核装置
- 动易html在线编辑器,动易CMS静态页调用FCK编辑器的代码
- 利用pytorch实现图像分类
- 同IP不同端口导致session冲突的解决方法
- 关于12306网站抢票的架构设计
- 离婚协议中的几个重点
- C语言三个点“...“符号含义之数组批量赋相同值
- Polkadot波卡链众筹成本价与总量、创始人团队简介
- 模糊数学 2、基本的一些模糊矩阵,以及模糊矩阵的运算
- 极客日报:雷军吐槽友商“PPT首发”,联想高管反击;iPhone 6 Plus成过时产品;IPython 7.30正式发布
热门文章
- jquery 插件 分析
- Linux下如何用GDB调试c++程序 [版本2]
- 量子计算机退相干问题怎么办,量子退相干
- mysql 选取数据库_mysql选取数据库
- python批量打印mathcad_Print Conducto全能批量打印工具
- 大数据分析平台的功能板块
- 大数据分析的四大趋势有哪些
- 大数据可视化的应用场景
- 如何借助大数据提升城市治理现代化水平
- 用easyx画五角星_冷军画了一把破剪刀, 竟然卖到了160万,被专家抨击:乱涂鸦!得奖后专家顿时不说话了...