From 694961980f8b478e7c8b644e0e53fd262cd37da5 Mon Sep 17 00:00:00 2001 From: riix Date: Wed, 5 Jun 2019 19:01:18 +0900 Subject: [PATCH] jquery plugin pattern --- .../amd-commonjs/pluginCore.js | 111 ++++++++---- .../amd-commonjs/pluginExtension.js | 56 ++++-- .../amd-commonjs/usage.html | 76 +++++--- .../highly-configurable-mutable.custom.html | 16 ++ .../highly-configurable-mutable.custom.js | 169 ++++++++++++++++++ .../highly-configurable-mutable.html | 83 +-------- .../highly-configurable-mutable.js | 107 +++++++++++ .../jquery-mobile-ui-widget-factory.html | 130 -------------- .../ui-widget-factory-bridge.html | 110 ------------ .../ui-widget-factory-mobile.html | 113 ------------ jquery-plugin-patterns/ui-widget-factory.html | 108 ----------- .../ui-widget-requirejs-module.html | 119 ------------ 12 files changed, 461 insertions(+), 737 deletions(-) create mode 100644 jquery-plugin-patterns/highly-configurable-mutable.custom.html create mode 100644 jquery-plugin-patterns/highly-configurable-mutable.custom.js create mode 100644 jquery-plugin-patterns/highly-configurable-mutable.js delete mode 100644 jquery-plugin-patterns/jquery-mobile-ui-widget-factory.html delete mode 100644 jquery-plugin-patterns/ui-widget-factory-bridge.html delete mode 100644 jquery-plugin-patterns/ui-widget-factory-mobile.html delete mode 100644 jquery-plugin-patterns/ui-widget-factory.html delete mode 100644 jquery-plugin-patterns/ui-widget-requirejs-module.html diff --git a/jquery-plugin-patterns/amd-commonjs/pluginCore.js b/jquery-plugin-patterns/amd-commonjs/pluginCore.js index d4835a8..54ef44b 100644 --- a/jquery-plugin-patterns/amd-commonjs/pluginCore.js +++ b/jquery-plugin-patterns/amd-commonjs/pluginCore.js @@ -1,4 +1,4 @@ -// Module/Plugin core +// Module/Plugin core // Note: the wrapper code you see around the module is what enables // us to support multiple module formats and specifications by // mapping the arguments defined to what a specific format expects @@ -7,41 +7,76 @@ // // Note that dependencies can just as easily be declared if required // and should work as demonstrated earlier with the AMD module examples. - -(function ( name, definition ){ - var theModule = definition(), - // this is considered "safe": - hasDefine = typeof define === 'function' && define.amd, - // hasDefine = typeof define === 'function', - hasExports = typeof module !== 'undefined' && module.exports; - - if ( hasDefine ){ // AMD Module - define(theModule); - } else if ( hasExports ) { // Node.js Module - module.exports = theModule; - } else { // Assign to common namespaces or simply the global object (window) - (this.jQuery || this.ender || this.$ || this)[name] = theModule; - } -})( 'core', function () { - var module = this; - module.plugins = []; - module.highlightColor = "yellow"; - module.errorColor = "red"; - - // define the core module here and return the public API - - // This is the highlight method used by the core highlightAll() - // method and all of the plugins highlighting elements different - // colors - module.highlight = function(el,strColor){ - if(this.jQuery){ - jQuery(el).css('background', strColor); +(function(name, definition) { + var theModule = definition(), // this is considered "safe": + hasDefine = typeof define === 'function' && define.amd, // hasDefine = typeof define === 'function', + hasExports = typeof module !== 'undefined' && module.exports; + if (hasDefine) { // AMD Module + define(theModule); + } else if (hasExports) { // Node.js Module + module.exports = theModule; + } else { // Assign to common namespaces or simply the global object (window) + (this.jQuery || this.ender || this.$ || this)[name] = theModule; + console.log((window.jQuery)[name]); } - } - return { - highlightAll:function(){ - module.highlight('div', module.highlightColor); - } - }; - -}); \ No newline at end of file +})('app', function() { + + var core = this; + + var defaults = { // default settings + name: '123' + }; + + var opts = {}; // extend options + + var $document = $(document), + $window = $(window), + $html = $('html'); + + core.plugins = []; + + var base = { + eventnames: { + scroll: 'myScroll', + resize: 'myResize' + }, + scrollTop: 0, + highlightColor: 'yellow', + errorColor: 'red' + }; + + core.base = base; // set public base + + // private + var setHandler = function(){ + var _onScroll = function(){ + base.scrollTop = $document.scrollTop(); + $document.trigger(base.eventnames.scroll); + }; + $document.on('scroll resize', _onScroll); + }; + + // define the core base here and return the public API + core.init = function(options) { + opts = $.extend({}, defaults, options); + console.log(opts); + setHandler(); + }; + + // This is the highlight method used by the core highlightAll() + // method and all of the plugins highlighting elements different + // colors + core.highlight = function(el, strColor) { + $(el).css('background', strColor); + }; + + return { + init: function(options) { + core.init(options); + }, + highlight: function() { + core.highlight(el, strColor); + } + }; + +}); diff --git a/jquery-plugin-patterns/amd-commonjs/pluginExtension.js b/jquery-plugin-patterns/amd-commonjs/pluginExtension.js index 590e6b4..2c930c1 100644 --- a/jquery-plugin-patterns/amd-commonjs/pluginExtension.js +++ b/jquery-plugin-patterns/amd-commonjs/pluginExtension.js @@ -1,16 +1,13 @@ -// Extension to module core - -(function ( name, definition ) { +// Extension to module core +(function(name, definition) { var theModule = definition(), hasDefine = typeof define === 'function', hasExports = typeof module !== 'undefined' && module.exports; - - if ( hasDefine ) { // AMD Module + if (hasDefine) { // AMD Module define(theModule); - } else if ( hasExports ) { // Node.js Module + } else if (hasExports) { // Node.js Module module.exports = theModule; } else { // Assign to common namespaces or simply the global object (window) - // account for for flat-file/global module extensions var obj = null; var namespaces = name.split("."); @@ -24,21 +21,54 @@ } obj = scope[packageName]; } - } -})('core.plugin', function () { +})('app.inview', function() { + + var base = this.base; + + var $document = $(document), + $window = $(window), + $html = $('html'); + + var onLoad = function(){ + + }; + var onScroll = function(){ + console.log(base); + }; + var onResize = function(){ + + }; + var init = function(){ + $document.on(base.eventnames.load, onLoad); + $document.on(base.eventnames.scroll, onScroll); + $document.on(base.eventnames.resize, onResize); + }; + + init(); + + var test = function(){ + console.log('test'); + }; + + + + // console.log(base); // Define your module here and return the public API. // This code could be easily adapted with the core to // allow for methods that overwrite and extend core functionality // in order to expand the highlight method to do more if you wish. return { - setGreen: function ( el ) { + test: function(){ + test(); + }, + setGreen: function(el) { highlight(el, 'green'); }, - setRed: function ( el ) { - highlight(el, errorColor); + setRed: function(el) { + highlight(el, base.errorColor); } }; -}); \ No newline at end of file +}); diff --git a/jquery-plugin-patterns/amd-commonjs/usage.html b/jquery-plugin-patterns/amd-commonjs/usage.html index 92fd88d..e7b12e4 100644 --- a/jquery-plugin-patterns/amd-commonjs/usage.html +++ b/jquery-plugin-patterns/amd-commonjs/usage.html @@ -5,42 +5,60 @@ - - - - + + - // Our plugin 'core' is exposed under a core namespace in - // this example, which we first cache - var core = $.core; + - - - + - \ No newline at end of file + diff --git a/jquery-plugin-patterns/highly-configurable-mutable.custom.html b/jquery-plugin-patterns/highly-configurable-mutable.custom.html new file mode 100644 index 0000000..0a0d6ef --- /dev/null +++ b/jquery-plugin-patterns/highly-configurable-mutable.custom.html @@ -0,0 +1,16 @@ + + + +JavaScript Patterns + + + + + + +
+ + + diff --git a/jquery-plugin-patterns/highly-configurable-mutable.custom.js b/jquery-plugin-patterns/highly-configurable-mutable.custom.js new file mode 100644 index 0000000..532af15 --- /dev/null +++ b/jquery-plugin-patterns/highly-configurable-mutable.custom.js @@ -0,0 +1,169 @@ +/* + * 글로벌 함수 선언 + */ +;(function(global) { + + global.hyphenate = function(_value) { // camelCase to hypen pattern, hyphenate(key) + var cache = {}; + var replacer = function(_match) { + return '-' + _match[0].toLowerCase(); + }; + return cache[_value] || (cache[_value] = _value.replace(/([A-Z])/g, replacer)); + } + + global.round = function(n) { // 소숫점 4자리 + return Math.round(n * 10000) / 10000; + } + + global.random = function() { // 0~1000 난수 + return Math.floor(Math.random() * 1000) + } + + global.setUniqueId = function(_str) { // Unique Id 생성하기, 특수문자 제거 또는 난수 생성 + return (typeof _str == 'string') ? _str.toLowerCase().replace(/[^a-z0-9)]/gi, '') : Math.floor(Math.random() * 1000) + }; + + global.extend = function(_source, _props) { // object 병합 + var _key; + for (_key in _props) { + if (_props.hasOwnProperty(_key)) { + _source[_key] = _props[_key]; + } + } + return _source; + }; + +})(this); + +/* + * 'Highly configurable' mutable plugin boilerplate + * Author: @markdalgleish + * Further changes, comments: @addyosmani + * Licensed under the MIT license + */ + +// Note that with this pattern, as per Alex Sexton's, the plugin logic +// hasn't been nested in a jQuery plugin. Instead, we just use +// jQuery for its instantiation. + +;(function($, window, document, undefined) { + + 'use strict'; + + var root = (function(g) { // global 셋업 + return g; + })(this); + + var Plugin = function(element, options) { // plugin constructor 생성 + + var base = { // base 선언 + el: element, + $el: $(element), + appId: '', + scrollTop: 0 + }; + + base.appId = setUniqueId(base.$el.attr('id')) + random(); // set unit app id + + var $document = $(document), // dom 캐쉬 + $window = $(window), + $html = $('html'), + $body = $('body'), + __this = this; + + var metadata = base.$el.attr('data-plugin-options'); // option 에 취합하기 위한 metadata 생성, // + metadata = (metadata !== undefined) ? $.parseJSON(metadata) : {}; + + var defaults = { // default 셋팅 + onScroll: noop, + namespace: '.app' + }; + + var opts = {}; // option 셋업 + + var timer = { // 타이머 셋업 + scroll: null // 스크롤 타이머 + }; + + // common functions + + function noop() {}; // noop + + function callFunc(_func){ // call function + if (typeof _func !== 'function') return false; + _func.call(null, base); + }; + + var handler = { + scroll: function(){ + var onScroll = function () { + base.scrollTop = $window.scrollTop(); + callFunc(opts.onScroll); + }; + if (timer.scroll !== null) { // 타이머 해제 + clearTimeout(timer.scroll); + timer.scroll = null; + } + timer.scroll = setTimeout(onScroll, 10); + }, + init: function(){ + $document.on('scroll' + opts.namespace, this.scroll); // set handler + }, + destroy: function(){ + $document.off('scroll' + opts.namespace, this.scroll); // set handler + } + }; + + function refresh() { // refresh + console.log('refresh'); + }; + + function init() { + opts = $.extend({}, defaults, options, metadata); // option 셋업 + handler.init(); // 핸들러 등록 + }; + + init(); + + return { + init: init, + refresh: refresh + } + + }; + + $.fn.plugin = function(options) { // jquery 플러그인 생성 + return this.each(function() { + new Plugin(this, options); + }); + }; + + window.Plugin = Plugin; // set global func + +})(jQuery, window, document); + + +$(function() { + + $('#app').plugin({ + message: 'Goodbye World! 111', + onScroll: function(base) { + console.log(base); + base.$el.append($('
' + base.scrollTop + '
')); + } + }); + + var myApp = new Plugin(document.getElementById('app'), { + message: 'Goodbye World! 222' + }); + + var myApp2 = new Plugin(document.getElementById('app'), { + message: 'Goodbye World! 333' + }).refresh(); + +}); +// References +/* +Creating Highly Configurable jQuery Plugins (by Mark Dalgleish) - http://goo.gl/1VwfP http://goo.gl/bg63 +Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge +*/ diff --git a/jquery-plugin-patterns/highly-configurable-mutable.html b/jquery-plugin-patterns/highly-configurable-mutable.html index 8e15cb0..b39238f 100644 --- a/jquery-plugin-patterns/highly-configurable-mutable.html +++ b/jquery-plugin-patterns/highly-configurable-mutable.html @@ -4,83 +4,12 @@ JavaScript Patterns - + + + + - \ No newline at end of file + diff --git a/jquery-plugin-patterns/highly-configurable-mutable.js b/jquery-plugin-patterns/highly-configurable-mutable.js new file mode 100644 index 0000000..62c6960 --- /dev/null +++ b/jquery-plugin-patterns/highly-configurable-mutable.js @@ -0,0 +1,107 @@ +/* + * 'Highly configurable' mutable plugin boilerplate + * Author: @markdalgleish + * Further changes, comments: @addyosmani + * Licensed under the MIT license + */ + +// Note that with this pattern, as per Alex Sexton's, the plugin logic +// hasn't been nested in a jQuery plugin. Instead, we just use +// jQuery for its instantiation. + +;(function($, window, document, undefined) { + + 'use strict'; + + var Plugin = function(elem, options) { // our plugin constructor + + var base = this; + + base.elem = elem; + base.$elem = $(elem); + base.options = options; + + // This next line takes advantage of HTML5 data attributes + // to support customization of the plugin on a per-element + // basis. For example, + //
+ + base.metadata = base.$elem.attr('data-plugin-options'); // metadata + + }; + + // the plugin prototype + Plugin.prototype = { + + defaults: { + message: 'Hello world!' + }, + + build: function() { + // eg. show the currently configured message + console.log(this.config.message); + }, + + init: function() { + + var metadata = $.parseJSON(this.metadata); + + + // console.info(JSON.parse(this.metadata)); + + // Introduce defaults that can be extended either + // globally or using an object literal. + this.config = $.extend({}, this.defaults, this.options, metadata); + + console.log(this.config); + + // Sample usage: + // Set the message per instance: + // $('#elem').plugin({ message: 'Goodbye World!'}); + + // or + + // var p = new Plugin(document.getElementById('elem'), + // { message: 'Goodbye World!'}).init() + // or, set the global default message: + // Plugin.defaults.message = 'Goodbye World!' + + this.build(); + + return this; + } + } + + Plugin.defaults = Plugin.prototype.defaults; + + $.fn.plugin = function(options) { + return this.each(function() { + new Plugin(this, options).init(); + }); + }; + + window.Plugin = Plugin; // set global func + +})(jQuery, window, document); + + +$(function(){ + + $('#app').plugin({ + message: 'Goodbye World! 111' + }); + + var myApp = new Plugin(document.getElementById('app'), { + message: 'Goodbye World! 222' + }).init(); + + var myApp2 = new Plugin(document.getElementById('app'), { + message: 'Goodbye World! 333' + }).init(); + +}); +// References +/* +Creating Highly Configurable jQuery Plugins (by Mark Dalgleish) - http://goo.gl/1VwfP http://goo.gl/bg63 +Essential jQuery Plugin Patterns (by Addy Osmani) - http://goo.gl/oE0ge +*/ diff --git a/jquery-plugin-patterns/jquery-mobile-ui-widget-factory.html b/jquery-plugin-patterns/jquery-mobile-ui-widget-factory.html deleted file mode 100644 index 20995a7..0000000 --- a/jquery-plugin-patterns/jquery-mobile-ui-widget-factory.html +++ /dev/null @@ -1,130 +0,0 @@ - - - - JavaScript Patterns - - - - - - \ No newline at end of file diff --git a/jquery-plugin-patterns/ui-widget-factory-bridge.html b/jquery-plugin-patterns/ui-widget-factory-bridge.html deleted file mode 100644 index 7f1e862..0000000 --- a/jquery-plugin-patterns/ui-widget-factory-bridge.html +++ /dev/null @@ -1,110 +0,0 @@ - - - - JavaScript Patterns - - - - - - - \ No newline at end of file diff --git a/jquery-plugin-patterns/ui-widget-factory-mobile.html b/jquery-plugin-patterns/ui-widget-factory-mobile.html deleted file mode 100644 index 6b08ebd..0000000 --- a/jquery-plugin-patterns/ui-widget-factory-mobile.html +++ /dev/null @@ -1,113 +0,0 @@ - - - - JavaScript Patterns - - - - - - \ No newline at end of file diff --git a/jquery-plugin-patterns/ui-widget-factory.html b/jquery-plugin-patterns/ui-widget-factory.html deleted file mode 100644 index 24ec815..0000000 --- a/jquery-plugin-patterns/ui-widget-factory.html +++ /dev/null @@ -1,108 +0,0 @@ - - - - JavaScript Patterns - - - - - - - \ No newline at end of file diff --git a/jquery-plugin-patterns/ui-widget-requirejs-module.html b/jquery-plugin-patterns/ui-widget-requirejs-module.html deleted file mode 100644 index 59b39dc..0000000 --- a/jquery-plugin-patterns/ui-widget-requirejs-module.html +++ /dev/null @@ -1,119 +0,0 @@ - - - - JavaScript Patterns - - - - - - \ No newline at end of file