菜单
菜单
文章目录
  1. 前言
    1. 传奇的jQuery
    2. 移动优先的zepto
  2. DOM 工具库的创想
    1. 进击的原生 API
    2. 新一代的 DOM API
  3. 总结

新一代 DOM 工具库的创想

前言

目前说到 DOM 类的工具库,首先想到的肯定是 jQuery 、zepto 这类工具库。这类工具库最大的优点无疑是将复杂难记的 DOM API 统一成一些标准方法。这类标准方法普遍采用简短易记的名称,结合内部的魔术方法机制,使得看似松散的 DOM API 自然得组合到了一起。

传奇的jQuery

jQuery 的流行也使得它背负了沉重的负担。为了不影响之前版本的过度,jQuery 的开发者们不得不时刻考虑如何向下兼容。慢慢地jQuery 变得越来越“臃肿”。随着移动设备的普及,Web 也不再是唯一的浏览器入口。体积庞大的jQuery 对与日益增长的Wap 页面而言,显然不再友好。

移动优先的zepto

在流量寸土寸金的年代,开发者们不得不考虑如何给自己的页面瘦身。移动优先的 zepto,不再考虑过多的向下兼容,使得大量的兼容代码不再出现于核心库中,工具库的体积大幅压缩。加上 zepto 合理地将其自身分割成众多功能唯一的模块,让开发者可以选择性地加载,这无疑是雪中送炭般的温暖。zepto 的出现使得移动页面开发者看到了黎明的曙光。 zepto 目前已经成为移动端页面开发的首选,但它的流行也使其走上了jQuery 一样的老路。开发者们不(敢)再为其增加新的方法,同样不敢修改或优化不存在BUG 的核心代码。

DOM 工具库的创想

进击的原生 API

随着浏览器的升级,DOM 内置的 API 越来越完善,甚至部分采纳了jQuery 的方式。越来越好用的原生 API,让人们意识到 jQuery 不再必要。但事实并非如此…虽然原生的 DOM API 越来越全面,但大部分API 依然有着沉重的历史包裹。部分新增的API 为了“兼容”流行的工具库(虽然听起来很搞笑),不得不保留旧版本的 API,而新的 API 的命名也越来越长,以至于不再友好。目前开发者陷入了两难的境地。

新一代的 DOM API

我觉得新一代的 DOM API 不应该背负太多的历史负担,应该拥抱变化。

我理想中的 DOM 工具库应该是:轻量级,基于原生 API + 模块化 + ES 2015 + 开放式核心,易于拓展

  • 轻量级:

没有历史包裹的库,不需要过度考虑对老版本浏览器的兼容性。较少的兼容代码,加上以原生 DOM API 为基础,使得核心代码量大幅减少,甚至可以以语法糖的形式出现。使用 getter、setter 魔术方法包装部分功能相近的代码,使其表现得如jQuery 般简洁。

  • 模块化:

jQuery 不仅是一个 DOM 操作库,更是一个完善的工具库,其中包含了Ajax、Deferred 等函数库。zepto 则将这些功能唯一的部分拆分成各个独立模块。虽然zepto 的做法符合模块化的思想,但其冗余的实现,使得模块化的魅力大打折扣。良好的模块化工具库应该在拆分的基础上又能相互依赖。ES 2015 中的 Tree-shaking 则是非常好的实现方案。能够按需加载的模块,才是最佳的模块化方案。

  • ES 2015:

ES 2015 的出现使得自成一派的Javascript 更接近于传统的开发语言(如 Java)。ES 2015 无疑是一次惊艳的升级,它的出现让看上去“玩具式”的Javascript 有了一套华丽的外衣。天然的 Class 以及 modular,给Javascript 带来了无限的可能。Javascript 中的 Class 虽然是一种类似于语法糖般的存在,但其明朗的书写形式使得 Javascript 的类以及类继承(ES 2015 之前版本都采用原型链的方式)不再晦涩难懂。modular 中的 Tree-shaking 使得按需加载成为可能。

  • 开放式核心:

这里所谓的开放式核心大体上近似于开源协作,但唯一不同的是,我希望库的所有核心方法都可以被覆写。与 jQuery 、zepto 之类的库不同,这些流行库的很多核心方法都是以私有函数的形式存在,开发者很难对其进行二次修改,这也是很多工具库只能整体引用的原因。开放式核心的思想是尽可能地解耦,弱耦合的库拥有更好的可拓展性。同时也方便对核心方法进行 polyfill 以求在低版本的浏览器上能够正常运行。

总结

理想的 DOM 工具库应该就是基于浏览器的最新 API,采用 ES 2015 进行模块化的编写,核心代码弱耦合,可以对任何方法进行 polyfill 的一个轻量级的工具库。