jQuery plugin이란 것은

이미 instance화 되어진 object인 jQuery object를 확장하여 새로운 function을 만들어서 사용할 수 있게 하는 것을 의미합니다.

이전 강좌에서 배웠듯이 간단하게 instance화된 새로운 함수 명에 새로운 함수를 작성하면 된다고 볼 수 있다.

하지만 jQuery object의 강점중에 하나인 selector로 반환되어져오는 jQuery object를 그대로 사용할 수 있는 형태여야 할 것이다.

그래서 미리 만들어진 방법인 $.fn 이라는 namespace밑에 확장해주면 원하는 결과를 얻을 수 있다.

이렇게 보면 jQuery plugin의 작성이라는 건 굉장히 단순해 보인다. 실제로도 그렇다.

하지만 특정 plugin을 작성하려면 많은 methods, event procedures 그리고 속성 등을 사용할 수 있어야 편리할 것이다.

그래서 jQuery org에서 말하는 plugin 작성법을 기준으로 몇가지를 숙지해 두는 편이 나은 방법인 것과 공유되질 수있는 방법론이 될 것이다.

1. $.fn을 확장하면 $ jQuery object를 활용하여 사용할 수 있는 plugin 작성가능하고 $.fn은 jQuery effin'이라고 읽어라는 군요. 제이쿼리 에핀 이렇게 읽으면 되는 건가?(영어가 편한 언어가 아니라. 아픔이 큽니다.)

2. 외부 코드와 분리해주시기 위해서 self-invating function을 이용하여 작성하자.

3. method의 호출 결과로 반드시 특정 object나 value를 반환해주는 것이 아니라면(왠만하면 그러지 않는 것이 좋을 것다.) jQuery에 chainability(사전에도 없는 말이다.
   굳이 한글로 바꾸자면 연쇄적으로 내지는 연속적으로 호출가능한 형태)를 유지해주자.

4. 동작에 필요한 defaults 값들을 object정의하고 외부에서 받아올 options object을 받아서 $.extend()로 확장하여 사용한다.

5. 하나의 plugin이라도 수많은 methods를 다른 함수로 일일히 작성하지 말고 하나의 plugin함수 안에서 paramter를 받아서 내부에서 분기하도록 하자.

6. bind 등(애매한 표현 등... 하하 이벤트에 procedure를 붙이는 방법이 다른 좋은 방법들과 이슈가 되는 많다고 하니 이렇게 애매하게 표현하는게 상책이죠.)을 통해서 event procedure를 호출하려고 할때에 다른 plugin과 구분하거나 한번에 unbind하기 위해서라도 plugin이름을 활용하여 명명하자.

7. 일반적으로 object의 속성과 비교하면 상이한 점이 꽤나 있다.
   하지만 이 instance화되어져 있는 jQuery의 plugin으로서 마찬가지 instance화되어져 있는 속성이라는 것이 각 개체의 특정 값을 유지하거나 공유하기 위해서라면
   이걸 jQuery에서는 data라고 하고 data메서드를 활용하여 작성한다.
   여기서 마찬가지 하나 data메서드, 결국 하나의 data라는 object인데 그 하위에 plugin과 같은 이름 명명하고 그 하위에  값이나 개체의 형태로 data안에 해당 plugin의 속성을 작성해준다.

위의 방법이 반드시 강제성을 띠는 것은 아니다. 단지 가이드 라인이라고 해야할 것이다.

필요하고 더 나은 방법이 있다면 다른 방식으로 구현하고 그 방법이 실제로 더 나은 방벙이라면 역으로 제시하여 새로운 가이드가 만들어질 수도 있을 것이다.

이제 위의 항목들을 하나 하나 살펴보도록 하자.

1. $.fn을 확장하면 $ jQuery object를 활용하여 사용할 수 있는 plugin 작성가능하고 $.fn은 jQuery effin'이라고 읽어라는 군요. 제이쿼리 에핀 이렇게 읽으면 되는 건가?(영어가 편한 언어가 아니라. 아픔이 큽니다.)

2. 외부 코드와 분리해주시기 위해서 self-invating function을 이용하여 작성하자.

자 그러므로 가장 단순한 형태의 jQuery Plugin 작성형태라고 하면 "(function ($){ $.fn.myplugin = function () { } })($)"이 될 것이다.

