Skip to content

Commit 7f3d3d3

Browse files
chuanxshichuanxshi
committed
added jquery plugin patterns
1 parent 7a0a507 commit 7f3d3d3

3 files changed

Lines changed: 252 additions & 0 deletions

File tree

‎jquery-plugin-patterns/lightweight.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/*!
10+
* jQuery lightweight plugin boilerplate
11+
* Original author: @ajpiano
12+
* Further changes, comments: @addyosmani
13+
* Licensed under the MIT license
14+
*/
15+
16+
// the semi-colon before the function invocation is a safety
17+
// net against concatenated scripts and/or other plugins
18+
// that are not closed properly.
19+
;(function ( $, window, document, undefined ) {
20+
21+
// undefined is used here as the undefined global
22+
// variable in ECMAScript 3 and is mutable (i.e. it can
23+
// be changed by someone else). undefined isn't really
24+
// being passed in so we can ensure that its value is
25+
// truly undefined. In ES5, undefined can no longer be
26+
// modified.
27+
28+
// window and document are passed through as local
29+
// variables rather than as globals, because this (slightly)
30+
// quickens the resolution process and can be more
31+
// efficiently minified (especially when both are
32+
// regularly referenced in your plugin).
33+
34+
// Create the defaults once
35+
var pluginName = 'defaultPluginName',
36+
defaults = {
37+
propertyName: "value"
38+
};
39+
40+
// The actual plugin constructor
41+
function Plugin( element, options ) {
42+
this.element = element;
43+
44+
// jQuery has an extend method that merges the
45+
// contents of two or more objects, storing the
46+
// result in the first object. The first object
47+
// is generally empty because we don't want to alter
48+
// the default options for future instances of the plugin
49+
this.options = $.extend( {}, defaults, options) ;
50+
51+
this._defaults = defaults;
52+
this._name = pluginName;
53+
54+
this.init();
55+
}
56+
57+
Plugin.prototype.init = function () {
58+
// Place initialization logic here
59+
// You already have access to the DOM element and
60+
// the options via the instance, e.g. this.element
61+
// and this.options
62+
};
63+
64+
// A really lightweight plugin wrapper around the constructor,
65+
// preventing against multiple instantiations
66+
$.fn[pluginName] = function ( options ) {
67+
return this.each(function () {
68+
if (!$.data(this, 'plugin_' + pluginName)) {
69+
$.data(this, 'plugin_' + pluginName,
70+
new Plugin( this, options ));
71+
}
72+
});
73+
}
74+
75+
})( jQuery, window, document );
76+
77+
78+
// References
79+
// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
80+
</script>
81+
</body>
82+
</html>

‎jquery-plugin-patterns/namespaced-starter.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/*!
10+
* jQuery namespaced 'Starter' plugin boilerplate
11+
* Author: @dougneiner
12+
* Further changes: @addyosmani
13+
* Licensed under the MIT license
14+
*/
15+
16+
;(function ( $ ) {
17+
if (!$.myNamespace) {
18+
$.myNamespace = {};
19+
};
20+
21+
$.myNamespace.myPluginName = function ( el, myFunctionParam, options ) {
22+
// To avoid scope issues, use 'base' instead of 'this'
23+
// to reference this class from internal events and functions.
24+
var base = this;
25+
26+
// Access to jQuery and DOM versions of element
27+
base.$el = $(el);
28+
base.el = el;
29+
30+
// Add a reverse reference to the DOM object
31+
base.$el.data( "myNamespace.myPluginName" , base );
32+
33+
base.init = function () {
34+
base.myFunctionParam = myFunctionParam;
35+
36+
base.options = $.extend({},
37+
$.myNamespace.myPluginName.defaultOptions, options);
38+
39+
// Put your initialization code here
40+
};
41+
42+
// Sample Function, Uncomment to use
43+
// base.functionName = function( paramaters ){
44+
//
45+
// };
46+
// Run initializer
47+
base.init();
48+
};
49+
50+
$.myNamespace.myPluginName.defaultOptions = {
51+
myDefaultValue: ""
52+
};
53+
54+
$.fn.mynamespace_myPluginName = function
55+
( myFunctionParam, options ) {
56+
return this.each(function () {
57+
(new $.myNamespace.myPluginName(this,
58+
myFunctionParam, options));
59+
});
60+
};
61+
62+
})( jQuery );
63+
64+
65+
// References
66+
// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
67+
</script>
68+
</body>
69+
</html>

‎jquery-plugin-patterns/ui-widget-factory.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/*!
10+
* jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
11+
* Author: @addyosmani
12+
* Further changes: @peolanha
13+
* Licensed under the MIT license
14+
*/
15+
16+
;(function ( $, window, document, undefined ) {
17+
18+
// define your widget under a namespace of your choice
19+
// with additional parameters e.g.
20+
// $.widget( "namespace.widgetname", (optional) - an
21+
// existing widget prototype to inherit from, an object
22+
// literal to become the widget's prototype );
23+
24+
$.widget( "namespace.widgetname" , {
25+
26+
//Options to be used as defaults
27+
options: {
28+
someValue: null
29+
},
30+
31+
//Setup widget (eg. element creation, apply theming
32+
// , bind events etc.)
33+
_create: function () {
34+
35+
// _create will automatically run the first time
36+
// this widget is called. Put the initial widget
37+
// setup code here, then you can access the element
38+
// on which the widget was called via this.element.
39+
// The options defined above can be accessed
40+
// via this.options this.element.addStuff();
41+
},
42+
43+
// Destroy an instantiated plugin and clean up
44+
// modifications the widget has made to the DOM
45+
destroy: function () {
46+
47+
// this.element.removeStuff();
48+
// For UI 1.8, destroy must be invoked from the
49+
// base widget
50+
$.Widget.prototype.destroy.call(this);
51+
// For UI 1.9, define _destroy instead and don't
52+
// worry about
53+
// calling the base widget
54+
},
55+
56+
methodB: function ( event ) {
57+
//_trigger dispatches callbacks the plugin user
58+
// can subscribe to
59+
// signature: _trigger( "callbackName" , [eventObject],
60+
// [uiObject] )
61+
// eg. this._trigger( "hover", e /*where e.type ==
62+
// "mouseenter"*/, { hovered: $(e.target)});
63+
this._trigger('methodA', event, {
64+
key: value
65+
});
66+
},
67+
68+
methodA: function ( event ) {
69+
this._trigger('dataChanged', event, {
70+
key: value
71+
});
72+
},
73+
74+
// Respond to any changes the user makes to the
75+
// option method
76+
_setOption: function ( key, value ) {
77+
switch (key) {
78+
case "someValue":
79+
//this.options.someValue = doSomethingWith( value );
80+
break;
81+
default:
82+
//this.options[ key ] = value;
83+
break;
84+
}
85+
86+
// For UI 1.8, _setOption must be manually invoked
87+
// from the base widget
88+
$.Widget.prototype._setOption.apply( this, arguments );
89+
// For UI 1.9 the _super method can be used instead
90+
// this._super( "_setOption", key, value );
91+
}
92+
});
93+
94+
})( jQuery, window, document );
95+
96+
97+
// References
98+
// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
99+
</script>
100+
</body>
101+
</html>

0 commit comments

Comments
 (0)