From 05ad2f8ae1554f09b87b6151c5a286edecaa3e4c Mon Sep 17 00:00:00 2001 From: intelligent electronic Services Date: Thu, 22 Jan 2015 18:09:30 +0100 Subject: [PATCH 1/5] Added style Manifesto for jQueryfied Modules Added a first example for the style Manifesto for jQueryfied Modules. --- README.md | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3e14d50..7e0aa31 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,37 @@ This project won't seek to provide implementations for every possible pattern, b compatible plugin modules which are compatible with a number of different script loaders. You may also be interested in the [UMD](https://github.com/umdjs) project. - +## Principles of Writing Consistent, Idiomatic JavaScript + +You may checkout this link (https://github.com/rwaldron/idiomatic.js) + +### Style Manifesto for jQueryfied Modules + +Just like in Idiomatic JavaScript Style Manifesto we will summarize some examples, how you can build up your JavaScript or better jQuery modules. + +1. Module/Constructor/Factory + +```javascript + + // Examples of a AMD and CommonJS compatible module with a prefaced factory + (function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // CommonJS + factory(require('jquery')); + } else { + // Browser globals + factory(jQuery); + } + }(function ($, window, document){ + + // write your module ... + + }(jQuery))); +``` + ## Further reading More information about the patterns in this repo can be found in [Learning JavaScript Design Patterns](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns). From e75aa4ca701d26680e45762bd73fc39d47b99f45 Mon Sep 17 00:00:00 2001 From: intelligent electronic Services Date: Thu, 22 Jan 2015 18:14:31 +0100 Subject: [PATCH 2/5] Extended style Manifesto for jQueryfied Modules Added the example 1.1. AMD compatible factory --- README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7e0aa31..c7aef87 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,18 @@ You may checkout this link (https://github.com/rwaldron/idiomatic.js) Just like in Idiomatic JavaScript Style Manifesto we will summarize some examples, how you can build up your JavaScript or better jQuery modules. -1. Module/Constructor/Factory +1. Module/Constructor/Factories + +1.1. AMD compatible factory + +```javascript + + // the usual definition how to define a RequireJs compatible module + define(["jquery", "jqueryui"], function ($) { + // your code here + }); + +1.2. A factory which can do AMD and CommonJS, but musn't ```javascript From a0129b3080b6bacf159c7c6deb4fb46432fc97d2 Mon Sep 17 00:00:00 2001 From: intelligent electronic Services Date: Thu, 22 Jan 2015 18:23:21 +0100 Subject: [PATCH 3/5] Extended style Manifesto for jQueryfied Modules Extended 1.1 and 1.2. --- README.md | 47 ++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 42 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c7aef87..329ac86 100644 --- a/README.md +++ b/README.md @@ -56,14 +56,35 @@ Just like in Idiomatic JavaScript Style Manifesto we will summarize some example 1.1. AMD compatible factory +If you use stricly jQuery loaded by RequireJS you can do this: + ```javascript // the usual definition how to define a RequireJs compatible module define(["jquery", "jqueryui"], function ($) { - // your code here + + $.fn.extend({ + + pluginName: function( options ) { + + this.defaultOptions = {}; + + var settings = $.extend({}, this.defaultOptions, options); + + return this.each(function() { + var $this = $(this); + }); + + } + + }); + }); +``` + +1.2. AMD and CommonJS compatible module factory -1.2. A factory which can do AMD and CommonJS, but musn't +But if you want to use your modules also in other projects, where RequireJS is not available, you can add this factory pattern to provide your module ```javascript @@ -79,10 +100,26 @@ Just like in Idiomatic JavaScript Style Manifesto we will summarize some example // Browser globals factory(jQuery); } - }(function ($, window, document){ - - // write your module ... + }(function ($, window, document){ + $.fn.extend({ + + pluginName: function( options ) { + + this.defaultOptions = {}; + + var settings = $.extend({}, this.defaultOptions, options); + + return this.each(function() { + var $this = $(this); + }); + + } + + }); + +}); + }(jQuery))); ``` From 9a91ca0444aeec1ae2c96a8a2434b2d0668b4d5f Mon Sep 17 00:00:00 2001 From: intelligent electronic Services Date: Thu, 22 Jan 2015 18:34:21 +0100 Subject: [PATCH 4/5] Extended style Manifesto for jQueryfied Modules Added the hint with the semi colon on the example of 1.2. --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 329ac86..4862109 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,9 @@ But if you want to use your modules also in other projects, where RequireJS is n ```javascript // Examples of a AMD and CommonJS compatible module with a prefaced factory - (function (factory) { + // Hint: The semi-colon before the function invocation is a safety net against + // concatenated scripts and/or other plugins that are not closed properly. + ;(function (factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); From e62ef233f67d3a66b2de8a08993906fb543e6244 Mon Sep 17 00:00:00 2001 From: intelligent electronic Services Date: Thu, 22 Jan 2015 19:54:32 +0100 Subject: [PATCH 5/5] Updated the documentation --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4862109..c350262 100644 --- a/README.md +++ b/README.md @@ -120,9 +120,9 @@ But if you want to use your modules also in other projects, where RequireJS is n }); -}); + }); - }(jQuery))); +}())); ``` ## Further reading