技术杂谈:为什么要用 (或不用) jQuery

PUBLISHED ON AUG 5, 2018

    在 Netscape vs. Internet Explorer 的浏览器大战时代中,jQuery 的确帮助许多开发人员解决浏览器不兼容的议题。然而,近几年来 jQuery 过时的呼声不断高张,一方面是现在浏览器在标准化已有改善,jQuery 的角色相对弱化;另一方面,jQuery 的范式 (paradigm) 是以 DOM 为中心,而现在新的思维是以数据为中心。那么,是不是我们已经不再需要 jQuery 了呢?

    我们可以从以下数个面向来考量是否要使用 jQuery:

    • 市占率 *函数库大小
    • 对 Internet Explorer 的支援度
    • DOM 导向 vs. 数据导向
    • 难易度

    市占率

    现在新的网页前端学习教材通常会着重在 Anguar、React、Vue 等新兴工具,而不会把重心放在 jQuery 等出现较久的函式库,某种程度也代表了这些新兴工具比较有话题性。不过,jQuery 仍然在全世界的网站中占有八成的市占率,而一些新兴框架的使用率其实远远不及 jQuery (可看这里)。

    另外,Bootstrap 也依赖 jQuery,如果要接手他人写的案子,完全没用到 jQuery 和 Bootstrap 的机率应该很小;已有 jQuery 的案子,用其他工具把 jQuery 换掉的机会更小,因为这样做整个网站要大改,反而不划算。

    ##函数库大小

    虽然有些程序人会觉得 jQuery 很肥,但实际上并不是如此。我们这里以压缩过的函式库大小来进行比较如下:

    LibraryVersionSize
    jQuery1.12.495 kb
    jQuery3.3.185 kb
    Zepto1.2.026 kb
    Angular6.0.13123 kb
    React + DOM16.4.199 kb
    Vue2.5.1685 kb

    在实际上线的网站中,这些函式库通常会用压缩过的版本,故我们以这个版本为准。

    由此可以看出,Angular 是超重量级的框架,而 jQuery 和 React 差不多,Vue 又相对轻量一点。至于 Zepto 是一个和 jQuery 部分兼容的函式库,主要是用在 Cordova 等资源相对受限的应用程序中,平常用到机会相对少。

    对 Internet Explorer 的支援度

    当初 jQuery 就是要解决 Internet Explorer (IE) 所带来的问题,如果我们仍要支援旧版的 IE,就会需要使用 jQuery。各个浏览器对 IE 的支援度如下:

    LibraryVersionSupport
    jQuery1.12.4IE 6+
    jQuery3.3.1IE 9+
    Zepto1.2.0IE 10+
    Angular6.0.1IE 9+
    React + DOM16.4.1IE 9+
    Vue2.5.16IE 9+

    除了做一些 (台湾或大陆) 政府或公营单位的案子,还需要支援 IE 8 (甚至 IE 6) 的机会应该很少,如果真的碰到了,大概就是要用旧版的 jQuery,也没太多好的选择。要注意新版的 jQuery 对 IE 的支援程度其实和其他框架差不多,这时候就看开发团队的需求和偏好。

    我们可以利用 IE conditionals 来动态载入不同版本的 jQuery:

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous"></script>
    <![endif]-->
    <!--[if gt IE 8]> <!-- -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <!-- <![endif]-->
    

    对于较旧的浏览器,我们载入低版本的 jQuery 以保持兼容性;对于较新的浏览器,我们载入新版的 jQuery,来享受新版本所带来的改进。

    DOM 导向 vs. 数据导向

    jQuery 的写法是以 DOM 为中心点来操作网页,对于传统的网页表单来说游刃有余。但若没有好好地整理程序代码,数据很容易四散在程序代码各处。随着网页程序变复杂,以 jQuery 为中心的写法就会感到不足;这些新兴框架的特色之一在于强调 data binding,就是要补强 jQuery 的不足。使用这些新兴工具的代价就是一开始的学习时间。

    为了补强 jQuery 本身的不足,JsRender/JsViews 应运而生。这套框架以 jQuery 为基础,JsRender 是模板语言的部分,而 JsViews 则是以 JsRender 为基础的前端框架。对熟悉 jQuery 的程序人来说,这套框架的入门较快;但这样框架需要的样板程序代码稍微多一点。目前这套框架相对冷门,范例不多,需要自己多加尝试。

    另外一个替代的选择是使用 Backbone.js,因该框架相依于 jQuery 或 Zepto,可最大化重用程序代码。然而,Backbone.js 近年来发展有些停滞,网络上范例程序代码也偏旧,读者需自行评估是否要使用该框架。

    难易度

    比起前端三雄,jQuery 相对简单得多。这两者的差别在于用函式库写程序和用框架写程序,后者需要的起始学始成本往往较高。根据程序类型不同,我们有时候不需要前端网页框架,使用 jQury 来操作网页就足够了。如同使用其他的函式库,使用 jQuery 可以自主组织程序代码,相对来说较自由,但也有可能写出不好维护的程序代码。

    小结

    经过本文的比较,相信大家应该心中都有自己的一把尺。笔者目前仍偏好 jQuery,有时会搭配 JsRender/JsViews。如果读者不想再用 jQuery,现在 React 和 React Native 的授权已改为 MIT,先前使用 React 的疑虑大抵上消除了;除了 React 以外,读者也可以自己尝试其他的前端框架。