你不需要 jQuery，但你需要一个 DOM 库

HitenDev 发布于2019-08-23 16:23 / 1356人阅读

摘要：对于复杂的业务需求仍然需要一些操作。使用方式很简单，但是你需要创建一个独立文件，重新挂载需要的方法到命名空间上，这在编写插件时非常有用。正如前文所说，的操作在我看来依然是最好用的，所以，你不需要，但你需要一个库。

写这篇文章的目的，一方面是介绍一下自己编写的模块化 DOM 库 domq.js，另一方面是希望大家对 jQuery 有一个正确的认识，即使 jQuery 已经逐渐退出历史舞台，但是它的 API 将会以另外一种形式存在下去。

GitHub：https://github.com/nzbin/domq

文档：https://nzbin.gitbooks.io/domq-api/usage.html

jQuery 不会死去

从 GitHub 放弃 jQuery，再到 Bootstrap 5 宣布移除 jQuery，看来一个时代终究要落下帷幕。

为什么我们会放弃 jQuery 呢？原因无非这样几个：不需要再进行浏览器的兼容，原生 DOM 查找已经很方便，AJAX 请求有更好的替代方式等等。

在我看来 jQuery 最大的弊端是无法分模块引入，直接引入整个库实在有些不妥，毕竟太多功能已经没有用武之地。但是 jQuery 的 DOM 操作依然很有必要。很多人对我的这个观点有些疑问。其实在使用 MVVM 框架的时候，DOM 操作确实已经很少。但是我们也不可能总是做一些 CRUD 的功能。对于复杂的业务需求仍然需要一些 DOM 操作。

假如 jQuery 可以把 DOM 操作相关的功能模块分离出来，或许还有很大的使用空间。

原生当道

在平时的项目中，越来越多的人选择用原生 JS 去操作对象，比如获取元素属性，宽高，定位等等。

早在几年前，github 上就有很多文章介绍如何用原生 JS 代替 jQuery，比如 YouDontNeedJQuery，YouMightNotNeedjQuery等。就我个人而言，纯 JS 操作确实很简单，但是并不是很优雅，复杂一点的操作还要经常翻 MDN。

// jQuery
$(".my #awesome selector");

// JS
document.querySelectorAll(".my #awesome selector");

// jQuery
$(el).hide();

// JS
el.style.display = "none";

// jQuery
$(el).after(htmlString);

// JS
el.insertAdjacentHTML("afterend", htmlString);

以上是 jQuery 和原生 JS 对比的一个缩影，结果显而易见，jQuery 的 API 更加简洁。除此之外，jQuery API 的使用形式也非常统一。相反，原生 JS 的 API 使用方式就比较多样了，既有赋值，又有传参等。另外原生 JS 的 API 名称冗长，不方便记忆。这也是很多 JS 库诞生的意义。

很多插件一般都会有一个 utils 的文件，基本会对原生方法做一个简单封装并提供一些工具方法。

Zepto 的优势与弱势

Zepto 是一个思想超前的库，为什么我会有这样的结论？Zepto 对原生方法做了进一步的抽象，使用更简单。正如我在上文说过的，既然 jQuery 的 API 简洁易用，而且我们也更加熟悉，那我们为什么不将 jQuery 和原生 JS 结合起来呢？令人惊讶的是，早在 2010 年，Zepto 的作者就已经这样去做了。用原生 JS 实现了 jQuery 的大部分 API，可替代率接近九成吧，至少在我编写的插件中，几乎可以替换掉所有的 jQuery API。而且 Zepto 也不是一味的使用 document.querySelector 方法，而是根据性能优劣，有选择的使用 document.getElementById 以及 document.querySelector 等。

但是 Zepto 也有一些显而易见的缺陷，毕竟还是上个时代的产物，首先就是无法按需加载，现在我们在写项目的时候更愿意根据自己的需要引入某些方法，而不是将整个库全部引入，虽然 Zepto 的体积不大，但是作为强迫症还是有一些厌恶。另外就是 Zepto 本身也有一些 bug，比如 scrollTop、scrollLeft 方法。其它不同参见源码。

// Zepto
scrollTop: function(value) {
    if (!this.length) return
    var hasScrollTop = "scrollTop" in this[0]
    if (value === undefined) return hasScrollTop ? this[0].scrollTop : this[0].pageYOffset
    return this.each(hasScrollTop ?
        function() { this.scrollTop = value } :
        function() { this.scrollTo(this.scrollX, value) })
}

document 元素无法获得正确的值，我对这个问题提过 pr 但是没有回应，Zepto 目前基本已经停止维护。正确的方法如下：

// Domq
function scrollTop(value) {
    if (!this.length) return
    var hasScrollTop = "scrollTop" in this[0]
    if (value === undefined) return hasScrollTop
        ? this[0].scrollTop
        : isWindow(this[0])
            ? this[0].pageYOffset
            : this[0].defaultView.pageYOffset;
    return this.each(hasScrollTop ?
        function () { this.scrollTop = value } :
        function () { this.scrollTo(this.scrollX, value) })
}

Domq 的使命

形如 jQuery 的 DOM 操作库有很多，比如 bonzo、$dom，但是在我重构 jQuery 插件时，我发现没有办法用这些库直接替换 jQuery，只有 Zepto 相对完美，但是我又不希望引入额外的无用的方法。

