jquery plugin

- 요 몇일 성과없는 개발이라고 해야 되나..

- 나름 공부도 했지만, 명확히 이것이 무엇이다 라고 할 수준까지는 못한 것 같다.

- 일정의 압박과 함께...

- 그래도 jquery plugin 쪽에 제일 기본이라고 되는 부분에 대해서는 나름대로 명확한 기준이 생긴것 같다.

 

- page tab 및 modal alert / confirm 창을 custom tag 나 jquery plugin 으로 개발을 하는 방법을 찾다가..

- plugin 쪽은 문외한이라.. 공부하다보니, 

- 제일 기본적인 개념 및 문법이라고 보이는 사이트(https://www.ostraining.com/blog/coding/custom-jquery-plugin/)라고 판단된다.

 

- https://www.ostraining.com/blog/coding/custom-jquery-plugin/

How to Create a Custom jQuery Plugin

 

- hello 라는 이름을 가진 plugin 생성

; // plugin 의 앞의 종결문자 없을 경우를 대비해서 작성
(function ( $ ) { // 영역지정 
 
    $.fn.hello = function( options ) { // hello 라는 plugin 이름
 
        // Default options
        var settings = $.extend({
            name: 'John Doe'
            , color: 'orange'
        }, options );
 
        // Apply options
        // this 는 호출하는 태그이다. ( 아래 <div id='here'> )
        // div tag 에 name 을 붙이고, 색상을 설정한다.
        return this.append('Hello ' + settings.name + '!').css({ color: settings.color });

    };
 
}( jQuery ));

 

- plugin 호출

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/jquery-hello.js"></script>
<script>
$( document ).ready(function() {
    $( '#here' ).hello({
    	name: 'Valentin Garcia'
        , color: 'green'
    });
});
</script>

<div id="here"></div>

 

- plugin 확장(?)

- 스크립트 패턴이라고 해야할까?  jquery module 패턴이라고 해야 할까?

- 검색결과 모듈 패턴은 계속 만들어지고 있으며, 아래 소스는 현재 가장 많이 사용한다는 패턴으로 파악된다.

;(function( $, window, document, undefined ){
	let pluginName = "pageTabs";
    let defaultOption = {}    
    function Plugin( element , options ){
    	this.element = element;
        this.settings = $.extend( {} , defaultOption , options );
        this.init();
    }
    
    $.extend( Plugin.prototype , {
    	init : function(){}
    });
    
    $.fn[pluginName] = function(options){
    	return this.each(function(){
        	if( !$.data( this, "Plugin_" + pluginName)){
            	$.data( this , "Plugin_" + pluginName , new Plugin( this, options));
			}
		});
    };
}( jQuery, window, document ));