你不需要jQuery(四)

jQuery是个好东西。它诞生于IE6在互联网称霸的那个时代。jQuery的存在让我们的代码能很好的兼容各种平台。

然而,到如今,浏览器技术已经取得了巨大的进步。我们可以自由的使用所有最新众多ES5/ES6提供的原生API,配合革命性的HTML5 API,我们对DOM的操作变得从未如此的容易。WEB开发人员突然发现,没有jQuery其实也能轻松高效的完成项目开发。

不要误会,jQuery仍然是一个强大的工具包,大多时候我们还是要优先选择它。然而,对于一些简单的任务,一些小项目,一个简单的页面,或者移动版网站上,我们使用简单的纯js也许更有效率。下面的10个技巧希望能给大家一些启发。

1. 监听页面加载完成事件

写jQuery代码时,我们通常首先做的是把代码包裹在$(document).ready()里,这样,当DOM加载完成,可以操作时,包裹的代码才会去执行。除了使用jQuery,我们还可以使用 DOMContentLoaded 事件代替,下面是用例:

// Add an event listener of DOMContentLoaded to the whole document and call an anonymous function.
// You can then wrap your code in that function's brackets
// and it will execute once loading is complete.

document.addEventListener('DOMContentLoaded', function () {

    // Our hawaiian greeting is displayed as soon as the page loads,

    console.log('Aloha');

});

2. 查找/选择页面元素

曾经,我们如果想捕捉一个/一批元素,只能通过 id, class 和 tag 名称,jQuery给我提供了革命性的更具灵活性的基于css的查找方法。随着浏览器的进步,我们现在可以使用两个新型的原生JavaScript API – querySelectorquerySelectorAll:

// We can use document.querySelector to get the first element that matches a certain criteria.
// It's only argument is a string containing one or more CSS selectors.

var lochNess = document.querySelector(".monsters");

console.log("It's from Scotland - " + lochNess.textContent);

// We can also get all elements of a certain type or class by using document.querySelectorAll.
// This returns a NodeList of all the elements that fit our criteria.

var scary = document.querySelectorAll(".monsters");

console.log("Hide and seek champions: ");

for (var i = 0; i < scary.length; i++) {

    console.log(scary[i].innerHTML);

}
<ul>

    <li class="monsters">Nessy</li>

    <li class="monsters">Big foot</li>

    <li class="monsters">La chupacabra</li>

</ul>

3. 添加和移除事件监听器

事件监听是WEB应用里非常常见的操作。在过去,IE里的事件监听和其它浏览器的监听方法是不统一/不兼容的。但如今,我们只需要使用 addEventListener就可以了:

var btn = document.querySelectorAll("button"),
    list = document.querySelector("ul");

// We call the addEventListener method on our desired event target(in this case a button).
// This will start a listener that will wait until a click is generated on the element.

btn[0].addEventListener("click", function () {

    // When this button is clicked we want to enable zooming of our list.

    // To do this we add an event listener to our list itself,
    // so when the cursor hovers it, the enlarge function gets called.

    list.addEventListener("mouseover", enlarge);
});

// To disable the zooming we can simply use removeEventListener.

btn[1].addEventListener("click", function () {

    // Removing event listeners doesn't work on anonymous functions, so always use a named one.

    list.removeEventListener("mouseover", enlarge);
});

// Let's create our enlarge function.

var enlarge = function () {

    // Add class zoomed to the unordered list.

    list.classList.add("zoomed");

    // When the cursor leaves the list return to normal size by removing the class.

    list.addEventListener("mouseout", function () {

        list.classList.remove("zoomed")

    });

};

// Now we want to be able to color the names by clicking them.

// When a 'click' is registered on one of the list entries it should change its color to green.
// Thanks to event delegation we can actually add an event listener to the whole parent object.
// This way we don't have to add separate event listeners to each <li>.

list.addEventListener("click", function (e) {

    // Make the coloring happen only to the clicked element by taking the target of the event.

    e.target.classList.add('green');

});
<button>Enable zoom</button>

