jquery plugin

1. plugin 개발 시 지켜야 할 사항
   1. 다른 라이브러리에서 $를 사용할 수 있기 대문에 $ 대신 jQuery를 사용
   2. 만약 $를 사용하고 싶다면 아래와 같이 plugin 정의

 

1.  
   1.  

      ex)

         (function($){

                  // defined plugin

                  $.fn.plugin_name = function(param){

                     // Our plugin implementation code goes here.

                  };

         })(jQuery);

   1.3 plugin 이름을 겹치지 않는 이름으로 정한다.

   1.4 파일명은 반드시 jquery.[plugin_name].js로 하도록 한다.

   1.5 한가지 기능에 하나의 이름으로 plugin을 개발한다.

   1.6 옵션을 받아서 plugin을 컨트롤 할 수 있도록 한다.

      ex)

           // defined plugin 

           $.fn.plugin_name = function(option){

              var defaultOption = {

                 width: 150,

                 height: 20

              };

              // 빈 객체를 defaultOption 객체로 확장하고 이를 다시 options 객체와 확장한다.

              var opts = $.extend({}, $.fn.plugin_name.defaultOption, options);

              // Our plugin implementation code goes here.

           };

   1.7 method의 호출 결과로 반드시 특정 object나 value를 반환해 주는 것이 아니라면 

        jQuery에 chinability를 유지한다. (연속적으로 호출 가능한 형태)

        ex)

           // defined plugin 

           $.fn.plugin_name = function(option){

              var defaultOption = {

                 width: 150,

                 height: 20

              };

              // 빈 객체를 defaultOption 객체로 확장하고 이를 다시 options 객체와 확장한다.

              var opts = $.extend({}, $.fn.plugin_name.defaultOption, options);

              // Our plugin implementation code goes here.

 

              return this;      // 마지막에 return this를 한다. (연속적으로 호출 가능한 형태)

           };

   1.8 모든 새로운 메소드는 jQuery.fn 개체에 종속되도록 하고, 

        모든 함수는 jQuery 개체에 종속되게 한다.

   1.9 모든 메소드와 함수는 반드시 세미콜론(;)으로 끝나야 한다. 그렇지 않으면 파일을 압축할 때

        코드가 깨진다.

   1.10 this.each를 사용해서 현재 element set에 접근해야 한다. (호환성을 위해)

 

2. 

   2.1 개체 내의 정적인 함수 모으기

      - 만약 여러개의 정적인 메소드가 필요하다면, 하나의 개체에 그것들을 추가해야 한다. 

        예를 들어 아래와 같은 코드가 있다면

           jQuery.logError = function() { ... };

           jQuery.logInfo = function() { ... };

           jQuery.logDebug = function() { ... };

        아래와 같이 바꾼다.

           jQuery.log = {

              error : function() { ... };

              info : function() { ... };

              debug : function() { ... };

           }