JavaScript 플러그인 시스템 구축

본문 번역 https://css-tricks.com/designing-a-javascript-plugin-system/
플러그인은 라이브러리와 프레임워크의 흔한 기능이며, 개발자가 안전하고 확장 가능한 방식으로 기능을 추가할 수 있도록 하는 좋은 이유가 있다.이것은 핵심 프로젝트를 더욱 가치있게 한다. 이런 개방 상황은 프로젝트가 지역 사회를 구축하는 데 도움을 줄 뿐만 아니라 우리에게 추가적인 유지 보수 부담을 증가시키지 않을 것이다.
본고는 자바스크립트를 사용하여 우리 자신의 플러그인 시스템을 구축합니다.
여기에서 나는'pluginn'이라는 단어를 사용하지만, 이런 것들은 때때로 다른 이름이라고도 부른다. 예를 들어'extensions','add-ons'또는'modules'이다.당신의 이름이 무엇이든지 그 의미는 (수익과) 같다.
플러그인 시스템을 구축합시다BetaCalc 이라는 예시 항목부터 시작합시다.BetaCalc의 목표는 간단한 JavaScript 계산기가 되고 다른 개발자들이 그 안에 단추를 추가할 수 있는 것이다.다음은 몇 가지 기본적인 코드로 우리가 입문하는 데 도움을 줄 수 있다.

// The Calculator
const betaCalc = {
 currentValue: 0,
 
 setValue(newValue) {
  this.currentValue = newValue;
  console.log(this.currentValue);
 },
 
 plus(addend) {
  this.setValue(this.currentValue + addend);
 },
 
 minus(subtrahend) {
  this.setValue(this.currentValue - subtrahend);
 }
};

// Using the calculator
betaCalc.setValue(3); // => 3
betaCalc.plus(3);   // => 6
betaCalc.minus(2);  // => 4

간단하게 보기 위해서, 우리는 계산기를 object-literal 으로 정의했다.이 계산기는 console.log 을 통해 결과를 출력합니다.
지금 기능은 정말 간단합니다.우리는 숫자를 받아들여 스크린에 표시하는 setValue 방법이 있다.plus과 minus 방법이 있습니다. 현재 표시된 값에 대해 작업을 수행합니다.
더 많은 기능을 추가할 때가 되었다.플러그인 시스템을 만드는 것부터 시작합시다.
세계에서 가장 작은 플러그인 시스템
우리는 register 방법을 만드는 것부터 시작하여 다른 개발자들이 BetaCalc에 플러그인을 등록할 수 있도록 사용할 것이다.이 방법의 원리는 매우 간단하다. 외부 플러그인을 얻고 exec의 기능을 얻으며 이를 새로운 방법으로 우리의 계산기에 추가한다.

// The Calculator
const betaCalc = {
 // ...other calculator code up here
 register(plugin) {
  const { name, exec } = plugin;
  this[name] = exec;
 }
};

이 플러그인은 계산기에 squared 단추를 제공하는 예제 플러그인입니다.

// Define the plugin
const squaredPlugin = {
 name: 'squared',
 exec: function() {
  this.setValue(this.currentValue * this.currentValue)
 }
};

// Register the plugin
betaCalc.register(squaredPlugin);

많은 플러그인 시스템에서 플러그인은 일반적으로 두 부분으로 나뉩니다.

실행할 코드

메타데이터(예를 들어 명칭, 설명, 버전 번호, 의존항 등)

우리의 플러그인에서 exec 함수는 우리의 코드를 포함하고 이름은 우리의 메타데이터입니다.플러그인을 등록할 때 exec 함수는 betaCalc 대상에 직접 방법으로 추가되어 BetaCalc의 this 에 접근할 수 있습니다.
현재 BetaCalc에 새로운 squared 단추가 있습니다. 직접 호출할 수 있습니다.

betaCalc.setValue(3); // => 3
betaCalc.plus(2);   // => 5
betaCalc.squared();  // => 25
betaCalc.squared();  // => 625

