資訊專欄INFORMATION COLUMN
摘要：對(duì)于復(fù)雜的業(yè)務(wù)需求仍然需要一些操作。使用方式很簡單，但是你需要?jiǎng)?chuàng)建一個(gè)獨(dú)立文件，重新掛載需要的方法到命名空間上，這在編寫插件時(shí)非常有用。正如前文所說，的操作在我看來依然是最好用的，所以，你不需要，但你需要一個(gè)庫。
寫這篇文章的目的，一方面是介紹一下自己編寫的模塊化 DOM 庫 domq.js，另一方面是希望大家對(duì) jQuery 有一個(gè)正確的認(rèn)識(shí)，即使 jQuery 已經(jīng)逐漸退出歷史舞臺(tái)，但是它的 API 將會(huì)以另外一種形式存在下去。
GitHub：https://github.com/nzbin/domqjQuery 不會(huì)死去文檔：https://nzbin.gitbooks.io/domq-api/usage.html
從 GitHub 放棄 jQuery，再到 Bootstrap 5 宣布移除 jQuery，看來一個(gè)時(shí)代終究要落下帷幕。
為什么我們會(huì)放棄 jQuery 呢？原因無非這樣幾個(gè)：不需要再進(jìn)行瀏覽器的兼容，原生 DOM 查找已經(jīng)很方便，AJAX 請(qǐng)求有更好的替代方式等等。
在我看來 jQuery 最大的弊端是無法分模塊引入，直接引入整個(gè)庫實(shí)在有些不妥，畢竟太多功能已經(jīng)沒有用武之地。但是 jQuery 的 DOM 操作依然很有必要。很多人對(duì)我的這個(gè)觀點(diǎn)有些疑問。其實(shí)在使用 MVVM 框架的時(shí)候，DOM 操作確實(shí)已經(jīng)很少。但是我們也不可能總是做一些 CRUD 的功能。對(duì)于復(fù)雜的業(yè)務(wù)需求仍然需要一些 DOM 操作。
假如 jQuery 可以把 DOM 操作相關(guān)的功能模塊分離出來，或許還有很大的使用空間。
原生當(dāng)?shù)?/b>在平時(shí)的項(xiàng)目中，越來越多的人選擇用原生 JS 去操作對(duì)象，比如獲取元素屬性，寬高，定位等等。
早在幾年前，github 上就有很多文章介紹如何用原生 JS 代替 jQuery，比如 YouDontNeedJQuery，YouMightNotNeedjQuery等。就我個(gè)人而言，純 JS 操作確實(shí)很簡單，但是并不是很優(yōu)雅，復(fù)雜一點(diǎn)的操作還要經(jīng)常翻 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 對(duì)比的一個(gè)縮影，結(jié)果顯而易見，jQuery 的 API 更加簡潔。除此之外，jQuery API 的使用形式也非常統(tǒng)一。相反，原生 JS 的 API 使用方式就比較多樣了，既有賦值，又有傳參等。另外原生 JS 的 API 名稱冗長，不方便記憶。這也是很多 JS 庫誕生的意義。
很多插件一般都會(huì)有一個(gè) utils 的文件，基本會(huì)對(duì)原生方法做一個(gè)簡單封裝并提供一些工具方法。
Zepto 的優(yōu)勢(shì)與弱勢(shì)Zepto 是一個(gè)思想超前的庫，為什么我會(huì)有這樣的結(jié)論？Zepto 對(duì)原生方法做了進(jìn)一步的抽象，使用更簡單。正如我在上文說過的，既然 jQuery 的 API 簡潔易用，而且我們也更加熟悉，那我們?yōu)槭裁床粚?jQuery 和原生 JS 結(jié)合起來呢？令人驚訝的是，早在 2010 年，Zepto 的作者就已經(jīng)這樣去做了。用原生 JS 實(shí)現(xiàn)了 jQuery 的大部分 API，可替代率接近九成吧，至少在我編寫的插件中，幾乎可以替換掉所有的 jQuery API。而且 Zepto 也不是一味的使用 document.querySelector 方法，而是根據(jù)性能優(yōu)劣，有選擇的使用 document.getElementById 以及 document.querySelector 等。
但是 Zepto 也有一些顯而易見的缺陷，畢竟還是上個(gè)時(shí)代的產(chǎn)物，首先就是無法按需加載，現(xiàn)在我們?cè)趯戫?xiàng)目的時(shí)候更愿意根據(jù)自己的需要引入某些方法，而不是將整個(gè)庫全部引入，雖然 Zepto 的體積不大，但是作為強(qiáng)迫癥還是有一些厭惡。另外就是 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 元素?zé)o法獲得正確的值，我對(duì)這個(gè)問題提過 pr 但是沒有回應(yīng)，Zepto 目前基本已經(jīng)停止維護(hù)。正確的方法如下：
// 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，但是在我重構(gòu) jQuery 插件時(shí)，我發(fā)現(xiàn)沒有辦法用這些庫直接替換 jQuery，只有 Zepto 相對(duì)完美，但是我又不希望引入額外的無用的方法。
最后我決定改造 Zepto，使之更符合現(xiàn)在的使用習(xí)慣。多說一點(diǎn)，個(gè)人覺得 Zepto 的核心函數(shù)稍顯凌亂，命名空間既有 zepto、又有 $、Z，感覺非常混亂，而 domq 的核心函數(shù)只有 D 這一個(gè)命名空間，形態(tài)及功能和 jQuery 的核心函數(shù)幾乎一樣，可以認(rèn)為是一個(gè) 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(){
...
}
...
}
當(dāng)然， Domq 最關(guān)鍵的還是按需加載，根據(jù)需要掛載方法，盡量減少不必要的代碼。使用方式很簡單，但是你需要?jiǎng)?chuàng)建一個(gè)獨(dú)立文件，重新掛載需要的方法到 D 命名空間上，這在編寫插件時(shí)非常有用。
import {
D,
isArray,
addClass
} from "domq.js/src/domq.modular";
// 靜態(tài)方法
const methods = {
isArray
}
// 原型方法
const fnMethods = {
addClass
}
D.extend(methods);
D.fn.extend(fnMethods);
另外，在做項(xiàng)目時(shí)經(jīng)常會(huì)用到一些工具方法，這時(shí)候用一個(gè)工具庫暴露這些方法或許是最好的方式。Domq 也有一些常用的工具方法，不過還需要再迭代一下。
D.type() D.contains() D.camelCase() D.isFunction() D.isWindow() D.isEmptyObject() D.isPlainObject() D.isNumeric() D.isArray() D.inArray() ...
Domq 沒有太多新的東西，所以也沒有太多可以介紹的，它已經(jīng)在插件 PhotoViewer 以及實(shí)際項(xiàng)目中得以運(yùn)用，歡迎大家下載使用。
總結(jié)這是一個(gè)好的時(shí)代，也是一個(gè)壞的時(shí)代，jQuery 的落幕確實(shí)讓人感嘆，但是我們完全沒必要因?yàn)?jQuery 的落幕而放棄 jQuery 的使用方式。正如前文所說，jQuery 的 DOM 操作在我看來依然是最好用的，所以，你不需要 jQuery，但你需要一個(gè) DOM 庫。
GitHub：https://github.com/nzbin/domq
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/102981.html
摘要：構(gòu)造函數(shù)很多教程都告訴我們，不要直接用內(nèi)置對(duì)象的構(gòu)造函數(shù)來創(chuàng)建基本變量，例如的寫法就應(yīng)該用的寫法來取代。但是，構(gòu)造函數(shù)注意是大寫的有點(diǎn)特別。構(gòu)造函數(shù)接受的參數(shù)中，第一個(gè)是要傳入的參數(shù)名，第二個(gè)是函數(shù)內(nèi)的代碼用字符串來表示。 如何寫JavaScript才能逼格更高呢？怎樣才能組織JavaScript才能讓別人一眼看出你不簡單呢？是否很期待別人在看完你的代碼之后感嘆一句原來還可以這樣寫呢？...
摘要：是強(qiáng)大的，你可以做很多事情沒有。如果你想要你的項(xiàng)目需要更少的依賴，并且你清楚的知道你的目標(biāo)瀏覽器，那么你可能不需要。我們并不需要為了操作等再學(xué)習(xí)一下的。但是，他們往往需要更多的資源，功能不強(qiáng)，難以通過腳本自動(dòng)化。 1 You-Dont-Need-JavaScript CSS是強(qiáng)大的，你可以做很多事情沒有JS。 本文教你使用原生CSS做下面的事情。 內(nèi)容目錄 手風(fēng)琴/切換 圓盤傳送帶...
摘要：是強(qiáng)大的，你可以做很多事情沒有。如果你想要你的項(xiàng)目需要更少的依賴，并且你清楚的知道你的目標(biāo)瀏覽器，那么你可能不需要。我們并不需要為了操作等再學(xué)習(xí)一下的。但是，他們往往需要更多的資源，功能不強(qiáng)，難以通過腳本自動(dòng)化。 1 You-Dont-Need-JavaScript CSS是強(qiáng)大的，你可以做很多事情沒有JS。 本文教你使用原生CSS做下面的事情。 內(nèi)容目錄 手風(fēng)琴/切換 圓盤傳送帶...
摘要：是現(xiàn)在最流行的工具庫。據(jù)統(tǒng)計(jì)，目前全世界的網(wǎng)站使用它。好，說了這么多我們就看看自己寫一個(gè)庫，有沒有你想想的那么難。寫法寫法三事件的監(jiān)聽四類操作的方法，用于為元素添加一個(gè)。 jQuery是現(xiàn)在最流行的JavaScript工具庫。據(jù)統(tǒng)計(jì)，目前全世界57.3%的網(wǎng)站使用它。也就是說，10個(gè)網(wǎng)站里面，有6個(gè)使用jQuery。如果只考察使用工具庫的網(wǎng)站，這個(gè)比例就會(huì)上升到驚人的91.7%。 因此...
摘要：適用于，演示這是開發(fā)的一個(gè)簡單的可視化庫，它允許你創(chuàng)建所有常用的圖表類型條形圖，樹形圖，折線圖，面積圖等。可以輕松地對(duì)折線圖和條形圖進(jìn)行混合和匹配以組合不同的數(shù)據(jù)集，這是非常棒的功能。 翻譯：瘋狂的技術(shù)宅原文：https://www.monterail.com/blo... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 你的程序有多...
閱讀 1075·2021-11-23 09:51
閱讀 2418·2021-09-29 09:34
閱讀 3158·2019-08-30 14:20
閱讀 1060·2019-08-29 14:14
閱讀 3188·2019-08-29 13:46
閱讀 1084·2019-08-26 13:54
閱讀 1641·2019-08-26 13:32
閱讀 1434·2019-08-26 12:23
