Plugin jQuery, Design Patterns

Jul 9, 20151 like20,028 views

The document discusses various JavaScript patterns for designing jQuery plugins, including constructor functions, object creation, and the use of the prototype for methods. It outlines the structure for a simple jQuery plugin using an immediately invoked function expression (IIFE) and provides examples of initializing and using plugins. It also demonstrates the dom-to-object bridge pattern and method creation for plugins.

jQuery Plugin
Design Patterns
“Deep into JS” Meetup

function Person(name, surname) {!
! ! ! this.name = name;!
! ! ! this.surname = surname;!
}

function Person(name, surname) {!
! ! ! this.name = name;!
! ! ! this.surname = surname;!
! ! ! this.getName = function() {!
! ! ! ! ! ! // privileged method: useful if you need private method, attributes!
! ! ! ! ! ! return this.name;!
! ! ! }!
}

function Person(name, surname) {!
! ! ! this.name = name;!
! ! ! this.surname = surname;!
}!
Person.prototype.getName = function() {!
! ! ! ! return this.name;!
}

var robb = new Person(‘Robert’, ‘Casanova’);!
console.log(robb.getName());

var robb = { 
! ! name: ‘Robert’, 
! ! surname: ‘Casanova’,!
! ! getName: function() { 
! ! ! ! ! return this.name; 
! ! }!
}

var gigi = Object.create(robb);!
gigi.name = ‘Giorgio’;!
gigi.surname = ‘Moroder’;!
!
console.log(gigi.getName())

$.fn[‘pluginName’] = function() { 
this.each(function(){ 
$(this).doSomething(); 
}); 
}
Simplest jQuery plugin ever

;(function($, window,document, undeﬁned ){!
//plugin goes here!
})(jQuery, window, document)
Immediately Invoked Function Expression
(IIFE)

var pluginName = “mioPlugin”,!
defaults = { 
defaultProperty: ‘defaultValue’ 
}
Defaults

$function Plugin(el, options) {! ! this.el = el;! this.$el = $(el);! this.options = $.extend({},defaults, options);! ! ! ! this._defaults = defaults;! this._name = pluginName;! ! ! ! this.init();! } Constructor Function$

Plugin.prototype.init = function() {!
! ! ! ! //the initial logic goes here!
}!
Plugin.prototype.someMethod = function() {!
…!
}
Methods

$.fn[pluginName] = function(options) {!
! ! ! return this.each(function(){!
! ! ! ! ! if(!$.data(this, pluginName)) {!
! ! ! ! ! ! $.data(this, pluginName, new Plugin(this, options));!
! ! ! ! ! }!
! ! ! });!
}
Plugin Magic

$(‘#elem’).pluginName({!
!! defaultProperty: ‘value’!
});
Example

var myObject = {!
! ! init: function (options,elem) {!
! ! ! ! …!!
! ! }!
}
Object

$init: function (options,elem) {! ! ! this.options = $.extend({}, this.options,options);! ! ! this.el = elem;! this.$el = $(elem);! ! this._build();! ! return this;! } Init Function$

options: {!
! defaultOption: ‘defaultValue’!
}
Default options

$_build: function() {! ! this.$el.html(‘inizialize html here’);! },! publicMethod: function() {  this.$el.doSomething();  } Methods$

$.plugin = function(name,object) {!
! ! $.fn[name] = function(options) {!
! ! ! ! return this.each(function(){ 
! ! ! ! ! ! if(!$.data(this,name)) { 
$.data(this,name, Object.create(myObject).init(options,this))
} 
})!
! ! }!
} !
$.plugin(“pluginName”, myObject )
Plugin Magic