<button>Disable zoom</button>

<br><br>

Click on any of the names to color them green

<ul>

    <li>Chewbacca</li>

    <li>Han Solo</li>

    <li>Luke</li>

    <li>Boba fett</li>

</ul>
.green {
    color: green;
}

.zoomed {
    cursor: pointer;
    font-size: 23px;
}

addEventListener 的用法看起来跟jQuery里的事件监听用法非常相似。

4. 对类和属性的操作

以前,执行对于页面元素css类的各种操作(查找、增加、删除等),如果不用jQuery,那是一件非常麻烦的事情。这样的历史已经一去不复返了,这样要感谢 classList 属性。而使用 setAttribute, 我们可对元素属性进行操作。

var btn = document.querySelectorAll("button"),
    div = document.querySelector("#myDiv");

btn[0].addEventListener("click", function () {

    // Get any attribute easily.
    console.log(div.id);
});


// Element.classList stores all classes of the element in the form of a DOMTokenList.

var classes = div.classList;


btn[1].addEventListener("click", function () {

    console.log(classes);

});

btn[2].addEventListener("click", function () {

    // 可以增加和移除某个类名
    classes.add("red");

});

btn[3].addEventListener("click", function () {

    // 可以翻转某个类名
    classes.toggle("hidden");

});
<div id='myDiv' class="square"></div>

<button>Display id</button>

<button>Display classes</button>
<button>Color red</button>
<button>Toggle visibility</button>
.square {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    border: 1px solid grey;
    border-radius: 5px;
}

.hidden {
    visibility: hidden;
}

.red {
    background-color: red;
}

5. 获取或设置元素的内容

jQuery里有个非常方便的 text() 和 html() 方法,相对应的,在元素JavaScript里,我们可以使用 textContent 和 innerHTML 两个属性,这两个属性其实并不是新出现的:

var myText = document.querySelector("#myParagraph"),
    btn = document.querySelectorAll("button");

// We can easily get the text content of a node and all its descendants.

var myContent = myText.textContent;

console.log("textContent:  " + myContent);

// When using textContent to alter the text of an element
// it deletes the old content and replaces it with new.

btn[0].addEventListener('click', function () {
    
    myText.textContent = " Koalas are the best animals ";
    
});

// If we want to grab all the HTML in a node (including the tags) we can use innerHTML.

var myHtml = myText.innerHTML;

console.log("innerHTML:  " + myHtml);

// To change the html simply supply new content.
// Of course we aren't limited to text only this time.

btn[1].addEventListener('click', function () {
    
    myText.innerHTML = "<button> Penguins are the best animals </button>";
    
});
<p id="myParagraph"><strong> Which are the best animals? </strong></p>

<button>Koalas</button>

<br>

<button>Penguins</button>

6. 循环数组

jQuery里提供了很多实验的方法,比如each() 和 map(),而在新版的JavaScript api里,我们有了原生的 forEachmap ,需要注意的是,它们参数的用法有些不同,并且在回调函数里 this 的代表性也有些不同。

var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];

// ForEach automatically iterates through an array.

ninjaTurtles.forEach(function (entry) {
    console.log(entry);
});

// The map method calls a function on every element of an array and creates a new array with the results.

var lovesPizza = ninjaTurtles.map(function (entry) {

    return entry.concat(" loves pizza!");

});

console.log(lovesPizza);

7. AJAX

新版的JavaScript API里提供了一个全新的可以实现ajax的API——fetch,这个api采用了全新的 Promise 架构,使用起来更方便,更灵活,详细用法请参考《你不需要jQuery(三):新AJAX方法fetch() 》。

总结

如果你追求极简,不允许页面有半点臃肿,以更快的加载速度和更好的用户体验为目标,那么,你应该试试上面的技巧,不要因为一个很小的功能而滥用jQuery,浏览器在革新,JavaScript在进步,原生的API逐渐取代jQuery是潮流,WEB程序员应多关注这方面的知识技巧,不是吗?

阅读余下内容
 

一条回应:“你不需要jQuery(四)”

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号