最后我决定改造 Zepto，使之更符合现在的使用习惯。多说一点，个人觉得 Zepto 的核心函数稍显凌乱，命名空间既有 zepto、又有 $、Z，感觉非常混乱，而 domq 的核心函数只有 D 这一个命名空间，形态及功能和 jQuery 的核心函数几乎一样，可以认为是一个 mini 版的 jQuery。

// Zepto 核心方法
var Zepto = (function() {
    var zepto = {};
    ...
    zepto.Z = function(dom, selector) {
        return new Z(dom, selector)
    }
    ...
    $ = function(selector, context) {
        return zepto.init(selector, context)
    }
    ...
})()

// Domq 核心方法
var D = function (selector, context) {
    return new D.fn.init(selector, context);
}

D.fn = D.prototype = {
    ...
    init: function(){
        ...
    }
    ...
}

当然， Domq 最关键的还是按需加载，根据需要挂载方法，尽量减少不必要的代码。使用方式很简单，但是你需要创建一个独立文件，重新挂载需要的方法到 D 命名空间上，这在编写插件时非常有用。

import {
  D,
  isArray,
  addClass
} from "domq.js/src/domq.modular";

// 静态方法
const methods = {
  isArray
}

// 原型方法
const fnMethods = {
  addClass
}

D.extend(methods);
D.fn.extend(fnMethods);

另外，在做项目时经常会用到一些工具方法，这时候用一个工具库暴露这些方法或许是最好的方式。Domq 也有一些常用的工具方法，不过还需要再迭代一下。

D.type()
D.contains()
D.camelCase()
D.isFunction()
D.isWindow()
D.isEmptyObject()
D.isPlainObject()
D.isNumeric()
D.isArray()
D.inArray()
...

Domq 没有太多新的东西，所以也没有太多可以介绍的，它已经在插件 PhotoViewer 以及实际项目中得以运用，欢迎大家下载使用。

总结

这是一个好的时代，也是一个坏的时代，jQuery 的落幕确实让人感叹，但是我们完全没必要因为 jQuery 的落幕而放弃 jQuery 的使用方式。正如前文所说，jQuery 的 DOM 操作在我看来依然是最好用的，所以，你不需要 jQuery，但你需要一个 DOM 库。

GitHub：https://github.com/nzbin/domq

GPU云服务器云服务器 webrtc需要依赖那些库一个机房需要多少钱一个网站需要多少钱一个云计算需要什么

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

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

JavaScript装逼指南

摘要：构造函数很多教程都告诉我们，不要直接用内置对象的构造函数来创建基本变量，例如的写法就应该用的写法来取代。但是，构造函数注意是大写的有点特别。构造函数接受的参数中，第一个是要传入的参数名，第二个是函数内的代码用字符串来表示。如何写JavaScript才能逼格更高呢？怎样才能组织JavaScript才能让别人一眼看出你不简单呢？是否很期待别人在看完你的代码之后感叹一句原来还可以这样写呢？...

oneasp 2019-08-19 14:48 评论0 收藏0
You-Dont-Need : 你不需要系列

摘要：是强大的，你可以做很多事情没有。如果你想要你的项目需要更少的依赖，并且你清楚的知道你的目标浏览器，那么你可能不需要。我们并不需要为了操作等再学习一下的。但是，他们往往需要更多的资源，功能不强，难以通过脚本自动化。 1 You-Dont-Need-JavaScript CSS是强大的，你可以做很多事情没有JS。本文教你使用原生CSS做下面的事情。内容目录手风琴/切换圆盘传送带...

anonymoussf 2019-08-29 14:07 评论0 收藏0
You-Dont-Need : 你不需要系列

摘要：是强大的，你可以做很多事情没有。如果你想要你的项目需要更少的依赖，并且你清楚的知道你的目标浏览器，那么你可能不需要。我们并不需要为了操作等再学习一下的。但是，他们往往需要更多的资源，功能不强，难以通过脚本自动化。 1 You-Dont-Need-JavaScript CSS是强大的，你可以做很多事情没有JS。本文教你使用原生CSS做下面的事情。内容目录手风琴/切换圆盘传送带...

bawn 2019-08-21 18:29 评论0 收藏0
轻轻松松自己写一个jquery库-要不要试试？

摘要：是现在最流行的工具库。据统计，目前全世界的网站使用它。好，说了这么多我们就看看自己写一个库，有没有你想想的那么难。写法写法三事件的监听四类操作的方法，用于为元素添加一个。 jQuery是现在最流行的JavaScript工具库。据统计，目前全世界57.3%的网站使用它。也就是说，10个网站里面，有6个使用jQuery。如果只考察使用工具库的网站，这个比例就会上升到惊人的91.7%。因此...

beita 2019-08-20 16:36 评论0 收藏0
14个最好的 JavaScript 数据可视化库

摘要：适用于，演示这是开发的一个简单的可视化库，它允许你创建所有常用的图表类型条形图，树形图，折线图，面积图等。可以轻松地对折线图和条形图进行混合和匹配以组合不同的数据集，这是非常棒的功能。翻译：疯狂的技术宅原文：https://www.monterail.com/blo... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章你的程序有多...

Mertens 2019-08-23 16:23 评论0 收藏0