$(‘#elem’).pluginName({!
!! defaultProperty: ‘value’!
});!
!
var plugin = $(‘#elem’).data(‘pluginName’);!
plugin.publicMethod();
Example

The document provides tips and best practices for creating jQuery plugins, including organizing code structure, generalizing functionality, minimizing file size through minification, and optimizing performance. It discusses using closures and object literals for plugins, exposing only necessary methods, avoiding duplicate code, and helping the compressor by using arrays and strings. The goal is to build clean, simple APIs while generalized and minimized code.

Best Practices in Plugin Development (WordCamp Seattle)andrewnacin

The document outlines best practices for WordPress plugin development, emphasizing the importance of proper coding techniques, security measures, and the use of WordPress APIs. It discusses common pitfalls, such as improper URL handling and reliance on direct database queries, and provides examples of correct practices. Additionally, the importance of plugin documentation and adhering to coding standards is highlighted to enhance development and user experience.

MojoliciousMarcos Rebelo

Mojolicious is a real-time web framework for Perl that provides a simplified single file mode through Mojolicious::Lite. It has a clean, portable, object oriented API without hidden magic. It supports HTTP, WebSockets, TLS, IPv6 and more. Templates can use embedded Perl and are automatically rendered. Helpers, sessions, routing and testing utilities are built in. The generator can create new app structures and components.

Mojolicious - A new hopeMarcus Ramberg

Task 1EdiPHP

RESTful web servicesTudor Constantin

This document provides an overview of RESTful web services using Mojolicious and DBIx::Class. It describes a sample expense tracker application with five database tables in a many-to-many relationship. It then introduces REST concepts and describes how Mojolicious routes requests, DBIx::Class models the database, and generic controllers can provide CRUD operations. Finally, it outlines the steps to generate RESTful routes for a database table, including creating a model and controller that inherits standard CRUD methods.

Mojolicious on SteroidsTudor Constantin

Maintainable JavaScript 2012Nicholas Zakas

This document summarizes Nicholas C. Zakas's presentation on maintainable JavaScript. The presentation discusses why maintainability is important, as most time is spent maintaining code. It defines maintainable code as code that works for five years without major changes and is intuitive, understandable, adaptable, extendable, debuggable and testable. The presentation covers code style guidelines, programming practices, code organization techniques and automation tools to help write maintainable JavaScript.

Mojolicious: what works and what doesn'tCosimo Streppone

Mojolicious is a lightweight web framework inspired by Ruby frameworks. It uses PSGI and includes features like ORM, templating, internationalization, and forms. Some key differences between Mojolicious and Dancer are that in Mojolicious the application is defined as a class rather than a script, the code is more "natural" with no magic, and Mojolicious routes are very powerful. What works well about Mojolicious is the good documentation, fast IRC support, powerful routing system, extensive test suite, and clear no dependencies policy. However, the no dependencies policy can cause issues, some tests may not be relevant, and the Template Toolkit renderer requires prefixing all variables with "c.".

With a Mighty HammerBen Scofield

The document provides an extensive comparison of command-line syntax for generating models, controllers, and resources in Ruby on Rails version 2 and version 3. It includes command examples for creating Viking, Ninja, and Cowboy resources, along with information on using various options and integrating testing frameworks. Additionally, it outlines the process for using generators effectively, including setting up factory definitions and configurations.

jQuery Anti-Patterns for Performance & CompressionPaul Irish

The document discusses various jQuery anti-patterns that can negatively impact performance and compression. It describes caching selections, using document fragments to append content outside of loops, avoiding unnecessary re-querying of elements, and leveraging event delegation with delegate() instead of binding individual handlers. The document emphasizes optimizing selector syntax from right to left, avoiding universal selectors, and detaching elements from the DOM when manipulating them to improve speed.

Keeping it small: Getting to know the Slim micro frameworkJeremy Kendall

Keeping it small - Getting to know the Slim PHP micro frameworkJeremy Kendall

The document discusses the Slim micro PHP framework. It provides an overview of installing Slim via Composer, basic routing examples including GET and POST requests, and configuration options. Key topics covered include routing, templates, middleware, configuration via a config array, and logging/flash messaging. Examples demonstrate basic routing for homepage, single images, adding photos, and handling POST data and redirects.

Mojolicious, real-time web frameworktaggg

This document provides an overview of Mojolicious, a real-time web application framework written in Perl. It discusses getting started with Mojolicious::Lite, including routes, placeholders, templates and layouts. It also covers sessions, growing applications out of Lite into Mojolicious, and additional Mojo modules for things like web clients and HTML parsing. Resources for learning more about Mojolicious are provided.

Perl: Hate it for the Right ReasonsMatt Follett

The document describes a project to build a website called PerkyProfiler that retrieves user profile information from different services like GitHub, Flickr, and Twitter by taking URLs as input. It will use Perl and several Perl modules. The project will be built using the Catalyst web framework and Moose/MooseX for object-oriented programming. It describes using Moose roles, custom types, declarative class definitions, and functional programming techniques in Perl. The goal is to generate a unified user profile by combining data from different services for a given URL.

Inside Bokete: Web Application with Mojolicious and othersYusuke Wada

Yusuke Wada introduced his work developing the Bokete website. Bokete is a Japanese entertainment website similar to 9gag that allows users to post and view "boke" which are photos with short texts. It has a website, mobile apps, and receives 300 million page views per month. Wada developed the backend system for Bokete using Perl and Mojolicious along with several other CPAN modules, particularly some written by Japanese authors. He discussed the system architecture and modules used to build Bokete.

Drupal Best Practicesmanugoel2003

Developing apps using PerlAnatoly Sharifulin

Anatoly Sharifulin presents on developing apps using Perl. He discusses creating an app called DLTTR that allows users to delete tweets in bulk using asynchronous queues and APIs. The app was built with Mojolicious, uses a server API, and stores data in MySQL. It has been successful with over 1 million tweets deleted and thousands of users. The talk highlights how Perl helped enable the creation of this cross-platform app that deletes tweets quickly and appropriately.

Building Cloud CastlesBen Scofield

The document presents a technical overview of deploying and managing a Ruby on Rails application in a cloud environment, specifically using Heroku and various open-source tools. It includes snippets of code for handling tasks such as logging, error management, and caching, while also showcasing best practices like handling HTTP requests and implementing search functionality. Additionally, it highlights the use of external services and cloud storage for media assets in a Rails application.

Rails 3: Dashing to the FinishYehuda Katz

Django HeresiesSimon Willison

This document contains Simon Willison's heresies about Django. Some of the heresies discussed include that the {% if %} tags in Django templates suck, that silencing template errors is a bad idea, and that settings.py causes problems. Alternatives proposed include using a smarter {% if %} tag snippet, not silencing errors, and allowing per-application settings instead of one global settings file. The document also advocates for improving testing and documentation in the Django community.

Mojolicious. Веб в коробке!Anatoly Sharifulin

Mojolicious is a full-stack web framework and HTTP client for Perl that provides an object-oriented API without hidden magic or dependencies. It includes features like asynchronous I/O, routing, plugins, sessions, templating, internationalization support, and JSON/XML handling. Mojolicious comes in three flavors: Mojolicious::Lite for simple apps, Mojolicious for full MVC apps, and Mojo as a lightweight base framework. It supports technologies like CGI, FastCGI, PSGI, HTTP 1.1, and WebSockets.

Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Dotan Dimet

The document discusses the Mojolicious Perl framework for real-time web applications, emphasizing its non-blocking I/O and event-driven capabilities. It provides example code for routing and using WebSockets to retrieve and parse web page titles asynchronously. The framework supports both blocking and non-blocking HTTP requests, with a focus on utilizing callbacks to avoid blocking the event loop.

Keeping it Small: Getting to know the Slim Micro FrameworkJeremy Kendall

You Don't Know Query - WordCamp Portland 2011andrewnacin

Andrew Nacin gave a talk at WordCamp Portland 2011 about querying in WordPress. He explained that WordPress uses the WP_Query class to run queries and populate $wp_query. The "main query" is stored in $wp_the_query and copied to $wp_query. Developers can alter queries using the 'request' or 'pre_get_posts' hooks. The 'pre_get_posts' hook is more flexible but can impact any query, so developers should check that they are only modifying the main query. Proper use of wp_reset_query() and wp_reset_postdata() is also important when running additional queries.

You Don't Know Query (WordCamp Netherlands 2012)andrewnacin

The document discusses advanced querying techniques in WordPress, including conditional tags and the use of wp_query, as presented by Andrew Nacin at WordCamp Netherlands 2012. It highlights the importance of understanding the main query and the pitfalls of using query_posts(), suggesting instead the use of pre_get_posts for modifications. The talk emphasizes best practices to avoid performance issues and ensure proper functionality of WordPress queries.

Mojo as a_clientMarcus Ramberg

Mojo started as an alternative to the aging LWP library for HTTP requests in Perl. It was created by Sebastian Riedel to have a more modern, asynchronous API. Mojo provides an easy to use and full-featured HTTP client and server with support for features like websockets, parallel requests, and more. The library uses a test-driven development approach and strives to have a pragmatic design with reusable components.

Djangocon 2014 angular + djangoNina Zakharenko

This document discusses using AngularJS with Django to build a single page application called Tweeter. Some key advantages of this approach are that it is faster since pages don't need to reload, any JavaScript framework can be used, and the backend is reusable for mobile apps. Django REST framework is used to create RESTful APIs for models like Tweets that Angular consumes through resources and controllers. Templates are used to pass data from Django to Angular initially, while Angular routing and partials handle page changes within the SPA. Overall this provides a smooth integration of Django and Angular that separates concerns for a better user experience.

Writing your Third PluginJustin Ryan

The document discusses Jenkins plugin development, emphasizing the importance of understanding Groovy and the implications of creating plugins, including maintenance overhead. It outlines various types of plugins, including Groovy postbuild and Job DSL plugins, and provides examples of code snippets and configurations. Additionally, it touches on the Jenkins data model, plugin lifecycle, and deployment considerations for plugins.

An easy guide to Plugin DevelopmentShinichi Nishikawa

This document is a guide for a WordPress plugin development meet-up led by Shinichi Nishikawa in Bangkok, outlining the basics of plugin creation, including how WordPress works, examples of simple plugins, and the concept of hooks. It emphasizes the accessibility of plugin development for individuals with basic programming knowledge and covers essential PHP elements as well as the structure of a plugin. Resources for further learning and suggestions for future meet-up topics are also provided.

More Related Content

What's hot (20)

Mojolicious: what works and what doesn'tCosimo Streppone

With a Mighty HammerBen Scofield

jQuery Anti-Patterns for Performance & CompressionPaul Irish

Keeping it small: Getting to know the Slim micro frameworkJeremy Kendall

Keeping it small - Getting to know the Slim PHP micro frameworkJeremy Kendall

Mojolicious, real-time web frameworktaggg

Perl: Hate it for the Right ReasonsMatt Follett

Inside Bokete: Web Application with Mojolicious and othersYusuke Wada

Drupal Best Practicesmanugoel2003

Developing apps using PerlAnatoly Sharifulin

Building Cloud CastlesBen Scofield

Rails 3: Dashing to the FinishYehuda Katz

Django HeresiesSimon Willison

Mojolicious. Веб в коробке!Anatoly Sharifulin

Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Dotan Dimet

Keeping it Small: Getting to know the Slim Micro FrameworkJeremy Kendall

You Don't Know Query - WordCamp Portland 2011andrewnacin

You Don't Know Query (WordCamp Netherlands 2012)andrewnacin

Mojo as a_clientMarcus Ramberg

Djangocon 2014 angular + djangoNina Zakharenko

Mojolicious: what works and what doesn'tCosimo Streppone

With a Mighty HammerBen Scofield

jQuery Anti-Patterns for Performance & CompressionPaul Irish

Keeping it small: Getting to know the Slim micro frameworkJeremy Kendall

Keeping it small - Getting to know the Slim PHP micro frameworkJeremy Kendall

Mojolicious, real-time web frameworktaggg

Perl: Hate it for the Right ReasonsMatt Follett

Inside Bokete: Web Application with Mojolicious and othersYusuke Wada

Drupal Best Practicesmanugoel2003

Developing apps using PerlAnatoly Sharifulin

Building Cloud CastlesBen Scofield

Rails 3: Dashing to the FinishYehuda Katz

Django HeresiesSimon Willison

Mojolicious. Веб в коробке!Anatoly Sharifulin

Mojolicious - Perl Framework for the Real-Time Web (Lightning Talk)Dotan Dimet

Keeping it Small: Getting to know the Slim Micro FrameworkJeremy Kendall

You Don't Know Query - WordCamp Portland 2011andrewnacin

You Don't Know Query (WordCamp Netherlands 2012)andrewnacin

Mojo as a_clientMarcus Ramberg

Djangocon 2014 angular + djangoNina Zakharenko

Viewers also liked (11)

Writing your Third PluginJustin Ryan

An easy guide to Plugin DevelopmentShinichi Nishikawa

Building an Eclipse plugin to recommend changes to developerskim.mens

1) The document summarizes a master's thesis defense about building an Eclipse plugin called Mendel to recommend code changes to developers based on regularities extracted from existing code. 2) Mendel uses a "genetic metaphor" to find family members of a selected code entity according to different family definitions, extract dominant traits from the family, and recommend traits for the entity that are not already implemented. 3) The thesis validates Mendel's recommendations by analyzing multiple versions of projects and checking if recommended changes were later implemented by developers. The results showed some family definitions were better suited than others for different recommendation types.

