더 나은 jQuery를 만드는 데 도움이 되는 10가지 팁

이 문서에는 더 나은 jQuery 플러그인을 만드는 데 도움이 되는 10가지 제안이 요약되어 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 지침은 다음과 같습니다.

많은 jQuery 플러그인을 개발한 후, 저는 jQuery 플러그인 개발을 위한 상대적으로 표준적인 구조와 패턴 세트를 천천히 알아냈습니다. 이렇게 하면 대부분의 코드 구조를 복사하여 붙여넣고 기본 논리 코드에만 집중할 수 있습니다. 동일한 디자인 패턴과 아키텍처를 사용하면 버그 수정이나 2차 개발 수행도 더 쉬워집니다. 입증된 아키텍처는 플러그인이 단순하든 복잡하든 관계없이 내 플러그인이 큰 문제를 일으키지 않도록 보장할 수 있습니다. 여기에 제가 요약한 10가지 경험을 공유합니다.

1. 모든 코드를 클로저 안에 넣으세요

제가 가장 많이 사용하는 방법입니다. 그러나 클로저 외부의 메서드를 호출할 수 없는 경우도 있습니다.

하지만 플러그인의 코드는 자신의 플러그인만 제공하므로 이 문제는 존재하지 않습니다. 모든 코드를 클로저에 넣으면 됩니다.

이 메서드는 아마도 Prototype 메서드 내부에 배치되어야 합니다.

(function($) {  
  //code here 
})(jQuery);

2. 플러그인에 대한 기본 옵션 제공

플러그인에는 개발자가 설정할 수 있는 몇 가지 옵션이 있어야 하므로 복원 기본 옵션을 제공해야 합니다. jQuery의 확장 기능을 통해 다음 옵션을 설정할 수 있습니다.

var defaultSettings = {   mode      : 'Pencil',   
               lineWidthMin  : '0',   
               lineWidthMax  : '10',   
               lineWidth    : '2' }; 
settings = $.extend({}, defaultSettings, settings || {});

3.

을 사용하여 요소를 반환합니다.

JavaScript/jQuery에는 메서드 계단식을 수행할 수 있는 좋은 기능이 있으므로 이 기능을 파괴하지 말고 항상 메서드의 요소를 반환해야 합니다. 나는 내가 만드는 모든 jQuery 플러그인에서 이 규칙을 따릅니다.

