Skip to content

Commit 6949619

Browse files
riixriix
committed
jquery plugin pattern
1 parent bff021b commit 6949619

12 files changed

Lines changed: 461 additions & 737 deletions

‎jquery-plugin-patterns/amd-commonjs/pluginCore.js‎

Lines changed: 73 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Module/Plugin core
1+
// Module/Plugin core
22
// Note: the wrapper code you see around the module is what enables
33
// us to support multiple module formats and specifications by
44
// mapping the arguments defined to what a specific format expects
@@ -7,41 +7,76 @@
77
//
88
// Note that dependencies can just as easily be declared if required
99
// and should work as demonstrated earlier with the AMD module examples.
10-
11-
(function ( name, definition ){
12-
var theModule = definition(),
13-
// this is considered "safe":
14-
hasDefine = typeof define === 'function' && define.amd,
15-
// hasDefine = typeof define === 'function',
16-
hasExports = typeof module !== 'undefined' && module.exports;
17-
18-
if ( hasDefine ){ // AMD Module
19-
define(theModule);
20-
} else if ( hasExports ) { // Node.js Module
21-
module.exports = theModule;
22-
} else { // Assign to common namespaces or simply the global object (window)
23-
(this.jQuery || this.ender || this.$ || this)[name] = theModule;
24-
}
25-
})( 'core', function () {
26-
var module = this;
27-
module.plugins = [];
28-
module.highlightColor = "yellow";
29-
module.errorColor = "red";
30-
31-
// define the core module here and return the public API
32-
33-
// This is the highlight method used by the core highlightAll()
34-
// method and all of the plugins highlighting elements different
35-
// colors
36-
module.highlight = function(el,strColor){
37-
if(this.jQuery){
38-
jQuery(el).css('background', strColor);
10+
(function(name, definition) {
11+
var theModule = definition(), // this is considered "safe":
12+
hasDefine = typeof define === 'function' && define.amd, // hasDefine = typeof define === 'function',
13+
hasExports = typeof module !== 'undefined' && module.exports;
14+
if (hasDefine) { // AMD Module
15+
define(theModule);
16+
} else if (hasExports) { // Node.js Module
17+
module.exports = theModule;
18+
} else { // Assign to common namespaces or simply the global object (window)
19+
(this.jQuery || this.ender || this.$ || this)[name] = theModule;
20+
console.log((window.jQuery)[name]);
3921
}
40-
}
41-
return {
42-
highlightAll:function(){
43-
module.highlight('div', module.highlightColor);
44-
}
45-
};
46-
47-
});
22+
})('app', function() {
23+
24+
var core = this;
25+
26+
var defaults = { // default settings
27+
name: '123'
28+
};
29+
30+
var opts = {}; // extend options
31+
32+
var $document = $(document),
33+
$window = $(window),
34+
$html = $('html');
35+
36+
core.plugins = [];
37+
38+
var base = {
39+
eventnames: {
40+
scroll: 'myScroll',
41+
resize: 'myResize'
42+
},
43+
scrollTop: 0,
44+
highlightColor: 'yellow',
45+
errorColor: 'red'
46+
};
47+
48+
core.base = base; // set public base
49+
50+
// private
51+
var setHandler = function(){
52+
var _onScroll = function(){
53+
base.scrollTop = $document.scrollTop();
54+
$document.trigger(base.eventnames.scroll);
55+
};
56+
$document.on('scroll resize', _onScroll);
57+
};
58+
59+
// define the core base here and return the public API
60+
core.init = function(options) {
61+
opts = $.extend({}, defaults, options);
62+
console.log(opts);
63+
setHandler();
64+
};
65+
66+
// This is the highlight method used by the core highlightAll()
67+
// method and all of the plugins highlighting elements different
68+
// colors
69+
core.highlight = function(el, strColor) {
70+
$(el).css('background', strColor);
71+
};
72+
73+
return {
74+
init: function(options) {
75+
core.init(options);
76+
},
77+
highlight: function() {
78+
core.highlight(el, strColor);
79+
}
80+
};
81+
82+
});

‎jquery-plugin-patterns/amd-commonjs/pluginExtension.js‎

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1-
// Extension to module core
2-
3-
(function ( name, definition ) {
1+
// Extension to module core
2+
(function(name, definition) {
43
var theModule = definition(),
54
hasDefine = typeof define === 'function',
65
hasExports = typeof module !== 'undefined' && module.exports;
7-
8-
if ( hasDefine ) { // AMD Module
6+
if (hasDefine) { // AMD Module
97
define(theModule);
10-
} else if ( hasExports ) { // Node.js Module
8+
} else if (hasExports) { // Node.js Module
119
module.exports = theModule;
1210
} else { // Assign to common namespaces or simply the global object (window)
13-
1411
// account for for flat-file/global module extensions
1512
var obj = null;
1613
var namespaces = name.split(".");
@@ -24,21 +21,54 @@
2421
}
2522
obj = scope[packageName];
2623
}
27-
2824
}
29-
})('core.plugin', function () {
25+
})('app.inview', function() {
26+
27+
var base = this.base;
28+
29+
var $document = $(document),
30+
$window = $(window),
31+
$html = $('html');
32+
33+
var onLoad = function(){
34+
35+
};
36+
var onScroll = function(){
37+
console.log(base);
38+
};
39+
var onResize = function(){
40+
41+
};
42+
var init = function(){
43+
$document.on(base.eventnames.load, onLoad);
44+
$document.on(base.eventnames.scroll, onScroll);
45+
$document.on(base.eventnames.resize, onResize);
46+
};
47+
48+
init();
49+
50+
var test = function(){
51+
console.log('test');
52+
};
53+
54+
55+
56+
// console.log(base);
3057

3158
// Define your module here and return the public API.
3259
// This code could be easily adapted with the core to
3360
// allow for methods that overwrite and extend core functionality
3461
// in order to expand the highlight method to do more if you wish.
3562
return {
36-
setGreen: function ( el ) {
63+
test: function(){
64+
test();
65+
},
66+
setGreen: function(el) {
3767
highlight(el, 'green');
3868
},
39-
setRed: function ( el ) {
40-
highlight(el, errorColor);
69+
setRed: function(el) {
70+
highlight(el, base.errorColor);
4171
}
4272
};
4373

44-
});
74+
});

‎jquery-plugin-patterns/amd-commonjs/usage.html‎

Lines changed: 47 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,42 +5,60 @@
55
<meta charset="utf-8">
66
</head>
77
<body>
8-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
9-
<script src="pluginCore.js"></script>
10-
<script src="pluginExtension.js"></script>
118

12-
<script type="text/javascript">
9+
<div class="test">
10+
test
11+
</div>
12+
<div class="test" style="height: 120vh;">
13+
test
14+
</div>
1315

14-
$(function(){
16+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
17+
<script src="pluginCore.js"></script>
18+
<script src="pluginExtension.js"></script>
1519

16-
// Our plugin 'core' is exposed under a core namespace in
17-
// this example, which we first cache
18-
var core = $.core;
20+
<script type="text/javascript">
1921

20-
// Then use use some of the built-in core functionality to
21-
// highlight all divs in the page yellow
22-
core.highlightAll();
22+
$(function(){
2323

24-
// Access the plugins (extensions) loaded into the 'plugin'
25-
// namespace of our core module:
24+
// Our plugin 'core' is exposed under a core namespace in
25+
// this example, which we first cache
26+
var myApp = $.app;
2627

27-
// Set the first div in the page to have a green background.
28-
core.plugin.setGreen("div:first");
29-
// Here we're making use of the core's 'highlight' method
30-
// under the hood from a plugin loaded in after it
28+
// Then use use some of the built-in core functionality to
29+
// highlight all divs in the page yellow
30+
myApp.init({
31+
opt: 1
32+
});
33+
34+
// Access the plugins (extensions) loaded into the 'plugin'
35+
// namespace of our core module:
36+
37+
// Set the first div in the page to have a green background.
38+
myApp.inview.setGreen('div:first');
39+
// Here we're making use of the core's 'highlight' method
40+
// under the hood from a plugin loaded in after it
41+
42+
// Set the last div to the 'errorColor' property defined in
43+
// our core module/plugin. If you review the code further down,
44+
// you'll see how easy it is to consume properties and methods
45+
// between the core and other plugins
3146

32-
// Set the last div to the 'errorColor' property defined in
33-
// our core module/plugin. If you review the code further down,
34-
// you'll see how easy it is to consume properties and methods
35-
// between the core and other plugins
36-
core.plugin.setRed('div:last');
47+
48+
49+
var myApp2 = $.app;
50+
myApp2.init({
51+
opt: 2
3752
});
53+
myApp2.inview.setRed('div:last');
54+
myApp2.inview.test();
55+
});
56+
57+
</script>
3858

39-
</script>
40-
41-
<script>
42-
// References
43-
// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
44-
</script>
59+
<script>
60+
// References
61+
// http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
62+
</script>
4563
</body>
46-
</html>
64+
</html>

‎jquery-plugin-patterns/highly-configurable-mutable.custom.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
<!--[if (gte IE 6)&(lte IE 8)]> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <![endif]-->
7+
<!--[if (gt IE 8)|!(IE)]> <!--> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!--<![endif]-->
8+
<script>
9+
window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"><\/script>');
10+
</script>
11+
</head>
12+
<body>
13+
<div id="app" data-plugin-options='{ "foo": "123" }' style="min-height: 200vh;"></div>
14+
<script src="highly-configurable-mutable.custom.js"></script>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)