3. method의 호출 결과로 반드시 특정 object나 value를 반환해주는 것이 아니라면(왠만하면 그러지 않는 것이 좋을 것다.) jQuery에 chainability(사전에도 없는 말이다.
   굳이 한글로 바꾸자면 연쇄적으로 내지는 연속적으로 호출가능한 형태)를 유지해주자.

그럼 chainability하게 작성하는 방법에 관해서 알아보자.

적절한 예제라고 보기에는 억지가 많지만 작성법만을 보도록 하자.

결국 마지막에 instance화된 자신의 object를 의미하는 this를 반환하면 된다.

4. 동작에 필요한 defaults 값들을 object정의하고 외부에서 받아올 options object을 받아서 $.extend()로 확장하여 사용한다.

5. 하나의 plugin이라도 수많은 methods를 다른 함수로 일일히 작성하지 말고 하나의 plugin함수 안에서 paramter를 받아서 내부에서 분기하도록 하자.

6. bind 등(애매한 표현 등... 하하 이벤트에 procedure를 붙이는 방법이 다른 좋은 방법들과 이슈가 되는 많다고 하니 이렇게 애매하게 표현하는게 상책이죠.)을 통해서 event procedure를 호출하려고 할때에 다른 plugin과 구분하거나 한번에 unbind하기 위해서라도 plugin이름을 활용하여 명명하자.

7. 일반적으로 object의 속성과 비교하면 상이한 점이 꽤나 있다.
   하지만 이 instance화되어져 있는 jQuery의 plugin으로서 마찬가지 instance화되어져 있는 속성이라는 것이 각 개체의 특정 값을 유지하거나 공유하기 위해서라면
   이걸 jQuery에서는 data라고 하고 data메서드를 활용하여 작성한다.
   여기서 마찬가지 하나 data메서드, 결국 하나의 data라는 object인데 그 하위에 plugin과 같은 이름 명명하고 그 하위에  값이나 개체의 형태로 data안에 해당 plugin의 속성을 작성해준다.

먼저 간단하게 table cell 까만 막대기를 그려주는 jQuery plugin을 작성법대로 기본을 잡아주자.

자! 이제 랜덤한 길이로 보이도록 하자.
(참고로 차분히 이해를 돕기 위해서 step별로 하는 것이지 절대로 원고 불리기가 아닙니다. ㅡㅡ;)

자! 그럼 이제 길이과 미리 정해진 색상과 라벨을 할당하고 이에 관한 속성을 만들어 보도록 하겠습니다.

이렇게 만들어진 속성에 해당하는 data로 유지된 value를 event procedure에 활용하는 형태로 마무리해보겠습니다.

출처 - http://www.sqler.com/456517

jQuery:$.extend() 와 $.fn.extend() 의 혼동

.extend() 함수를 사용할 때 하나의 인수를 넘기는 것과 두 개 이상의 인수를 넘기는 것에는 아주 큰 차이가 있습니다.

.extend() 함수가 하나의 객체를 받을 때

선언된 메소드를 jQuery 나 jQuery.fn (jQuery.prototype, 또는 $.fn 이라고 불리죠.) 에 추가시킵니다.

일반적으로 함수를 위해서는 jQuery 객체를 extend 시키고 메소드를 위해서는 jQuery.fn 을 extend 시킵니다. 함수는 DOM 에서 바로 접근이 불가능하고 메소드는 바로 접근이 가능하죠.

다음 예제에서 jQuery.fn 또는 jQuery 객체를 extend 시킬 때 부르는 방식이 달라짐을 눈여겨 보시기 바랍니다.

1. $.fn.extend({
2. myMethod: function(){...}
3. });
4. //jQuery("div").myMethod();
5.  
6. $.extend({
7. myMethod2: function(){...}
8. });
9. //jQuery.myMethod2(); 

.extend() 함수가 2개 이상의 객체를 받을 때

일반적으로 알려진 것 처럼 첫 번째 객체와 두 번째 객체를 병합(merge) 합니다.

1. var defaults = { size: 3 };
2. var options = { height: 6 };
3. var opts = $.extend(defaults, options)
4. // 'defaults' 가 'options' 에 정의된 메소드와 변수들을 받아옵니다.
5. // opts == defaults == { size: 3, height: 6 }
6. // options == { height: 6 };

만약에 첫 번째 객체가 빈 객체라면 메소드와 변수들을 새로운 객체에 추가시킵니다.

만약 여러 개의 객체들을 단 하나의 객체도 변화시키지 않고 새로운 객체에 만들 때 아주 유용합니다.