Jumping Into WordPress Plugin ProgrammingDougal Campbell

The document is a presentation by Dougal Campbell on WordPress plugin programming, aimed at users with basic PHP knowledge who want to learn about hooks, actions, and filters. It explains the differences between filters (which modify content) and actions (which execute events), and provides practical coding examples for adding hooks in WordPress. The presentation also emphasizes best practices for secure and maintainable code in plugin development.

Building GPE: What We Learnedrajeevdayal

A Simple Plugin Architecture for Wicketnielsvk

The document discusses a simple plugin architecture for the Wicket framework, presented by Niels van Kampenhout and Wander Grevink at a meetup in Amsterdam in 2007. It highlights the problems of poor customizability and maintenance in current applications and proposes a flexible, generic platform that can be adapted to various configurations using plugins. The implementation includes data-driven configurations and runtime changes to accommodate user needs.

Eclipse Overview Lars Vogel

Lars Vogel gives a presentation on the state of Eclipse. He discusses his background with Linux and Eclipse. The presentation covers the Eclipse ecosystem, including the Eclipse Foundation and projects. Vogel describes how Eclipse is highly modular and extensible via plugins. He discusses Eclipse 4.0 and the move to a more flexible and model-driven architecture. In conclusion, Vogel recommends resources for learning more about Eclipse plugin and RCP development.

