Anatomy of a plugin

Bootstrap jQuery plugins all follow the same convention in how they are constructed. At the top level, a plugin is generally split across two files: a JavaScript file and a Sass file. For example, the Alert component is made up of bootstrap/js/alert.js and bootstrap/scss/_alert.scss. These files are compiled and concatenated as part of Bootstrap's distributable JavaScript and CSS files. Let's look at these two files in isolation to learn about the anatomy of a plugin.

JavaScript

Open up any JavaScript file in bootstrap/js/src, and you will see that they all follow the same pattern: an initial setup, a class definition, data API implementation, and jQuery extension. Let's take a detailed look at alert.js.

Setup

The alert.js file, written in ECMAScript 2015 syntax {also known as ES6, the latest (at the time of writing) standardized specification of JavaScript}, first imports jQuery and a utilities module:

import $ from 'jquery'    
import Util from './util'

A constant named Alert...