이 시스템은 많은 장점이 있다.이 플러그인은 간단한 대상 글자의 양으로 우리에게 전달할 수 있는 함수입니다.이는 플러그인을 npm에서 다운로드하여 ES6 모듈로 가져올 수 있음을 의미합니다.
하지만 우리 시스템에는 결함이 있다.
플러그인에 BetaCalc에 대한 this의 접근 권한을 제공하여 모든 BetaCalc의 코드를 읽기/쓰기 접근할 수 있습니다.currentValue을 획득하고 설정하는 데 유용하지만 위험하다.만약 어떤 플러그인이 내부 함수 (예를 들어 setValue) 를 재정의하려고 한다면, 그것은 BetaCalc 및 기타 플러그인에 의외의 영향을 미칠 수 있습니다.이것은 개방 폐쇄 원칙을 위반했다. 이 원칙은 소프트웨어 실체가 확장에 대해 개방하고 수정에 대해 폐쇄해야 한다고 규정했다.
마찬가지로 squared 함수는 부작용을 발생시켜 작용을 발휘한다.이것은 JavaScript에서 적지 않지만, 느낌이 좋지 않다. 특히 다른 플러그인이 같은 내부 상태를 처리할 수 있을 때.더욱 실용적인 방법은 우리 시스템을 더욱 안전하고 예측할 수 있게 하는 데 크게 도움이 될 것이다.
향상된 플러그인 아키텍처
더 좋은 플러그인 구조를 봅시다.다음 예제에서는 계산기와 플러그인 API를 변경합니다.

// The Calculator
const betaCalc = {
 currentValue: 0,
 
 setValue(value) {
  this.currentValue = value;
  console.log(this.currentValue);
 },
 
 core: {
  'plus': (currentVal, addend) => currentVal + addend,
  'minus': (currentVal, subtrahend) => currentVal - subtrahend
 },

 plugins: {},  

 press(buttonName, newVal) {
  const func = this.core[buttonName] || this.plugins[buttonName];
  this.setValue(func(this.currentValue, newVal));
 },

 register(plugin) {
  const { name, exec } = plugin;
  this.plugins[name] = exec;
 }
};
 
// Our Plugin
const squaredPlugin = { 
 name: 'squared',
 exec: function(currentValue) {
  return currentValue * currentValue;
 }
};

betaCalc.register(squaredPlugin);

// Using the calculator
betaCalc.setValue(3);   // => 3
betaCalc.press('plus', 2); // => 5
betaCalc.press('squared'); // => 25
betaCalc.press('squared'); // => 625

우리는 이곳에서 주의할 만한 변경을 했다.
우선, 우리는 플러그인을'핵심'계산기 방법(예를 들어 plus과 minus)과 분리합니다. 방법은 그것을 자신의 플러그인 대상에 놓는 것입니다.플러그인을 plugin 대상에 저장하면 시스템을 더욱 안전하게 할 수 있습니다.현재 플러그인은 BetaCalc 속성에 접근하지 않습니다. - 그들은 betaCalc에만 접근할 수 있습니다.plugins의 속성입니다.
그 다음에 우리는press 방법을 실현했다. 이 방법은 이름에 따라 단추를 찾는 기능을 하고 그것을 호출했다.현재, 플러그인의exec 함수를 호출할 때, 현재 계산기 값 (currentValue) 을 전달하고, 새 계산기 값을 되돌려 주기를 기대합니다.
본질적으로, 이런 새로운press 방법은 우리의 모든 계산기 단추를 순수 함수로 변환한다.그들은 값을 얻고 조작을 한 후에 결과를 되돌려주었다.이것은 매우 많은 장점이 있다.

은 API를 단순화합니다.

은 베타Calc와 플러그인 자체에 대한 테스트를 더욱 쉽게 합니다.

은 우리 시스템의 의존성을 줄이고 더욱 느슨하게 결합시켰다.

