linux安装及使用

Introduction

正如jQuery所宣称的一样，Write Less, Do More。很多时候我们喜欢用它来解决问题。但增加一个库必然意味着更大的网络负担，意味着更高的页面初始载入时间。并且，现在与当初已经有了很大不同，jQuery是伴随着IE6出来的，当时，jQuery在跨浏览器开发上有不可替代的作用。但今天，伴随ES5的广泛被支持以及各个浏览器本身的完善，我们可以考虑适当的丢掉它，改善性能。
需要注意的是，并不是说jQuery是不可取的，在某些场合，用它是更合适的，需要我们自己判断。

Listening for Document Ready

我们经常用到$( document ).ready() 或者它的简写 $(),用来传入当所有dom准备完毕后，执行逻辑的相关回调。原生js可以这么写：

var snakes = document.querySelector('#snakes'),
    birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {
    console.log("Children: ");
    var children = e.target.children;
    for (var i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
});


birds.addEventListener('click', function (e) {
    // 获取最近的兄弟节点
    var previous = e.target.previousElementSibling;
    if (previous) {
        console.log("Previous sibling: " + previous.textContent);
    }
    var next = e.target.nextElementSibling;
    if (next) {
        console.log("Next sibling: " + next.textContent);
    }

    //所有的兄弟们
    Array.prototype.filter.call(e.target.parentNode.children, function (child) {
        if (child !== e.target) {
            console.log(child.textContent);
        }
    });

});

Selecting elements

我们常常依赖于jQuery的选择器，而现在，所有的浏览器基本都支持了querySelector 与 querySelectorAll，这里是MDN链接

var snakes = document.querySelector('#snakes'),
    birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {
    console.log("Children: ");
    var children = e.target.children;
    for (var i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
});


birds.addEventListener('click', function (e) {
    // 获取最近的兄弟节点
    var previous = e.target.previousElementSibling;
    if (previous) {
        console.log("Previous sibling: " + previous.textContent);
    }
    var next = e.target.nextElementSibling;
    if (next) {
        console.log("Next sibling: " + next.textContent);
    }

    //所有的兄弟们
    Array.prototype.filter.call(e.target.parentNode.children, function (child) {
        if (child !== e.target) {
            console.log(child.textContent);
        }
    });

});

Attaching and removing event listeners

侦听事件是web开发中再重要不过的一环。曾经IE独树一帜，与其它浏览器提供的API不一致，导致需要用jQuery来快速开发，现在，所有的浏览器都提供了addEventListener：

var snakes = document.querySelector('#snakes'),
    birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {
    console.log("Children: ");
    var children = e.target.children;
    for (var i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
});


birds.addEventListener('click', function (e) {
    // 获取最近的兄弟节点
    var previous = e.target.previousElementSibling;
    if (previous) {
        console.log("Previous sibling: " + previous.textContent);
    }
    var next = e.target.nextElementSibling;
    if (next) {
        console.log("Next sibling: " + next.textContent);
    }

    //所有的兄弟们
    Array.prototype.filter.call(e.target.parentNode.children, function (child) {
        if (child !== e.target) {
            console.log(child.textContent);
        }
    });

});

Manipulating classes and attributes

曾经，不使用jQuery来处理class是一件很麻烦的事情，而现在，由于classList的存在(这里是MDB链接)我们可以快捷的解决这一类问题，另外，如果需要操作attribute，可以使用setAttribute(同样是MDN链接)

var snakes = document.querySelector('#snakes'),
    birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {
    console.log("Children: ");
    var children = e.target.children;
    for (var i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
});


birds.addEventListener('click', function (e) {
    // 获取最近的兄弟节点
    var previous = e.target.previousElementSibling;
    if (previous) {
        console.log("Previous sibling: " + previous.textContent);
    }
    var next = e.target.nextElementSibling;
    if (next) {
        console.log("Next sibling: " + next.textContent);
    }

    //所有的兄弟们
    Array.prototype.filter.call(e.target.parentNode.children, function (child) {
        if (child !== e.target) {
            console.log(child.textContent);
        }
    });

});

