Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extended the documentation with a style manifesto #41

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,87 @@ 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/Factories

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 ($) {

$.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

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

// Examples of a AMD and CommonJS compatible module with a prefaced 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);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($, window, document){

$.fn.extend({

pluginName: function( options ) {

this.defaultOptions = {};

var settings = $.extend({}, this.defaultOptions, options);

return this.each(function() {
var $this = $(this);
});

}

});

});

}()));
```

## 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).
Expand Down