JavaScript 플러그인 시스템 설계

많은 인기있는 라이브러리 및 프레임 워크는 WordPress, JQuery, Gatsby, Eleventy 및 Vue와 같은 플러그인 시스템을 사용합니다. 플러그인 시스템을 통해 개발자는 안전하고 확장 가능한 방식으로 기능을 추가하여 핵심 프로젝트 및 커뮤니티를 구축하면서 유지 보수 부담을 줄일 수 있습니다. 이 기사는 JavaScript 플러그인 시스템을 구축하여 설계 개념을 설명합니다.

다른 개발자가 "버튼"기능을 추가 할 수 있도록 Betacalc라는 간단한 JavaScript 계산기의 예를 들어 보겠습니다.

초기 계산기 코드 :

 // 계산기 const betacalc = {
    currentValue : 0,

    setValue (newValue) {
        this.currentValue = newValue;
        Console.log (this.currentValue);
    },

    Plus (추가) {
        this.setValue (this.currentValue addend);
    },

    마이너스 (Subtrahend) {
        this.setValue (this.currentValue -Subtrahend);
    }
};

// 계산기 Betacalc.setValue (3) 사용; // => 3
betacalc.plus (3); // => 6
betacalc.minus (2); // => 4

이 계산기는 기능이 제한되어 있으며 console.log 통해서만 결과를 표시 할 수 있습니다. 다음으로 플러그인 시스템을 추가합니다.

가장 간단한 플러그인 시스템 :

먼저 개발자가 플러그인을 등록 할 수있는 register 메소드를 만듭니다. 이 메소드는 플러그인을 가져 와서 exec 기능을 가져오고 계산기에 새로운 메소드로 첨부합니다.

 // 계산기 const betacalc = {
    // ... 기타 계산기 코드 레지스터 (플러그인) {
        const {name, exec} = 플러그인;
        이 [이름] = exec;
    }
};

간단한 "정사각형"버튼 플러그인의 예 :

 // 플러그인 정의 const squaredplugin = {
    이름 : '제곱',
    exec : function () {
        this.setValue (this.currentValue * this.currentValue);
    }
};

// 레지스터 플러그인 betacalc.register (squaredplugin);

플러그인에는 일반적으로 코드와 메타 데이터 (이름, 설명, 버전 번호, 종속성 등)의 두 부분이 포함되어 있습니다. 이 예에서 exec 함수에는 코드가 포함되어 있으며 name 메타 데이터입니다. 등록 후, exec 함수는 방법으로 betaCalc 객체에 직접 연결됩니다.

이제 Betacalc에는 새로운 "제곱"버튼이 있습니다.

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

이 방법은 간단하고 사용하기 쉽고 플러그인을 NPM을 통해 쉽게 배포하고 가져올 수 있습니다. 그러나 결함이 있습니다. 플러그인은 betaCalc 에서 직접 this 하고 모든 코드를 읽고 쓸 수있는 권한이 있으며 개방 및 폐쇄 원리를 위반합니다. 또한 squared 기능은 부작용을 통해 작동하며 이상적이지 않습니다.

개선 된 플러그인 아키텍처 :

이러한 문제를 해결하기 위해 플러그인 아키텍처를 향상시킵니다.

 // 계산기 const betacalc = {
    currentValue : 0,

    setValue (value) {
        this.currentValue = value;
        Console.log (this.currentValue);
    },

    핵심: {
        '플러스': (CurrentVal, Addend) => CurrentVal Addend,
        '마이너스': (currentVal, subtrahend) => currentVal -subtrahend
    },

    플러그인 : {},

    누르기 (ButtonName, NewVal) {
        const func = this.core [buttonname] || this.plugins [buttonName];
        this.setValue (func (this.currentValue, newval));
    },

    등록 (플러그인) {
        const {name, exec} = 플러그인;
        this.plugins [name] = exec;
    }
};

// 플러그인 const squaredplugin = {
    이름 : '제곱',
    exec : function (currentValue) {
        currentValue * currentValue를 반환합니다.
    }
};

betacalc.register (squaredplugin);

// 계산기 Betacalc.setValue (3) 사용; // => 3
betacalc.press ( 'plus', 2); // => 5
betacalc.press ( 'squared'); // => 25
betacalc.press ( 'squared'); // => 625

개량:

1. 플러그인을 코어 메소드에서 분리하고 plugins 개체에 저장하여 보안을 향상시킵니다.
2. press 방법을 사용하여 기능을 찾아 이름으로 호출하고 버튼을 순수한 기능으로 변환하고 API를 단순화하고 편리한 테스트 및 커플 링을 줄입니다.

이 아키텍처는 더 제한적이지만 더 안전하고 신뢰할 수 있습니다. 플러그인의 기능 확장을 제한하여 너무 엄격 할 수 있습니다. 플러그인 저자의 권한은 신중하게 평가해야하므로 프로젝트의 안정성을 보장 할뿐만 아니라 문제를 해결할 수 있습니다.

추가 개선 :

더욱 향상 될 수 있습니다. 오류 처리 추가, 플러그인 기능 확장 (등록 라이프 사이클 콜백, 스토리지 상태 등) 및 플러그인 등록 메커니즘 (배치 등록, 구성 설정 등)을 향상시킵니다.

요약 :

우수한 플러그인 시스템을 구축하는 것은 쉽지 않으며 다양한 요소를 신중하게 고려해야합니다. 기존 프로젝트 (예 : jQuery, Gatsby 등) 및 JavaScript 디자인 패턴의 플러그인 시스템과 소프트웨어 개발 원칙 (예 : 오픈 및 종료 원리, 느슨한 커플 링, Dimitter 규칙, 종속성 주입)을 참조하여 장기적으로 모든 사용자 요구를 충족시키는 플러그인 시스템을 구축 할 수 있습니다. 좋은 플러그인 시스템은 개발자 커뮤니티의 번영을 촉진하고 상생 상황을 달성 할 수 있습니다.

위 내용은 JavaScript 플러그인 시스템 설계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!