이 새로운 체계 구조는 첫 번째 예시보다 더 많은 제한이 있지만, 방식은 좋다.우리는 플러그인 작성자를 위해 보호란을 설치하여 그들이 우리가 하고 싶은 것만 하도록 제한했다.
사실 그것은 너무 엄격할 수도 있다.현재, 우리의 계산기 플러그인은 currentValue 만 조작할 수 있습니다.플러그인 작성자가 메모리 단추나 기록 추적 방법 같은 고급 기능을 추가하려면 할 수 없습니다.
그렇게 지도 모른다, 아마, 아마...네가 플러그인 작가에게 부여한 힘은 미묘한 균형이다.그것들에게 너무 많은 권한을 주면 항목의 안정성에 영향을 줄 수 있다.그러나 그들에게 아주 적은 권한을 주면 문제를 해결하기 어려울 것이다.
우리가 뭘 할 수 있겠어?
우리는 또한 많은 일을 해서 우리의 시스템을 개선할 수 있다.
플러그인 작성자가 이름이나 반환 값을 정의하지 않으면 오류 처리를 추가하여 플러그인 작성자에게 알릴 수 있습니다.QA 개발자처럼 이러한 상황을 능동적으로 처리할 수 있도록 시스템이 어떻게 붕괴되는지 생각하고 상상해 보세요.
우리는 플러그인의 기능 범위를 확장할 수 있다.현재 BetaCalc 플러그인에 단추를 추가할 수 있습니다.그러나 만약 그것이 일부 생명주기 이벤트의 리셋을 등록할 수 있다면 (예를 들어 계산기가 값을 표시할 때) 어떻게 합니까?또는 여러 상호작용의 상태를 저장할 수 있는 전용 위치가 있다면 어떻게 해야 합니까?
우리는 또한 플러그인 등록을 확장할 수 있다.초기 설정 등록 플러그인을 사용할 수 있다면 어떻게 합니까?플러그인을 더욱 유연하게 할 수 있습니까?플러그인 작성자가 버튼 키트 (예: BetaCalc Statistics Pack ) 가 아닌 전체 버튼 키트를 등록하려면 어떻게 해야 합니까?이를 지원하기 위해서는 어떤 변경이 필요합니까?
당신의 플러그인 시스템
BetaCalc와 플러그인 시스템은 매우 간단합니다.만약 당신의 프로젝트가 비교적 크다면, 다른 플러그인 체계 구조를 탐색해야 합니다.
성공적인 플러그인 시스템의 예시를 얻기 위해 기존 프로젝트를 보는 것이 좋은 출발점이다.JavaScript의 경우 jQuery, Gatsby, D3, CKEditor 또는 기타 를 볼 수 있습니다.
너는 아마도 각종 자바스크립트 디자인 모델을 익히고 싶을 것이다.모든 모델은 서로 다른 인터페이스와 결합 정도를 제공하는데, 이것은 당신에게 선택할 수 있는 좋은 플러그인 체계 구조 옵션을 많이 제공한다.이 옵션들을 이해하면 프로젝트를 사용하는 모든 사람들의 요구를 더욱 잘 균형 있게 할 수 있다.
모델 자체를 제외하고 너는 많은 좋은 소프트웨어 개발 원칙을 참고하여 이런 결정을 내릴 수 있다.나는 이미 몇 가지 방법(예를 들어 개폐 원리와 느슨한 결합)을 언급했지만, 다른 몇 가지 관련 방법은 Demeter 의 법칙과 의존 주입을 포함한다.
나는 이것이 매우 많이 들리는 것을 알고 있지만, 너는 반드시 연구를 진행해야 한다.모든 사람이 플러그인을 다시 쓰는 것만큼 고통스러운 것은 없다. 플러그인 구조를 바꿔야 하기 때문이다.이것은 신뢰를 잃고 사람들이 미래에 기여하는 것을 막는 빠른 방법이다.
결론
처음부터 작성된 플러그인 구조는 매우 어렵습니다!너는 모든 사람의 수요를 만족시키는 시스템을 구축하기 위해 많은 고려 요소를 따져야 한다.간단해요?충분히 강해요?그것은 장기적으로 일할 수 있습니까?
노력할 만하다.좋은 플러그인 시스템을 가지고 있으면 모든 사람을 도울 수 있다.개발자는 자유롭게 문제를 해결할 수 있다.최종 사용자는 대량의 선택 기능을 얻을 수 있다.이렇게 하면 너는 프로젝트 주위에서 생태계와 지역사회를 발전시킬 수 있다.이것은 윈윈하는 국면이다.
이상은 자바스크립트 플러그인 시스템을 구축하는 상세한 내용입니다. 자바스크립트 플러그인에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!