StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
6272580
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
13
CommunityOwnedDate
CreationDate
2011-06-07T23:03:22.860
FavoriteCount
0
LastActivityDate
2012-01-18T19:23:41.937
LastEditDate
2012-01-18T19:23:41.937
LastEditorUserId
419970
OwnerUserId
419970
ParentId
5980194
PostTypeId
2
Score
26
ViewCount
0
LastEditorDisplayName
text
Body
[Edit] 7 months later Quoting from the github project <blockquote> jQuery is no good, and jQuery plugins is not how do modular code. </blockquote> Seriously "jQuery plugins" are not a sound architecture strategy. Writing code with a hard dependency on jQuery is also silly. [Original] Since I gave critique about this template I will propose an alternative. To make live easier this relies on <code>jQuery</code> 1.6+ and ES5 (use the <a href="https://github.com/Raynos/jQuery-plugin-scaffolding" rel="noreferrer">ES5 Shim</a>). I've spend some time re-designing the plugin template you've given and rolled out my own. Links: <ul> <li><a href="https://github.com/Raynos/jQuery-plugin-scaffolding" rel="noreferrer">Github</a></li> <li><a href="http://raynos.github.com/jQuery-plugin-scaffolding/" rel="noreferrer">Documentation</a></li> <li><a href="http://raynos.github.com/jQuery-plugin-scaffolding/tests/test.html" rel="noreferrer">Unit tests</a> Confirmed to pass in FF4, Chrome and IE9 (IE8 & OP11 dies. known <a href="https://github.com/kriskowal/es5-shim/pull/20" rel="noreferrer">bug</a>).</li> <li><a href="http://raynos.github.com/jQuery-plugin-scaffolding/docs/jQuery-plugin-scaffold.html" rel="noreferrer">Annotated Source Code</a></li> <li><a href="http://jsfiddle.net/e2aYH/11/" rel="noreferrer">The PlaceKitten example plugin</a></li> </ul> Comparison: I've refactored the template so that it's split into boilerplate (85%) and scaffolding code (15%). The intention is that you only have to edit the scaffolding code and you can keep leave boilerplate code untouched. To achieve this I've used <ul> <li>inheritance <a href="https://github.com/Raynos/jQuery-plugin-scaffolding/blob/master/lib/jQuery-plugin-scaffold.js#L210" rel="noreferrer"><code>var self = Object.create(Base)</code></a> Rather then editing the <code>Internal</code> class you have directly you should be editing a sub class. All your template / default functionality should be in a base class (called <code>Base</code> in my code).</li> <li>convention <a href="https://github.com/Raynos/jQuery-plugin-scaffolding/blob/master/lib/jQuery-plugin-scaffold.js#L222" rel="noreferrer"><code>self[PLUGIN_NAME] = main;</code></a> By convention the plugin defined on jQuery will call the method define on <code>self[PLUGIN_NAME]</code> by default. This is considered the <code>main</code> plugin method and has a seperate external method for clarity. </li> <li>monkey patching <a href="https://github.com/Raynos/jQuery-plugin-scaffolding/blob/master/lib/jQuery-plugin-scaffold.js#L20" rel="noreferrer"><code>$.fn.bind = function _bind ...</code></a> Use of monkey patching means that the event namespacing is done automatically for you under the hood. This functionality is free and does not come at the cost of readability (calling <code>getEventNS</code> all the time).</li> </ul> OO Techniques It's better to stick to proper JavaScript OO rather then classical OO emulation. To achieve this you should use <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create" rel="noreferrer"><code>Object.create</code></a>. (which ES5 just use the shim to upgrade old browsers). <pre><code>var Base = (function _Base() { var self = Object.create({}); /* ... */ return self; })(); var Wrap = (function _Wrap() { var self = Object.create(Base); /* ... */ return self; })(); var w = Object.create(Wrap); </code></pre> This is different from the standard <code>new</code> and <code>.prototype</code> based OO people are used to. This approach is preferred because it re-inforces the concept that there are only Objects in JavaScript and it's a prototypical OO approach. [<code>getEventNs</code>] As mentioned this method has been refactored away by overriding <code>.bind</code> and <code>.unbind</code> to automatically inject namespaces. These methods are overwritten on the private version of jQuery <a href="https://github.com/Raynos/jQuery-plugin-scaffolding/blob/master/lib/jQuery-plugin-scaffold.js#L229" rel="noreferrer"><code>$.sub()</code></a>. The overwritten methods behave the same way as your namespacing does. It namespaces events uniquely based on plugin and instance of a plugin wrapper around a HTMLElement (Using <a href="https://github.com/Raynos/jQuery-plugin-scaffolding/blob/master/lib/jQuery-plugin-scaffold.js#L23" rel="noreferrer"><code>.ns</code></a>. [<code>getData</code>] This method has been replaced with a <a href="https://github.com/Raynos/jQuery-plugin-scaffolding/blob/master/lib/jQuery-plugin-scaffold.js#L105" rel="noreferrer"><code>.data</code></a> method that has the same API as <code>jQuery.fn.data</code>. The fact that it's the same API makes it easier to use, its basically a thin wrapper around <code>jQuery.fn.data</code> with namespacing. This allows you to set key/value pair data that is immediatley stored for that plugin only. Multiple plugins can use this method in parallel without any conflicts. [<code>publicMethods</code>] The publicMethods object has been replaced by any method being defined on <code>Wrap</code> being automatically public. You can call any method on a Wrapped object directly but you do not actually have access to the wrapped object. [<code>$.fn[PLUGIN_NAME]</code>] This has been refactored so it exposes a more standardized API. This api is <pre><code>$(selector).PLUGIN_NAME("methodName", {/* object hash */}); // OR $(selector).PLUGIN_NAME({/* object hash */}); // methodName defaults to PLUGIN_NAME </code></pre> the elements in the selector are automatically wrapped in the <code>Wrap</code> object, the method is called or each selected element from the selector and the return value is always a <a href="http://api.jquery.com/category/deferred-object/" rel="noreferrer"><code>$.Deferred</code></a> element. This standardizes the API and the return type. You can then call <code>.then</code> on the returned deferred to get out the actual data you care about. The use of deferred here is very powerful for abstraction away whether the plugin is synchronous or asynchronous. <a href="https://github.com/Raynos/jQuery-plugin-scaffolding/blob/master/lib/jQuery-plugin-scaffold.js#L55" rel="noreferrer"><code>_create</code></a> A caching create function has been added. This is called to turn a <code>HTMLElement</code> into a Wrapped element and each HTMLElement will only be wrapped once. This caching gives you a solid reduction in memory. <a href="https://github.com/Raynos/jQuery-plugin-scaffolding/blob/master/lib/jQuery-plugin-scaffold.js#L127" rel="noreferrer"><code>$.PLUGIN_NAME</code></a> Added another public method for the plugin (A total of two!). <pre><code>$.PLUGIN_NAME(elem, "methodName", {/* options */}); $.PLUGIN_NAME([elem, elem2, ...], "methodName", {/* options */}); $.PLUGIN_NAME("methodName", { elem: elem, /* [elem, elem2, ...] */ cb: function() { /* success callback */ } /* further options */ }); </code></pre> All parameters are optional. <code>elem</code> defaults to <code><body></code>, <code>"methodName"</code> defaults to <code>"PLUGIN_NAME"</code> and <code>{/* options */}</code> defaults to <code>{}</code>. This API is very flexible (with 14 method overloads!) and standard enough to get used to the syntnax for every method your plugin will expose. <a href="https://github.com/Raynos/jQuery-plugin-scaffolding/blob/master/lib/jQuery-plugin-scaffold.js#L157" rel="noreferrer">Public exposure</a> The <code>Wrap</code>, <code>create</code> and <code>$</code> objects are exposed globally. This will allow advanced plugin users maximum flexibility with your plugin. They can use <code>create</code> and the modified subbed <code>$</code> in their development and they can also monkey patch <code>Wrap</code>. This allows for i.e. hooking into your plugin methods. All three of these are marked with a <code>_</code> in front of their name so they are internal and using them breaks the garantuee that your plugin works. The internal <code>defaults</code> object is also exposed as <code>$.PLUGIN_NAME.global</code>. This allows users to override your defaults and set plugin global <code>defaults</code>. In this plugin setup all hashes past into methods as objects are merged with the defaults, so this allows users to set global defaults for all your methods. <a href="http://raynos.github.com/jQuery-plugin-scaffolding/" rel="noreferrer">Actual Code</a> <pre><code>(function($, jQuery, window, document, undefined) { var PLUGIN_NAME = "Identity"; // default options hash. var defaults = { // TODO: Add defaults }; // ------------------------------- // -------- BOILERPLATE ---------- // ------------------------------- var toString = Object.prototype.toString, // uid for elements uuid = 0, Wrap, Base, create, main; (function _boilerplate() { // over-ride bind so it uses a namespace by default // namespace is PLUGIN_NAME_<uid> $.fn.bind = function _bind(type, data, fn, nsKey) { if (typeof type === "object") { for (var key in type) { nsKey = key + this.data(PLUGIN_NAME)._ns; this.bind(nsKey, data, type[key], fn); } return this; } nsKey = type + this.data(PLUGIN_NAME)._ns; return jQuery.fn.bind.call(this, nsKey, data, fn); }; // override unbind so it uses a namespace by default. // add new override. .unbind() with 0 arguments unbinds all methods // for that element for this plugin. i.e. calls .unbind(_ns) $.fn.unbind = function _unbind(type, fn, nsKey) { // Handle object literals if ( typeof type === "object" && !type.preventDefault ) { for ( var key in type ) { nsKey = key + this.data(PLUGIN_NAME)._ns; this.unbind(nsKey, type[key]); } } else if (arguments.length === 0) { return jQuery.fn.unbind.call(this, this.data(PLUGIN_NAME)._ns); } else { nsKey = type + this.data(PLUGIN_NAME)._ns; return jQuery.fn.unbind.call(this, nsKey, fn); } return this; }; // Creates a new Wrapped element. This is cached. One wrapped element // per HTMLElement. Uses data-PLUGIN_NAME-cache as key and // creates one if not exists. create = (function _cache_create() { function _factory(elem) { return Object.create(Wrap, { "elem": {value: elem}, "$elem": {value: $(elem)}, "uid": {value: ++uuid} }); } var uid = 0; var cache = {}; return function _cache(elem) { var key = ""; for (var k in cache) { if (cache[k].elem == elem) { key = k; break; } } if (key === "") { cache[PLUGIN_NAME + "_" + ++uid] = _factory(elem); key = PLUGIN_NAME + "_" + uid; } return cache[key]._init(); }; }()); // Base object which every Wrap inherits from Base = (function _Base() { var self = Object.create({}); // destroy method. unbinds, removes data self.destroy = function _destroy() { if (this._alive) { this.$elem.unbind(); this.$elem.removeData(PLUGIN_NAME); this._alive = false; } }; // initializes the namespace and stores it on the elem. self._init = function _init() { if (!this._alive) { this._ns = "." + PLUGIN_NAME + "_" + this.uid; this.data("_ns", this._ns); this._alive = true; } return this; }; // returns data thats stored on the elem under the plugin. self.data = function _data(name, value) { var $elem = this.$elem, data; if (name === undefined) { return $elem.data(PLUGIN_NAME); } else if (typeof name === "object") { data = $elem.data(PLUGIN_NAME) || {}; for (var k in name) { data[k] = name[k]; } $elem.data(PLUGIN_NAME, data); } else if (arguments.length === 1) { return ($elem.data(PLUGIN_NAME) || {})[name]; } else { data = $elem.data(PLUGIN_NAME) || {}; data[name] = value; $elem.data(PLUGIN_NAME, data); } }; return self; })(); // Call methods directly. $.PLUGIN_NAME(elem, "method", option_hash) var methods = jQuery[PLUGIN_NAME] = function _methods(elem, op, hash) { if (typeof elem === "string") { hash = op || {}; op = elem; elem = hash.elem; } else if ((elem && elem.nodeType) || Array.isArray(elem)) { if (typeof op !== "string") { hash = op; op = null; } } else { hash = elem || {}; elem = hash.elem; } hash = hash || {} op = op || PLUGIN_NAME; elem = elem || document.body; if (Array.isArray(elem)) { var defs = elem.map(function(val) { return create(val)[op](hash); }); } else { var defs = [create(elem)[op](hash)]; } return $.when.apply($, defs).then(hash.cb); }; // expose publicly. Object.defineProperties(methods, { "_Wrap": { "get": function() { return Wrap; }, "set": function(v) { Wrap = v; } }, "_create":{ value: create }, "_$": { value: $ }, "global": { "get": function() { return defaults; }, "set": function(v) { defaults = v; } } }); // main plugin. $(selector).PLUGIN_NAME("method", option_hash) jQuery.fn[PLUGIN_NAME] = function _main(op, hash) { if (typeof op === "object" || !op) { hash = op; op = null; } op = op || PLUGIN_NAME; hash = hash || {}; // map the elements to deferreds. var defs = this.map(function _map() { return create(this)[op](hash); }).toArray(); // call the cb when were done and return the deffered. return $.when.apply($, defs).then(hash.cb); }; }()); // ------------------------------- // --------- YOUR CODE ----------- // ------------------------------- main = function _main(options) { this.options = options = $.extend(true, defaults, options); var def = $.Deferred(); // Identity returns this & the $elem. // TODO: Replace with custom logic def.resolve([this, this.elem]); return def; } Wrap = (function() { var self = Object.create(Base); var $destroy = self.destroy; self.destroy = function _destroy() { delete this.options; // custom destruction logic // remove elements and other events / data not stored on .$elem $destroy.apply(this, arguments); }; // set the main PLUGIN_NAME method to be main. self[PLUGIN_NAME] = main; // TODO: Add custom logic for public methods return self; }()); })(jQuery.sub(), jQuery, this, document); </code></pre> As can be seen the code your supposed to edit is below the <code>YOUR CODE</code> line. The <code>Wrap</code> object acts similarly to your <code>Internal</code> object. The function <code>main</code> is the main function called with <code>$.PLUGIN_NAME()</code> or <code>$(selector).PLUGIN_NAME()</code> and should contain your main logic.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POjQuery plugin template - best practice, convention, performance and memory impact
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USRaynos
UserOwnerUserId
1. USRaynos
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POjQuery plugin template - best practice, convention, performance and memory impact
 singulars
 PostTypePostTypeId
 PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.