JavaScript Guidelines

These guidelines help ensure that all JavaScript in Cynosure components is reliable, readable, and maintainable.

Third-Party JavaScript Libraries Used

Below is a list of third-party JavaScript libraries that are used in Cynosure components or may be initialized via component JavaScript:

• jQuery: General DOM manipulation and event handling (v3.7.1)
• Bootstrap: Framework for responsive layouts and interactive UI (v5.3.5)
• Magnific Popup: Responsive lightbox & dialog script (v1.2.0)
• ScrollReveal: Animates elements as they enter/leave the viewport (v4.0.9)
• Select2: Customizable select box replacement (v4.1.0-rc.0)
• Slick Carousel: Carousel/slider functionality (v1.8.1)
• axe-core: Accessibility testing engine (v4.11.0)
• url-search-params-polyfill: Polyfill for URLSearchParams API (v8.2.5)

Note: Some of these libraries are used only for specific components or features, and may not be present/initialized on every page.

If you’re building or updating components:

• Prefer vanilla JavaScript unless a third-party library is required.
• Check if a needed library is already loaded globally before including another copy.
• Import libraries only as-needed to keep bundles minimal.

---

1. Use ES6+ Syntax

Prefer modern JavaScript syntax for clarity and compatibility.

• Use const and let instead of var
• Use arrow functions () => {} for simple functions
• Prefer template strings: `Hello, ${name}`

1// Good
2const handleClick = event => {
3  event.preventDefault();
4  // ...
5}
6
7// Bad
8var handleClick = function(event) {
9  event.preventDefault();
10}
11

2. Keep Components Unobtrusive

Component JavaScript should not pollute global scope and should only affect their own DOM nodes.

• Wrap logic in closures or modules
• Avoid global variables

1// Good
2function Accordion(element) {
3  // private scope
4}
5

3. Use Event Delegation When Appropriate

Attach events to parent elements to support dynamic content and reduce the number of listeners.

1parentElement.addEventListener('click', (event) => {
2  if (event.target.matches('.button')) {
3    // handle click
4  }
5})
6

4. Accessibility First

Support keyboard interactions and ARIA attributes.

• Use proper focus management
• Respond to Enter and Space for button-like elements

1element.addEventListener('keydown', (event) => {
2  if (event.key === 'Enter' || event.key === ' ') {
3    // trigger action
4  }
5})
6

5. Prefer Data Attributes For State

Use data- attributes to reflect and read state in the DOM instead of class names alone.

1element.setAttribute('data-open', 'true');
2const isOpen = element.getAttribute('data-open') === 'true';
3

6. Avoid Inline Handlers

Do not use inline event handlers (onclick=...). Always use addEventListener in JS.

---

7. Keep Side Effects Minimal

Component JS should only handle its logic—avoid business/data or remote calls inside.

---

8. Document Functions

Document complex functions or logic with brief comments.

1/**
2 * Toggles the tabs component.
3 * @param {HTMLElement} tabContainer
4 */
5function toggleTabs(tabContainer) { ... }
6

---

9. Optimize Performance

• Debounce or throttle rapid events like scroll or resize
• Detach listeners when components unmount

---

10. Linting & Formatting

• Follow Prettier formatting
• Use ESLint with recommended rules

---

Apply these principles to all Cynosure component JavaScript, and keep code clear, modular, and accessible.