So, you want to be a plugin developer?ylefebvre

The document is a guide for aspiring WordPress plugin developers, detailing the journey from inspiration to coding, promoting, and monetizing plugins. It covers essential topics such as using actions and filters, maintaining code quality, ensuring security, and supporting the community. The talk emphasizes the balance between creating valuable plugins and understanding market dynamics to achieve successful outcomes.

The Open-source Eclipse Plugin for Force.com Development, Summer ‘14Salesforce Developers

The document discusses the new open-source Eclipse plugin for Salesforce development. It describes the history of the original plugin and reasons for updating it, including using the Tooling API and open sourcing the code. Developers can now contribute changes by forking the project repository on GitHub and submitting pull requests. The document reviews the different available versions and outlines the process for testing changes locally and getting updates incorporated into the main branch.

Configuration as Code: The Job DSL PluginDaniel Spilker

Daniel Spilker from Coremedia AG presented on the Job DSL Plugin within Jenkins, focusing on the issues related to job configuration and the benefits of using Configuration as Code. The presentation detailed how the Plugin facilitates quick creation and refactoring of job pipelines, promotes the use of DSL scripts, and supports various plugins and project types. Best practices highlighted include gradually converting jobs to DSL scripts and securely managing credentials.

Creating a Plug-In Architectureondrejbalas

The document discusses creating a plug-in architecture in .NET. It defines a plug-in as an external piece of functionality that can be added to a system by following a predefined contract. Developing with a plug-in architecture allows splitting work across boundaries, incremental feature deployment, and only deploying updated modules without source access. Challenges include managing contract changes and increased development time for small projects.

Writing your Third PluginJustin Ryan

An easy guide to Plugin DevelopmentShinichi Nishikawa

Building an Eclipse plugin to recommend changes to developerskim.mens

Jumping Into WordPress Plugin ProgrammingDougal Campbell

Building GPE: What We Learnedrajeevdayal

A Simple Plugin Architecture for Wicketnielsvk

Eclipse Overview Lars Vogel

So, you want to be a plugin developer?ylefebvre

The Open-source Eclipse Plugin for Force.com Development, Summer ‘14Salesforce Developers

Configuration as Code: The Job DSL PluginDaniel Spilker

Creating a Plug-In Architectureondrejbalas

Similar to Plugin jQuery, Design Patterns (20)

jQuery Namespace PatternDiego Fleury

The document discusses a namespace design pattern for jQuery plugins, addressing issues such as name conflicts, organization, and communication among plugin components. It presents various techniques for creating namespaced jQuery functions to avoid global scope contamination and improve code structure. The author emphasizes advantages like organization and simplicity in employing this design pattern.

Jquery PluginRavi Mone

The document discusses best practices for developing jQuery plugins. It covers defining a private scope, using a template, understanding the plugin syntax, adding options through object literals, and iterating through matched elements using this.each(). The key steps are to make the plugin easy to use, use good naming conventions, define a closure, set default parameters, allow chaining by returning this, document the code, and thoroughly test the plugin.

jQuery PluginElijah Manor

This document provides instructions on how to create a jQuery plugin. It explains that plugins allow for code reuse, encapsulation and prevent collisions using namespaces. It then discusses how plugins work by being passed the jQuery object and returning it to allow chaining. It also covers declaring plugins, passing parameters through options objects, using each() to iterate elements, including public and private functions, supporting metadata, and allowing chaining by returning the jQuery object. The document is authored by Elijah Manor and promotes his expertise in creating jQuery plugins.

