Menu
Codebook LogoCodebookDocsTemplates
Design SystemsJavaScriptReactPHP
Codebook LogoCodebook
  • Docs
  • Templates
  • Design Systems
  • JavaScript
  • React
  • PHP
  • Getting Started
    • Getting Started
  • JavaScript
    • React
      • Basics
      • Context
      • Forms
      • Hooks
      • Snippets
      • Examples
        • Hide on Scroll
        • Hide Sidebar on Mobile
        • Sync State Between Tabs
      • Gatsby
        • Config
      • NextJS
        • MDX
        • Router
        • Tips
      • Styled Components
        • Basics
        • Snippets
        • Typescript
    • React Native
      • Introduction
      • Basics
      • Design Systems
      • 3rd Party Components
      • React Native Web
    • NodeJS
      • Basics
      • Async
      • package.json
      • ExpressJS
        • Error Handling
      • NestJS
        • Introduction
        • Basics
    • Typescript
      • Config
    • Vanilla JS
      • Currency
      • Validation
    • Web Components
      • Storybook
      • Integrating with ReactJS
    • jQuery
      • Best Practices
  • PHP
    • Basics
    • Snippets
    • Laravel
      • Blade
      • DevOps
      • Tips
  • CSS
    • Snippets
  • Dev Ops
    • Project Management
      • Linting
    • Git
      • Snippets
    • Ubuntu
      • Permissions
  • Other
    • Regex
    • Shopify
    • Netlify
    • Firebase
      • Introduction
      • Basics
      • Gatsby
  • Design Systems
    • Theming
      • Examples

jQuery Best Practices

Creating New App#

Run jQuery on Load#

Best practice for jQuery functions to wrap in IIFE (immediately invoked function expression). Example shows a shorthand of $(document).ready as $(function() {}). Based on: http://gregfranko.com/blog/jquery-best-practices/

(function($) {
$(function() {
$(".example").dropdown();
});
})(jQuery);
// IIFE keeps all code out of global scope
(function($, window, document) {
// The $ is now locally scoped
$(function() {
// The DOM is ready!
// equiv of $(document).ready(function () {
});
})(window.jQuery, window, document);
Previous
« Integrating Web Components into ReactJS
Next
PHP Basics »
  • Run jQuery on Load
Ryosuke logo
Copyright © 2020 Ryosuke