第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

在 Plain Vanilla Javascript 中創(chuàng)建 .hide()

在 Plain Vanilla Javascript 中創(chuàng)建 .hide()

完全避免使用 jQuery，我今天開(kāi)始嘗試讓自己變得像這樣：$('#myDiv').hide();目標(biāo)是它將適用.style.display = 'none'于#myDiv.因此，我們了解到以下內(nèi)容是一個(gè)與 jQuery 稍微相似的選擇器：var $ = s => document.querySelectorAll.bind(document)(s).length > 1 ?   document.querySelectorAll.bind(document)(s) : document.querySelector.bind(document)(s);使用它時(shí)要小心，因?yàn)樗梢苑祷囟鄠€(gè)元素，您可能需要使用其中的.forEach(function(el,i){el.doSomething();});語(yǔ)法。所以，我嘗試創(chuàng)建一個(gè)簡(jiǎn)單的$(...).hide()函數(shù)，如下所示：$.__proto__.hide = function(){this.forEach(function(el,i){el.style.display='none';});};不幸的是，__proto__現(xiàn)在已被棄用，即使您忽略這一點(diǎn)，除非您執(zhí)行以下操作，否則上述內(nèi)容也不會(huì)起作用：$('#myDIV').__proto__.hide = function(){this.forEach(function(el,i){el.style.display='none';});};使用普通 Javascript 通過(guò)函數(shù)擴(kuò)展我的$對(duì)象的技術(shù)是什么？.hide()
查看完整描述

2 回答

?
拉莫斯之舞

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個(gè)贊

這里的主要問(wèn)題是您直接返回querySelectororquerySelectorAll結(jié)果。您可以將其包裝在您自己的類中，您可以使用方法輕松擴(kuò)展該類。


class ElementsHelper {

  constructor(elements) {

    this.elements = elements;

  }


  // helper to simplify iterating `this.elements` and returning `this`

  forEach(fn) {

    this.elements.forEach(fn);

    return this;

  }


  hide() {

    return this.forEach(element => element.style.display = "none");

  }


  click(fn) {

    return this.forEach(element => element.addEventListener("click", fn));

  }


}


function $(selector) {

  return new ElementsHelper(document.querySelectorAll(selector));

}

通過(guò)上述操作，您現(xiàn)在可以執(zhí)行以下操作：


$('#myDiv').hide();


查看完整回答
反對(duì) 回復(fù) 2023-12-14
?
MM們

TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊

你基本上有兩個(gè)選擇：

  1. 像 jQuery 一樣使用你自己的對(duì)象，或者

  2. 擴(kuò)展內(nèi)置原型。

  3. 返回每個(gè)單獨(dú)的結(jié)果對(duì)象時(shí)對(duì)其進(jìn)行擴(kuò)展

我可能會(huì)使用方法#1，也許是擴(kuò)展Array（或通過(guò)組合使用數(shù)組）。

你似乎更喜歡方法#2。通常不建議這樣做，因?yàn)橐坏╅_(kāi)始組合來(lái)自多個(gè)位置的腳本，就會(huì)遇到潛在的沖突。但在應(yīng)用程序（而不是庫(kù)）內(nèi)，這不一定不合理。

在您的情況下，如果您的$函數(shù)返回 的結(jié)果querySelectorAll，它將返回 a?NodeList，并且您可以擴(kuò)展NodeList.prototype。每當(dāng)擴(kuò)展原型時(shí)，始終使用Object.defineProperty（或類似的）來(lái)定義不可枚舉的屬性。例如：

Object.defineProperty(NodeList.prototype, "hide", {

? ? value() {

? ? ? ? this.forEach(/*...*/);

? ? ? ? return this;

? ? },

? ? writable: true,

? ? configurable: true

});

實(shí)例：

Object.defineProperty(NodeList.prototype, "hide", {

? ? value() {

? ? ? ? // This isn't a great "hide", it's just for

? ? ? ? // the purposes of showing the plumbing

? ? ? ? this.forEach(el => el.style.display = "none");

? ? ? ? return this;

? ? },

? ? writable: true,

? ? configurable: true

});


const $ = selector => document.querySelectorAll(selector);


setTimeout(() => {

? ? $(".a").hide();

? ? console.log("Hid .a elements");

}, 800);

<div class="a">a</div>

<div class="b">b</div>

<div class="c">c</div>

不幸的是，__proto__現(xiàn)在已被棄用

這是真的，但Object.getPrototypeOf不是，只是__proto__訪問(wèn)器屬性（它只是為了向后兼容而添加到規(guī)范中）。


查看完整回答
反對(duì) 回復(fù) 2023-12-14
  • 2 回答
  • 0 關(guān)注
  • 206 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)