What's up with Prototype and script.aculo.us?Christophe Porteneuve

The document discusses the developments and updates in the Prototype JavaScript framework, particularly highlighting the features of Prototype 1.6, including custom events, a new class system, and various improvements. It also outlines future plans for upcoming releases, such as Prototype 1.6.1 and 2.0, emphasizing enhanced community involvement and code restructuring efforts. Key functionalities like handling AJAX responses, improved event methods, and template enhancements are explained in detail.

Bringing classical OOP into JavaScriptDmitry Sheiko

The document explores the incorporation of classical object-oriented programming (OOP) concepts into JavaScript, highlighting the language's flexibility to adapt features like classes, inheritance, and interfaces despite its prototype-based nature. It introduces a JavaScript library, JSA, which enables developers to implement classical OOP features through factory patterns and mixins. The author emphasizes learning from established design patterns and suggests a systematic approach to enhance JavaScript for OOP programmers.

Jquery plugin developmentFaruk Hossen

JQuery is a JavaScript library that allows developers to easily manipulate HTML, CSS, and events. A JQuery plugin extends JQuery's functionality by adding new methods to its prototype object. Plugins provide reusable code and save development time. A plugin consists of a function, options, callbacks, and the ability to chain methods. The 'this' keyword refers to DOM elements or JQuery objects depending on the context.

Prototype FrameworkJulie Iskander

This document outlines topics covered in a lecture on object oriented JavaScript using the Prototype framework, including: - Revision of object oriented JavaScript concepts like objects, prototypes, and classes - Prototype framework utilities like $, $$ and Enumerable - Extending DOM elements using Prototype methods - Templates, form management, and getting element dimensions - Event handling and classes/inheritance in Prototype - JSON encoding/parsing - Ajax utilities like Ajax.Request and Ajax.Updater

[Coscup 2012] JavascriptMVCAlive Kuo

This document discusses JavascriptMVC, an alternative Javascript MVC framework to BackboneJS. It provides an overview of JavascriptMVC's features such as MIT licensing, clear documentation, and providing an almost total solution for building web applications. Potential pros include the licensing, documentation, and comprehensive features. Potential cons include it being less well known and having fewer online resources than BackboneJS in Taiwan. Examples of how it handles classes, CSS, data loading/validation, and views are also provided.

Learn JS concepts by implementing jQueryWingify Engineering

This document discusses a workshop focused on learning JavaScript concepts through the implementation of jQuery. Participants will explore topics such as prototypes, the use of 'this', and how to implement jQuery methods like $.css() while reinforcing their understanding of JavaScript theory. The workshop emphasizes hands-on coding to deepen comprehension of core JavaScript and jQuery functionalities.

Building a JavaScript Libraryjeresig

The document details a Google Tech Talk by John Resig on building the jQuery JavaScript library, released in January 2006, which focuses on DOM manipulation, event handling, and plugin extensibility. It emphasizes the importance of a solid API, documentation, testing, and maintaining a lightweight, efficient codebase. Resig also discusses the evolution of JavaScript and best practices for developers, including error handling and community engagement for feature improvement.

Four Ways to add Features to Ext JSShea Frederick

Eugene Andruszczenko: jQueryRefresh Events

This document provides summaries of key points about the jQuery and Prototype JavaScript libraries: 1. jQuery is an open-source JavaScript library that simplifies HTML document traversal, event handling, animation, and Ajax interactions. It has a lightweight footprint and is cross-browser compatible. 2. Both jQuery and Prototype are available under MIT and GPL licenses, allowing developers to choose the license that best suits their projects. jQuery is maintained by a core team and has additional community support. 3. The document then provides examples of common jQuery functions and selectors for manipulating the DOM, handling events, animating elements, and making Ajax requests.

jQuery Presentation - Refresh EventsEugene Andruszczenko

Download full ebook of Extending jQuery Keith Wood download pdf instant downl...busicluckesz

Javascript Design PatternsIván Fernández Perea

This document provides an overview of JavaScript design patterns based on Addy Osmani's book "Essential JavaScript & jQuery Design Patterns". It begins with background on design patterns and defines what a design pattern is. It describes the structure of design patterns and discusses anti-patterns. It then covers common JavaScript design patterns including creational, structural, and behavioral patterns as well as MV* patterns like MVC, MVP, and MVVM. Specific patterns like Module, Observer, Command, Constructor & Prototype, and examples using Backbone.js, Spine.js, and Knockout.js are summarized.

Web Optimization Summit: Coding for Performancejohndaviddalton

ClassJSMichael Barrett

Class.js is a small JavaScript library that provides class-like inheritance. It allows defining classes that inherit properties and methods from a parent class. The library is only 25 lines long and uses a clever approach of caching method references to enable calling super methods from subclasses. While useful for defining common APIs across related types, Class.js is generally not needed in idiomatic JavaScript which favors composition over classes.

OOP and JavaScripteaselsolutions

Javascript Design PatternsSubramanyan Murali

Software Design PatternsSatheesh Sukumaran

The document introduces software design patterns as reusable solutions for common problems in software engineering, categorized into structural, creational, and behavioral patterns. Each category outlines specific patterns and their methods, such as adapter, factory method, and observer, focusing on class interactions and object creation. A practical example using the factory method illustrates how to implement these patterns in programming, demonstrating their effectiveness in managing complex project changes.

jQuery Namespace PatternDiego Fleury

Jquery PluginRavi Mone

jQuery PluginElijah Manor

What's up with Prototype and script.aculo.us?Christophe Porteneuve

Bringing classical OOP into JavaScriptDmitry Sheiko

