讓同事進入混亂貓咪的假 jQuery 技巧

假 jQuery 技巧

前言

這一篇算簡單分享一下如何讓同事進入混亂貓咪的一個小小技巧，讓同事誤以為真的可以使用 jQuery 的功能，但實際上只是純粹的 JavaScript 而已。

DOM 選取

首先我們知道 jQuery 在呼叫的時候，比較常見會有以下兩種常見：

$()
jQuery()

最常見不意外應該是 $()，眾所皆知，我們可以在 $() 傳入 id、class、tag name 等等的方式來選取 DOM，那麼這功能其實就與我們常用的 document.querySelector() 一樣，所以我們可以這樣做：

1	`const $ = (selector) => document.querySelector(selector)`

接下來我們就可以這樣使用：

1
2
3

$('#id')
$('.class')
$('tag')

這邊也附上 CodePen 實際示範一下

就目前為止都算是一個非常單純的小技巧，這個小技巧其實也可以很方便在純 JS 上面選取

DOM 事件

那麼在 jQuery 裡面我們很常會使用 .on() 來去設置監聽，基本的 jQuery 寫法如下：

1
2
3

$('.class').on('click', () => {
  // do something
})

那麼如果你單純用剛剛前面的 DOM 選取方式，就只能這樣寫

const $ = (selector) => document.querySelector(selector)

$('.class').addEventListener('click', () => {
  // do something
})

其實會看到 addEventListener 就知道這是純 JS 的寫法，那麼該怎麼樣以假亂真呢？我們可以這樣做：

const $ = (selector) => {
  const element = document.querySelector(selector);

  element.on = (event, callback) => {
    element.addEventListener(event, callback);
  };
  
  return element;
}

那麼實際使用就會像這樣子

DOM 隱藏/顯示

另一個很常見的 hide、show 我們也可以拿來玩一下，以 jQuery 的寫法來講，我們只需要選取到元素，就可以針對該元素隱藏以及顯示

// 隱藏
$('.class').hide();

// 顯示
$('.class').show()

那麼如果想達到這效果，我們只需要這樣做：

const $ = (selector) => {
  const element = document.querySelector(selector);

  element.on = (event, callback) => {
    element.addEventListener(event, callback);
  };

  element.hide = () => {
    element.style.display = 'none';
  };

  element.show = () => {
    element.style.display = 'block';
  };

  return element;
}

但如果你期望是點擊本身元素後本身隱藏呢？這時候就要改一下寫法了就會需要使用到 this

const $ = (selector) => {
  const element = document.querySelector(selector);

  element.on = (event, callback) => {
    element.addEventListener(event, callback);
  };

  element.hide = () => {
    this.style.display = 'none';
  };

  element.show = () => {
    this.style.display = 'block';
  };

  return element;
}

結論

那麼這一篇其實就只是簡單的分享一些 JavaScript 的小技巧而已，實際專案上如果要使用的話，還是會建議與團隊溝通一下，否則很容易發生混亂貓咪

混亂貓咪

同事可能會想說：「奇怪？這寫法不是 jQuery 嗎？為什麼一推功能都沒有了？」，然後你就有很高機會被請出去喝咖啡泡茶之類唷。

最後也只是想提醒一下，其實 jQuery 本身也是 JavaScript 所實作出來的，所以如果你對於 JavaScript 有高度掌握的話，那麼在學習 jQuery 上也會更加的容易唷。

讓同事進入混亂貓咪的假 jQuery 技巧

前言

DOM 選取

DOM 事件

DOM 隱藏/顯示

結論

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

DOM 選取

DOM 事件

DOM 隱藏/顯示

結論

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

前端工程師應該要懂的瀏覽器渲染機制

JavaScript 數字格式化：最簡單的方法（千分位與貨幣）

FizzBuzz for JavaScript

關於 JavaScript 中 5 種物件取值方式

分享這篇文章

留言