初步認識 Drupal Behaviors

前言

作為 Drupal 前端開發者，想必曾發生過，在Drupal 的 Ajax 一旦觸發後，你所撰寫的 Javascript 會對動態的元素，起不了任何作用。 這麼強大的 Drupal 難道沒有辦法解決這個方法嗎？ 其實是有的，Drupal Javascript API 提供了一個方法叫 Behaviors。接下來小編帶讀者們認識 Drupal Behaviors 的強大之處。

為何 Javascript 對動態元素會沒有任何作用，如對這有興趣可以參考這裡的簡單說明。

Drupal Behaviors

它有什麼樣的功能？

它是由 Drupal Javascript API 提供的一個功能，它有以下的作用：
1. 提供後端的資料送到前端去使用，這能使得很多前端的特效功能的重複使用性大大提高了許多。

Floating block 模組 和 Sticky Navigation 模組 有使用過這兩個模組的人，都知道它們的功能會將頁面上特定的元素，隨著使用者往下滑元素也會跟著移動的功能。重點在這個特定的元素，它們都可以在 Drupal 後台進行指定元素，並且存到資料庫中，當要使用時，會將這些已存在資料庫中的特定元素，經由 Behaviors 送到前端使用。

2. 解決 Drupal Ajax 觸發後，讓你撰寫的程式碼沒有反應的情形。(如：新增 DOM 到頁面上、或是刪除...等等的操作)。

views 模組和 views load more 模組 都是使用 Ajax 來改變 DOM， 它們也是使用 Behaviors 的方式解決此問題。

怎麼使用它？

你可能在思考如何把它應用到你的專案中，其實並不難。你只需要將以下的程式碼貼到你的JS檔案中即可。

Drupal.behaviors.custom_name = {
  attach: function (context, settings) {
    // 在這裡撰寫你的程式碼
  }
};

1. custom_name: 這個變數是依照你個人喜好來決定。
2. context: 最一開始讀取完頁面後，這個變數裡面會裝著一個完整的 Javascript document的物件，之後會隨著 Drupal Ajax 的觸發，裡面的值也會跟著改變。如果對這個還是不理解，可以自行實際操作用console.log 自己看這裡面的變化。
3. settings: 放著是後端丟給前端的資料。

如果不知道如何引用 JS 檔案可以參考這裡，這裡並不提這一塊。

什麼時候可以使用它？

當你的頁面有使用到 Drupal Ajax，都務必使用它，否則你會發生程式碼沒有反應的情況。

結論

Drupal Behaviors 可以讓程式碼的重複使用的機會提高，而且增大彈性。同時也解決了動態元素的問題，真的是一個非常好用的 API，如果你對 Behaviors 有任何問題或是哪有有錯誤，歡迎糾正及討論。