Jquery plugin developmentFaruk Hossen

Prototype FrameworkJulie Iskander

[Coscup 2012] JavascriptMVCAlive Kuo

Learn JS concepts by implementing jQueryWingify Engineering

Building a JavaScript Libraryjeresig

Four Ways to add Features to Ext JSShea Frederick

Eugene Andruszczenko: jQueryRefresh Events

jQuery Presentation - Refresh EventsEugene Andruszczenko

Download full ebook of Extending jQuery Keith Wood download pdf instant downl...busicluckesz

Javascript Design PatternsIván Fernández Perea

Web Optimization Summit: Coding for Performancejohndaviddalton

ClassJSMichael Barrett

OOP and JavaScripteaselsolutions

Javascript Design PatternsSubramanyan Murali

Software Design PatternsSatheesh Sukumaran

Recently uploaded (20)

Bridging the divide: A conversation on tariffs today in the book industry - T...BookNet Canada

A collaboration-focused conversation on the recently imposed US and Canadian tariffs where speakers shared insights into the current legislative landscape, ongoing advocacy efforts, and recommended next steps. This event was presented in partnership with the Book Industry Study Group. Link to accompanying resource: https://bnctechforum.ca/sessions/bridging-the-divide-a-conversation-on-tariffs-today-in-the-book-industry/ Presented by BookNet Canada and the Book Industry Study Group on May 29, 2025 with support from the Department of Canadian Heritage.

“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/key-requirements-to-successfully-implement-generative-ai-in-edge-devices-optimized-mapping-to-the-enhanced-npx6-neural-processing-unit-ip-a-presentation-from-synopsys/ Gordon Cooper, Principal Product Manager at Synopsys, presents the “Key Requirements to Successfully Implement Generative AI in Edge Devices—Optimized Mapping to the Enhanced NPX6 Neural Processing Unit IP” tutorial at the May 2025 Embedded Vision Summit. In this talk, Cooper discusses emerging trends in generative AI for edge devices and the key role of transformer-based neural networks. He reviews the distinct attributes of transformers, their advantages over conventional convolutional neural networks and how they enable generative AI. Cooper then covers key requirements that must be met for neural processing units (NPU) to support transformers and generative AI in edge device applications. He uses transformer-based generative AI examples to illustrate the efficient mapping of these workloads onto the enhanced Synopsys ARC NPX NPU IP family.

FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptxFIDO Alliance

“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...Edge AI and Vision Alliance

For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/from-enterprise-to-makers-driving-vision-ai-innovation-at-the-extreme-edge-a-presentation-from-sony-semiconductor-solutions/ Amir Servi, Edge Deep Learning Product Manager at Sony Semiconductor Solutions, presents the “From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge” tutorial at the May 2025 Embedded Vision Summit. Sony’s unique integrated sensor-processor technology is enabling ultra-efficient intelligence directly at the image source, transforming vision AI for enterprises and developers alike. In this presentation, Servi showcases how the AITRIOS platform simplifies vision AI for enterprises with tools for large-scale deployments and model management. Servi also highlights his company’s collaboration with Ultralytics and Raspberry Pi, which brings YOLO models to the developer community, empowering grassroots innovation. Whether you’re scaling vision AI for industry or experimenting with cutting-edge tools, this presentation will demonstrate how Sony is accelerating high-performance, energy-efficient vision AI for all.

Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante

Delivering solutions to Azure may involve a variety of architecture patterns involving your applications, APIs data and associated Azure resources that comprise the solution. This session will use reference architectures to illustrate the security considerations to protect your Azure resources and data, how to achieve Zero Trust, and why it matters. Topics covered will include specific security recommendations for types Azure resources and related network security practices. The goal is to give you a breadth of understanding as to typical security requirements to meet compliance and security controls in an enterprise solution.

Data Validation and System InteroperabilitySafe Software

High Availability On-Premises FME Flow.pdfSafe Software

FME Flow is a highly robust tool for transforming data both automatically and by user-initiated workflows. At the Finnish telecommunications company Elisa, FME Flow serves processes and internal stakeholders that require 24/7 availability from underlying systems, while imposing limitations on the use of cloud based systems. In response to these business requirements, Elisa has implemented a high-availability on-premises setup of FME Flow, where all components of the system have been duplicated or clustered. The goal of the presentation is to provide insights into the architecture behind the high-availability functionality. The presentation will show in basic technical terms how the different parts of the system work together. Basic level understanding of IT technologies is required to understand the technical portion of the presentation, namely understanding the purpose of the following components: load balancer, FME Flow host nodes, FME Flow worker nodes, network file storage drives, databases, and external authentication services. The presentation will also outline our lessons learned from the high-availability project, both benefits and challenges to consider.

No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureSafe Software

When projects depend on fast, reliable spatial data, every minute counts. AI Clearing needed a faster way to handle complex spatial data from drone surveys, CAD designs and 3D project models across construction sites. With FME Form, they built no-code workflows to clean, convert, integrate, and validate dozens of data formats – cutting analysis time from 5 hours to just 30 minutes. Join us, our partner Globema, and customer AI Clearing to see how they: -Automate processing of 2D, 3D, drone, spatial, and non-spatial data -Analyze construction progress 10x faster and with fewer errors -Handle diverse formats like DWG, KML, SHP, and PDF with ease -Scale their workflows for international projects in solar, roads, and pipelines If you work with complex data, join us to learn how to optimize your own processes and transform your results with FME.

SAP Modernization Strategies for a Successful S/4HANA Journey.pdfPrecisely

ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdfMuhammad Rizwan Akram