1. var opts = $.extend( {}, defaults, options);
2. // 'opts' 가 'defaults' 와 'options'에 선언된 모든 메소드와 변수들을 받습니다.
3. // 'defaults' 와 'options' 는 변하지 않습니다.
4. // opts == { size: 3, height: 6 }
5. // defaults == { size: 3 };
6. // options == { height: 6 };

출처 - http://m.blog.naver.com/k_rifle/178134527

함수의 apply(), call() 메서드

From. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍

함수에는 apply()와 call() 두 가지 메서드가 더 있습니다. 이들 메서드는 모두 소유자인 함수를 호출하면서 this를 넘기는데, 결과적으로는 함수 내부에서 this 객체의 값을 바꾸는 것이나 마찬가지입니다. apply() 메서드는 매개변수로 소유자 함수에 넘길 this와 매개변수 배열으로 받습니다. 두 번째 매개변수는 Array의 인스턴스일 수도 있고 arguement 객체일 수도 있습니다. 다음 예제를 보십시오.

이 예제에서 callSum1()은 sum()을 호출하면서 자신의 this와 arguments 객체를 매개변수로 넘겼습니다. callSum2() 역시 sum()을 호출하지만 이번에는 arguments 객체가 아니라 매배변수 배열을 넘겼습니다. 두 함수 모두 올바르게 실행됩니다.

call() 메서드도 apply()와 마찬가지로 동작하지만 매개변수를 전달하는 방식이 다릅니다. this가 첫 번째 매개변수인 점은 똑같지만 call()을 사용할 때는 반드시 다음 예제와 같이 매개변수를 각각 나열해야 합니다.

결과는 apply()와 마찬가지입니다. apply()와 call() 중 어느 쪽을 쓸지는 순전히 개발자의 재량이며 매개변수를 전달하기 편리한 방식으로 택하면 됩니다. arguments 객체를 그대로 전달해도 되거나 매개변수로 전달할 데이터가 이미 배열 형태로 준비되어 있다면 apply()가 나을 것이고, 그렇지 않다면 call()이 더 나을 겁니다. 전달할 매개변수가 없다면 두 메서드는 완진히 똑같습니다.

물론 apply()와 call()의 진가는 매개변수를 전달해 호출하는 것이 아니라 this를 바꾸는데 있습니다. 다음 예제를 보십시오.

이 예제는 this 객체를 설명할 때 썼던 예제를 조금 고친 겁니다. 이번에도 sayColor()는 전역 함수로 정의되었으므로 전역 스코프에서 호출하면 this.color를 window.color로 평가하여 "red"를 표시합니다. sayColor.call(this)나 sayColor.call(window)와 같이 호출하면 함수 컨텍스트를 명시적으로 전역 스코프로 지정하는 것인데 이렇게 해도 마찬가지로 "red"를 표시합니다. 반면 sayColor.call(o)는 함수의 컨텍스트를 o로 설정하므로 "blue"를 표시합니다.

call()이나 apply()를 써서 스코프를 바꾸면 객체마다 일일히 메서드를 등록하지 않아도 된다는 장점이 있습니다. this 객체를 설명할 때는 o 객체에 직접 sayColor() 메서드를 등록했었지만 이번에는 그렇게 하지 않았습니다.

ECMAScript 5판의 함수에는 bind()라는 메서드도 정의되었습니다. 이 메서드는 새 함수 인스턴스를 만드는데 그 this는 bind()에 전달된 값입니다. 예를 들어 다음 코드를 보십시오.

이 예제에서는 sayColor()에서 bind()를 호출하면서 객체 o를 넘겨 objectSayColor()라는 함수를 생성했습니다. objectSayColor() 함수의 this는 o에 묶이므로 전역에서 함수르 호출하더라도 항상 "blue"를 표시합니다.

출처 - http://www.florakid.com/florakid_lib/sub/javascript/apply_call_method.html

arguments 객체는 함수에 전달된 인수에 해당하는 Array같은 객체입니다.

구문

arguments

설명

arguments 객체는 모든 함수 내에서 이용 가능한 지역 변수입니다. arguments 객체를 사용하여 함수 내에서 함수의 인수를 참조할 수 있습니다. 이 객체는 함수에 전달된 각 인수를 위한 항목(entry)을 포함합니다, 첫 번째 항목의 인덱스가 0에서 시작하는. 예를 들어, 함수에 인수 셋이 전달된 경우, 다음과 같이 참조할 수 있습니다:

arguments[0]
arguments[1]
arguments[2]

arguments는 설정될 수도 있습니다:

arguments[1] = 'new value';

arguments 객체는 Array가 아닙니다. Array와 비슷하지만 length 빼고는 어떤 Array 속성도 없습니다. 예를 들어, pop 메서드가 없습니다. 그러나 실제 Array로 변환될 수 있습니다:

var args = Array.prototype.slice.call(arguments);

arguments를 실제 Array로 변환하기 위해 Array.from() 메서드 또는 전개 연산자를 사용할 수도 있습니다:

var args = Array.from(arguments);
var args = [...arguments];

var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));

당신이 형식상 받기로 선언된 것보다 많은 인수로 함수를 호출하는 경우 arguments 객체를 사용할 수 있습니다. 이 기법은 가변 인수가 전달될 수 있는 함수에 유용합니다. 함수에 전달된 인수의 수를 결정하기 위해 arguments.length를 쓰세요, 그 뒤에 arguments 객체를 사용하여 각 인수를 처리하세요. 함수 signature에 매개변수의 수를 결정하기 위해서는, Function.length 속성을 쓰세요.

속성

arguments.callee

현재 실행 중인 함수를 가리킵니다.

arguments.caller 

현재 실행 중인 함수를 호출한 함수를 가리킵니다.

arguments.length

함수에 전달된 인수의 수를 가리킵니다.

arguments[@@iterator]

arguments의 각 인덱스 값을 포함하는 새로운 Array Iterator 객체를 반환합니다.

예

여러 문자열을 연결하는 함수 정의하기

이 예는 여러 문자열을 연결하는 함수를 정의합니다. 함수의 유일한 형식 인수는 연결할 항목을 구분하는 문자를 지정하는 문자열입니다. 함수는 다음과 같이 정의됩니다:

function myConcat(separator) {
  var args = Array.prototype.slice.call(arguments, 1);
  return args.join(separator);
}

이 함수에 인수를 얼마든지 전달할 수 있으며 리스트 내 항목처럼 각 인수를 사용하여 리스트를 만듭니다.

// "red, orange, blue" 반환
myConcat(", ", "red", "orange", "blue");

// "elephant; giraffe; lion; cheetah" 반환
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

// "sage. basil. oregano. pepper. parsley" 반환
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

HTML 리스트를 만드는 함수 정의하기

이 예는 리스트 HTML을 포함하는 문자열을 만드는 함수를 정의합니다. 함수의 유일한 형식 인수는 리스트가 정렬되지 않은(bulluet(글 머리 기호)가 붙는) 경우 "u" 또는 정렬된(번호가 매겨진) 경우 "o"인 문자열입니다. 함수는 다음과 같이 정의됩니다:

function list(type) {
  var result = "<" + type + "l><li>";
  var args = Array.prototype.slice.call(arguments, 1);
  result += args.join("</li><li>");
  result += "</li></" + type + "l>"; // end list

  return result;
}

이 함수에 인수를 얼마든지 전달할 수 있고, 표시된 유형의 리스트에 항목으로 각 인수를 추가합니다. 예를 들면:

var listHTML = list("u", "One", "Two", "Three");

/* listHTML은:

"<ul><li>One</li><li>Two</li><li>Three</li></ul>"

*/

나머지, 기본 및 비구조화된 매개변수

arguments 객체는 나머지 매개변수, 기본 매개변수 또는 비구조화된 매개변수와 함께 사용될 수 있습니다.

function foo(...args) {
  return arguments;
}
foo(1, 2, 3); // { "0": 1, "1": 2, "2": 3 }

그러나, 비엄격 함수에서는 mapped arguments 객체는 함수가 어떤 나머지 매개변수, 기본 매개변수 또는 비구조화된 매개변수든 포함하지 않는 경우에만 제공됩니다. 예를 들어, 기본 매개변수를 사용하는 다음 함수에서는, 100 대신에 10이 반환됩니다:

function bar(a=1) {
  arguments[0] = 100;
  return a;
}
bar(10); // 10

이 예에서, 어떤 나머지 매개변수, 기본 매개변수 또는 비구조화된 매개변수가 없는 경우에는, 100이 반환됩니다:

function zoo(a) {
  arguments[0] = 100;
  return a;
}
zoo(10); // 100

출처 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/arguments