$.fn.wPaint = function(settings) {  
 return this.each(function() { 
    var elem = $(this);    
  //run some code here   
 } 
}

4. 일회성 코드를 메인 루프 외부에 배치하세요

이는 매우 중요하지만 종종 무시됩니다. 간단히 말해서, 플러그인 함수가 호출될 때마다 인스턴스화되는 것이 아니라, 기본값이 여러 개이고 한 번만 인스턴스화하면 되는 코드 조각이 있는 경우 이 코드를 플러그인 외부에 배치해야 합니다. 방법. 이를 통해 플러그인을 보다 효율적으로 실행하고 메모리를 절약할 수 있습니다.

var defaultSettings = {  
               mode      : 'Pencil',   
               lineWidthMin  : '0',   
               lineWidthMax  : '10',   
               lineWidth    : '2' }; 
settings = $.extend({}, defaultSettings, settings || {});
$.fn.wPaint = function(settings) {  
 return this.each(function() { 
    var elem = $(this);    
  //run some code here   
 } 
}

위 코드의 "defaultSettings"는 완전히 플러그인 메소드 외부에 있음을 알 수 있습니다. 이러한 코드는 클로저 내부에 있으므로 이러한 변수가 재정의되는 것에 대해 걱정할 필요가 없습니다.

5. 클래스 프로토타이핑을 설정하는 이유

코드의 핵심인 메소드와 함수는 프로토타입 함수 내에 배치되어야 합니다. 두 가지 이유가 있습니다:

◆ 이러한 메소드를 반복적으로 생성할 필요가 없기 때문에 많은 메모리를 절약할 수 있습니다.

◆ 이미 만들어진 방법을 다시 만드는 것보다 참고하는 것이 훨씬 빠릅니다.

간단히 말하면 프로토타입은 모든 객체에서 이러한 메서드를 인스턴스화하지 않고 객체를 확장하고 이에 대한 메서드를 제공합니다. 이는 또한 코드를 더욱 체계적이고 효율적으로 만듭니다. 이러한 개발 방식에 익숙해지면 향후 프로젝트에서 많은 시간을 절약할 수 있다는 것을 알게 될 것입니다.

6. 클래스 프로토타이핑 설정 방법

프로토타입 방법 설정은 두 부분으로 구성됩니다. 먼저 초기 클래스 정의를 생성해야 합니다. 이는 대부분의 경우 객체 생성을 의미합니다. 이 정의에는 각 개체 인스턴스마다 다른 부분이 포함되어 있습니다. 내 Paint jQuery 플러그인에는 다음과 같이 작성했습니다.

function Canvas(settings) {  
 this.settings = settings;   
 this.draw = false;   
 this.canvas = null;    
   this.ctx = null;  
  return this;
}

전역 메서드를 추가해 보겠습니다.

Canvas.prototype = {   
 generate: function() { 
    //generate code  
 } 
}

여기서 핵심은 프로토타입 방법을 보편적으로 만드는 것이지만 데이터는 각 인스턴스마다 고유하며 "this"로 참조할 수 있습니다.

7. "this" 개체를 사용하세요

"$this"를 사용하면 다른 클로저에 대한 올바른 참조를 전달할 수 있습니다. $this 참조를 다른 메소드에 전달해야 할 수도 있습니다. $this라는 이름은 변경될 수 있으며, 어떤 변수 이름이라도 사용할 수 있다는 점에 유의하세요.

Canvas.prototype = {  
 generate: function()  { 
    //some code    
  var $this = this;    
  var buton = //...some code  
    button.click(function(){ 
    //using this will not be found since it has it's own this    
    //use $this instead.     
   $this.someFunc($this);    
  });  
 }, 
 someFunc: function($this)   {  
    //won't know what "this" is.  
   //use $this instead passed from the click event  
  } 
}

8. 각 개체에 설정을 저장합니다

각 개체에 나만의 설정을 저장한 다음 해당 개체의 설정을 조작해 왔습니다. 이렇게 하면 다양한 메서드에서 많은 매개변수를 전달할 필요가 없습니다. 이러한 변수를 개체에 넣으면 다른 위치에서 이러한 변수를 더 쉽게 호출할 수도 있습니다.

function Canvas(settings) {  
 this.settings = settings;  
  return this; 
}

9. 프로토타입 메소드 로직을 분리하세요

이것이 기본 원칙일 수 있습니다. 메서드 제공을 주저하는 경우 "다른 사람이 이 메서드를 재정의한다면 귀하의 코드가 그들의 요구 사항을 충족할 수 있을까요?" 또는 "다른 사람이 이 메서드를 작성하는 것이 얼마나 어려울까요?"라고 자문해 보세요. 물론 이는 유연성의 문제이다. 다음은 내 색상 선택기 jQuery 플러그인 방법 목록입니다. 참조할 수 있습니다.

generate() 
appendColors() 
colorSelect() 
colorHoverOn() 
colorHoverOff() 
appendToElement() 
showPalette() 
hidePalette()

10. Setter/Getter 옵션 제공

이것은 필요하지 않지만 내 모든 플러그인에 이 항목이 포함되어 있는 것으로 나타났습니다. 다른 사람에게 필요할 수 있는 기능을 제공하려면 약간의 코드만 필요하기 때문입니다.

기본적으로 개발자가 요소의 기존 값을 설정하거나 가져올 수 있도록 허용하면 됩니다.

var lineWidth = $("#container").wPaint("lineWidth"); 
$("#container").wPaint("lineWidth", "5");

요약: 위 10가지 항목은 기본적으로 jQuery 플러그인 개발의 핵심을 다루며, 개발을 위한 템플릿으로 사용할 수 있습니다. 기본 코드 세트가 있으면 개발 시간이 크게 단축되고 플러그인 아키텍처를 설계할 때 더욱 자신감을 가질 수 있습니다.

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.