DC Inverter Air Conditioners are revolutionizing the cooling industry by delivering affordable, energy-efficient, and environmentally sustainable climate control solutions. Unlike conventional fixed-speed air conditioners, DC inverter systems operate with variable-speed compressors that modulate cooling output based on demand, significantly reducing energy consumption and extending the lifespan of the appliance. These systems are critical in reducing electricity usage, lowering greenhouse gas emissions, and promoting eco-friendly technologies in residential and commercial sectors. With advancements in compressor control, refrigerant efficiency, and smart energy management, DC inverter air conditioners have become a benchmark in sustainable climate control solutions

Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdfcaoyixuan2019

OWASP Barcelona 2025 Threat Model LibraryPetraVukmirovic

TrustArc Webinar - 2025 Global Privacy SurveyTrustArc

How does your privacy program compare to your peers? What challenges are privacy teams tackling and prioritizing in 2025? In the sixth annual Global Privacy Benchmarks Survey, we asked global privacy professionals and business executives to share their perspectives on privacy inside and outside their organizations. The annual report provides a 360-degree view of various industries' priorities, attitudes, and trends. See how organizational priorities and strategic approaches to data security and privacy are evolving around the globe. This webinar features an expert panel discussion and data-driven insights to help you navigate the shifting privacy landscape. Whether you are a privacy officer, legal professional, compliance specialist, or security expert, this session will provide actionable takeaways to strengthen your privacy strategy. This webinar will review: - The emerging trends in data protection, compliance, and risk - The top challenges for privacy leaders, practitioners, and organizations in 2025 - The impact of evolving regulations and the crossroads with new technology, like AI Predictions for the future of privacy in 2025 and beyond

War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdfbiswajitbanerjee38

Russia is one of the most aggressive nations when it comes to state coordinated cyberattacks — and Ukraine has been at the center of their crosshairs for 3 years. This report, provided the State Service of Special Communications and Information Protection of Ukraine contains an incredible amount of cybersecurity insights, showcasing the coordinated aggressive cyberwarfare campaigns of Russia against Ukraine. It brings to the forefront that understanding your adversary, especially an aggressive nation state, is important for cyber defense. Knowing their motivations, capabilities, and tactics becomes an advantage when allocating resources for maximum impact. Intelligence shows Russia is on a cyber rampage, leveraging FSB, SVR, and GRU resources to professionally target Ukraine’s critical infrastructures, military, and international diplomacy support efforts. The number of total incidents against Ukraine, originating from Russia, has steadily increased from 1350 in 2021 to 4315 in 2024, but the number of actual critical incidents has been managed down from a high of 1048 in 2022 to a mere 59 in 2024 — showcasing how the rapid detection and response to cyberattacks has been impacted by Ukraine’s improved cyber resilience. Even against a much larger adversary, Ukraine is showcasing outstanding cybersecurity, enabled by strong strategies and sound tactics. There are lessons to learn for any enterprise that could potentially be targeted by aggressive nation states. Definitely worth the read!

Down the Rabbit Hole – Solving 5 Training RoadblocksRustici Software

Feeling stuck in the Matrix of your training technologies? You’re not alone. Managing your training catalog, wrangling LMSs and delivering content across different tools and audiences can feel like dodging digital bullets. At some point, you hit a fork in the road: Keep patching things up as issues pop up… or follow the rabbit hole to the root of the problems. Good news, we’ve already been down that rabbit hole. Peter Overton and Cameron Gray of Rustici Software are here to share what we found. In this webinar, we’ll break down 5 training roadblocks in delivery and management and show you how they’re easier to fix than you might think.

FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptxFIDO Alliance

vertical-cnc-processing-centers-drillteq-v-200-en.pdfAmirStern2

Kubernetes Security Act Now Before It’s Too LateMichael Furman

In today's cloud-native landscape, Kubernetes has become the de facto standard for orchestrating containerized applications, but its inherent complexity introduces unique security challenges. Are you one YAML away from disaster? This presentation, "Kubernetes Security: Act Now Before It’s Too Late," is your essential guide to understanding and mitigating the critical security risks within your Kubernetes environments. This presentation dives deep into the OWASP Kubernetes Top Ten, providing actionable insights to harden your clusters. We will cover: The fundamental architecture of Kubernetes and why its security is paramount. In-depth strategies for protecting your Kubernetes Control Plane, including kube-apiserver and etcd. Crucial best practices for securing your workloads and nodes, covering topics like privileged containers, root filesystem security, and the essential role of Pod Security Admission. Don't wait for a breach. Learn how to identify, prevent, and respond to Kubernetes security threats effectively. It's time to act now before it's too late!

Enabling BIM / GIS integrations with Other Systems with FMESafe Software

Jacobs has successfully utilized FME to tackle the complexities of integrating diverse data sources in a confidential $1 billion campus improvement project. The project aimed to create a comprehensive digital twin by merging Building Information Modeling (BIM) data, Construction Operations Building Information Exchange (COBie) data, and various other data sources into a unified Geographic Information System (GIS) platform. The challenge lay in the disparate nature of these data sources, which were siloed and incompatible with each other, hindering efficient data management and decision-making processes. To address this, Jacobs leveraged FME to automate the extraction, transformation, and loading (ETL) of data between ArcGIS Indoors and IBM Maximo. This process ensured accurate transfer of maintainable asset and work order data, creating a comprehensive 2D and 3D representation of the campus for Facility Management. FME's server capabilities enabled real-time updates and synchronization between ArcGIS Indoors and Maximo, facilitating automatic updates of asset information and work orders. Additionally, Survey123 forms allowed field personnel to capture and submit data directly from their mobile devices, triggering FME workflows via webhooks for real-time data updates. This seamless integration has significantly enhanced data management, improved decision-making processes, and ensured data consistency across the project lifecycle.