Getting and setting element content

jQuery提供了text() html()用以操作元素的内容，我们可以使用原生的textContent与innerHTML属性代替它们。

var snakes = document.querySelector('#snakes'),
    birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {
    console.log("Children: ");
    var children = e.target.children;
    for (var i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
});


birds.addEventListener('click', function (e) {
    // 获取最近的兄弟节点
    var previous = e.target.previousElementSibling;
    if (previous) {
        console.log("Previous sibling: " + previous.textContent);
    }
    var next = e.target.nextElementSibling;
    if (next) {
        console.log("Next sibling: " + next.textContent);
    }

    //所有的兄弟们
    Array.prototype.filter.call(e.target.parentNode.children, function (child) {
        if (child !== e.target) {
            console.log(child.textContent);
        }
    });

});

Inserting and removing elements

原生的js可以这样添加与删除元素：

var snakes = document.querySelector('#snakes'),
    birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {
    console.log("Children: ");
    var children = e.target.children;
    for (var i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
});


birds.addEventListener('click', function (e) {
    // 获取最近的兄弟节点
    var previous = e.target.previousElementSibling;
    if (previous) {
        console.log("Previous sibling: " + previous.textContent);
    }
    var next = e.target.nextElementSibling;
    if (next) {
        console.log("Next sibling: " + next.textContent);
    }

    //所有的兄弟们
    Array.prototype.filter.call(e.target.parentNode.children, function (child) {
        if (child !== e.target) {
            console.log(child.textContent);
        }
    });

});

Walking the DOM tree

原生的js也可以遍历DOM树

var snakes = document.querySelector('#snakes'),
    birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {
    console.log("Children: ");
    var children = e.target.children;
    for (var i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
});


birds.addEventListener('click', function (e) {
    // 获取最近的兄弟节点
    var previous = e.target.previousElementSibling;
    if (previous) {
        console.log("Previous sibling: " + previous.textContent);
    }
    var next = e.target.nextElementSibling;
    if (next) {
        console.log("Next sibling: " + next.textContent);
    }

    //所有的兄弟们
    Array.prototype.filter.call(e.target.parentNode.children, function (child) {
        if (child !== e.target) {
            console.log(child.textContent);
        }
    });

});

Looping over arrays

jQuery提供的 each与map已经可以被ES5的forEach与map替代

var snakes = document.querySelector('#snakes'),
    birds = document.querySelector('#birds');

snakes.addEventListener('click', function (e) {
    console.log("Children: ");
    var children = e.target.children;
    for (var i = 0; i < children.length; i++) {
        console.log(children[i].textContent);
    }
});


birds.addEventListener('click', function (e) {
    // 获取最近的兄弟节点
    var previous = e.target.previousElementSibling;
    if (previous) {
        console.log("Previous sibling: " + previous.textContent);
    }
    var next = e.target.nextElementSibling;
    if (next) {
        console.log("Next sibling: " + next.textContent);
    }

    //所有的兄弟们
    Array.prototype.filter.call(e.target.parentNode.children, function (child) {
        if (child !== e.target) {
            console.log(child.textContent);
        }
    });

});

Animations

jQuery的动画效果是非常强大的，在很多场合还是很难替代的，不过，由于CSS3，动画可以转到由CSS来实现。这部分就不给DEMO了。

AJAX

如果唯一使用jQuery的唯一理由，是它便捷的AJAX，那么，将jQuery替换成一个轻量的多的库吧！比如reqwest，这个库压缩后不到10kB。

总结

尽全力使脚本变的更小，可以使用户获得更高的加载速度，以及更好的用户体验。但也要谨慎的做取舍，没必要大量的造jQuery已经提供的轮子。
除了在编码方面带来性能优化，我们还可以借助工具达到同样的效果。可以看一看博主的webpack方面的文章 :)

转载于:https://www.cnblogs.com/E-WALKER/p/4771700.html