MuleSoft for AgentForce : Topic Center and API Catalogshyamraj55

This presentation dives into how MuleSoft empowers AgentForce with organized API discovery and streamlined integration using Topic Center and the API Catalog. Learn how these tools help structure APIs around business needs, improve reusability, and simplify collaboration across teams. Ideal for developers, architects, and business stakeholders looking to build a connected and scalable API ecosystem within AgentForce.

Bridging the divide: A conversation on tariffs today in the book industry - T...BookNet Canada

“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...Edge AI and Vision Alliance

FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptxFIDO Alliance

“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...Edge AI and Vision Alliance

Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante

Data Validation and System InteroperabilitySafe Software

High Availability On-Premises FME Flow.pdfSafe Software

No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureSafe Software

SAP Modernization Strategies for a Successful S/4HANA Journey.pdfPrecisely

ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdfMuhammad Rizwan Akram

Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdfcaoyixuan2019

OWASP Barcelona 2025 Threat Model LibraryPetraVukmirovic

TrustArc Webinar - 2025 Global Privacy SurveyTrustArc

War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdfbiswajitbanerjee38

Down the Rabbit Hole – Solving 5 Training RoadblocksRustici Software

FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptxFIDO Alliance

vertical-cnc-processing-centers-drillteq-v-200-en.pdfAmirStern2

Kubernetes Security Act Now Before It’s Too LateMichael Furman

Enabling BIM / GIS integrations with Other Systems with FMESafe Software

MuleSoft for AgentForce : Topic Center and API Catalogshyamraj55

Plugin jQuery, Design Patterns

1. jQuery Plugin Design Patterns “Deep into JS” Meetup

2. Constructor Function

3. function Person() {}

4. function Person(name, surname) {! ! ! ! this.name = name;! ! ! ! this.surname = surname;! }

5. function Person(name, surname) {! ! ! ! this.name = name;! ! ! ! this.surname = surname;! ! ! ! this.getName = function() {! ! ! ! ! ! ! // privileged method: useful if you need private method, attributes! ! ! ! ! ! ! return this.name;! ! ! ! }! }

6. function Person(name, surname) {! ! ! ! this.name = name;! ! ! ! this.surname = surname;! }! Person.prototype.getName = function() {! ! ! ! ! return this.name;! }

7. var robb = new Person(‘Robert’, ‘Casanova’);! console.log(robb.getName());

8. Object.create()

9. var robb = {  ! ! name: ‘Robert’,  ! ! surname: ‘Casanova’,! ! ! getName: function() {  ! ! ! ! ! return this.name;  ! ! }! }

10. var gigi = Object.create(robb);! gigi.name = ‘Giorgio’;! gigi.surname = ‘Moroder’;! ! console.log(gigi.getName())

11. Plugin jQuery

12. $.fn[‘pluginName’] = function() {  this.each(function(){  $(this).doSomething();  });  } Simplest jQuery plugin ever

13. LightWeight Start Pattern

14. ;(function($, window,document, undeﬁned ){! //plugin goes here! })(jQuery, window, document) Immediately Invoked Function Expression (IIFE)

15. var pluginName = “mioPlugin”,! defaults = {  defaultProperty: ‘defaultValue’  } Defaults

16. function Plugin(el, options) {! ! this.el = el;! this.$el = $(el);! this.options = $.extend({},defaults, options);! ! ! ! this._defaults = defaults;! this._name = pluginName;! ! ! ! this.init();! } Constructor Function

17. Plugin.prototype.init = function() {! ! ! ! ! //the initial logic goes here! }! Plugin.prototype.someMethod = function() {! …! } Methods

18. $.fn[pluginName] = function(options) {! ! ! ! return this.each(function(){! ! ! ! ! ! if(!$.data(this, pluginName)) {! ! ! ! ! ! ! $.data(this, pluginName, new Plugin(this, options));! ! ! ! ! ! }! ! ! ! });! } Plugin Magic

19. $(‘#elem’).pluginName({! !! defaultProperty: ‘value’! }); Example

20. DOM-to-Object Bridge Pattern

21. var myObject = {! ! ! init: function (options,elem) {! ! ! ! ! …!! ! ! }! } Object

22. init: function (options,elem) {! ! ! this.options = $.extend({}, this.options,options);! ! ! this.el = elem;! this.$el = $(elem);! ! this._build();! ! return this;! } Init Function

23. options: {! ! defaultOption: ‘defaultValue’! } Default options

24. _build: function() {! ! this.$el.html(‘inizialize html here’);! },! publicMethod: function() {  this.$el.doSomething();  } Methods

25. $.plugin = function(name,object) {! ! ! $.fn[name] = function(options) {! ! ! ! ! return this.each(function(){  ! ! ! ! ! ! if(!$.data(this,name)) {  $.data(this,name, Object.create(myObject).init(options,this)) }  })! ! ! }! } ! $.plugin(“pluginName”, myObject ) Plugin Magic

26. $(‘#elem’).pluginName({! !! defaultProperty: ‘value’! });! ! var plugin = $(‘#elem’).data(‘pluginName’);! plugin.publicMethod(); Example

Plugin jQuery, Design Patterns

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to Plugin jQuery, Design Patterns (20)

Recently uploaded (20)

Plugin jQuery, Design Patterns